CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sergio Toledo Piza
Sergio Toledo Piza

Reputation: 788

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.

This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.

I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...

For example, this would be exactly what I want (the black div at the bottom):

enter image description here

If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!

Upvotes: 0

Views: 425

Answers (2)

Rusty Jeans
Rusty Jeans

Reputation: 1426

If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.

position: fixed;
right: 383px;
bottom: 0;
left: 172px;

I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.

white-space: nowrap;
overflow: auto;

The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/

To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/

Upvotes: 2

user417669
user417669

Reputation: 178

This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?

EDIT: The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.

Upvotes: 0

Related Questions