Autoscroll div overflow content

Question

I have one div 800px by 150px, and then some other divs inside that. The outer one have overflow hidden so you can't see what goes beyond the outer div. But i want users to be able to scroll through it horizontally to see more content. Also, I want to have a jquery script running where if they're not scrolling through it, it will automatically scroll.
Something like this:

<div id="mask" style="width: 800px; height: 150px; position: relative; overflow: hidden;">
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
</div>

Any thoughts on how to do this are welcome, thanks in advance!

Here's the HTML/CSS working: jsfiddle.net/KDhPX - for the jQuery you'll have to post what you've tried and exactly which part you're having problems with. — Joe
– Joe, Commented Sep 10, 2013 at 17:04

user2679972 · Accepted Answer · 2013-09-10 21:45:19Z

Use overflow-x and overflow-y to provide different scroll/hide-behaviour instead of the shorthand overflow CSS-property and float your inside-content. (And don't use multiple IDs anywhere in your document, but classes instead).

See JS-Fiddle

HTML:

<div id="mask">
    <div class="inner">
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/city" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/sport" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/people" alt="" />
        </div>
    </div>
</div>

CSS:

#mask {
    width: 800px;
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;
}

.inner {
    width: 2400px; /* 3 times mask */
}

.inside-content {
    float: left;
}

Collectives™ on Stack Overflow

Autoscroll div overflow content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related