ansaurus

Question

Unobtrusive horizontal scrolling with CSS and jQuery

Answer 1

+3 A:

Your CSS contains a lot of unnecessary stuff and is not really SSCCE-flavored, so it's hard to nail down the root cause of your problem. To start, you can get it to work in a JS-disabled environment with help of fragment identifiers (<a href="#someid"> with <div id="#someid">). The remnant of the magic is done with overflow: hidden (so that you don't get a scrollbar) and position: relative (so that the element knows where it is relatively to be positioned to).

Well, here's an SSCCE so that you have something to get started with. Just copy'n'paste'n'run it.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2573478</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function() {
                $('#menu a').click(function() {
                    $('#boxes').animate({
                        left: -300 * $('.box').index($(this.hash))
                    }, 1000);
                    return false;
                });
            });
        </script>
        <style>
            #container {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden;
            }
            #boxes {
                position: relative;
                width: 900px;
            }
            #container .box {
                float: left;
                width: 300px;
                height: 300px;
            }
            #box1 { background: #fcc; }
            #box2 { background: #cfc; }
            #box3 { background: #ccf; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="boxes">
                <div id="box1" class="box">box1</div>
                <div id="box2" class="box">box2</div>
                <div id="box3" class="box">box3</div>
            </div>
        </div>
        <ul id="menu">
            <li><a href="#box1">box1</a></li>
            <li><a href="#box2">box2</a></li>
            <li><a href="#box3">box3</a></li>
        </ul>
    </body>
</html>

You can find here a live example. Hope this helps.

BalusC 2010-04-04 04:52:18

Answer 2

A:

You should really check out http://flowplayer.org/tools/scrollable.html

This jquery plugin handles this exact scenario perfectly, and guides you through the setup of your css.

Baloneysammitch 2010-04-05 21:19:54

That thing doesn't work with JS disabled.

BalusC 2010-04-06 18:55:59

Answer 3

A:

You are in luck, friend. I just yesterday released a new jQuery plugin that does this very thing:

http://www.simplesli.de

I've tried to make it as simple as possible to set up, but basically, in each slide, you can create a div in any way you like. Best of luck!

dclowd9901 2010-04-06 20:03:29

ansaurus

tags:

views:

answers:

Unobtrusive horizontal scrolling with CSS and jQuery

related questions