CODEWITHSUNDEEP
jqueryhtmljquery-pluginsslider
Jeffrey
Jeffrey

Reputation: 4146

jQuery div page slider off the screen, without a horizontal browser scrollbar

I'm looking for a jQuery div slider plugin that slides horizontal off the page, displaying more divs the larger the browser window is open. I like the jQuery Coda Slider... just need it to be full page, not hide the overflow, and not display the horizontal browser scrollbar.

Any suggestions?

UPDATED: Below is an example of what I'm trying to get. Basically, it's two steps. The css and the js. The first step, the css, I'm looking to get a horizontal div page scroll without a fixed height. The second step, the js, I'm looking to get the divs to slide like the jQuery Coda Slider.

alt text

Upvotes: 0

Views: 7463

Answers (1)

user113716
user113716

Reputation: 322562

I still don't know if I completely understand. Some code would be nice.

Anyway it sounds like you want the edge of the browser display to cut off whatever part of the next slide that is off the page.

If that's right, just set overflow-x to hidden on your body tag, or whatever container tag you're using that is the same width as the window.

(Except for some reason, you don't want hidden.)

           // If your content is in a container that is sized to the width
body {     //    of the body, then use that instead.
    clip: auto;
    overflow-x: hidden;
}

UPDATE: (with info from re-post)

style:

body {
            clip: auto;
            overflow-x: hidden;
        }

     /* Positioning *
        #container { width: 2500px; }
        .block { float: left; }

        /* Styling */
        .block img { padding: 5px; }​

html:

<body>
<div id="container">
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
</div>
</body>

Upvotes: 1

Related Questions