jQuery Tools: Scrollable / Navigator items flowing out of the container

I'm using jQuery Tool's Scrollable with the Navigator plugin.

Some useful links:

• Documentation for Scrollable
• Documentation for Scrollable's Navigator plugin
• Standalone demo of Navigator

And most importantly: a demo of how I'm using Scrollable/Navigator.

Works well so far. But I'd like for it to behave differently:

I want the images (or rather, generally speaking, el开发者_运维技巧ements in <div class="items">) to "flow" right out of the Scrollable container (<div class="slider"> in my demo) until the right border of the browser window.

People with higher screen resolutions would obviously see more pictures/items flowing out of the container than people with lower resolutions.

In case this sounds confusing (which it probably does), here's some pictures:

• first image, normal
• first image, how it should be

...then when you click on the right arrow to scroll to the next picture:

• second image, normal
• second image, how it should be

Okay, I guess that's about it. Thanks for reading this far!

Any help would be highly appreciated! Thanks in advance!

UPDATED 3 - ( Tested in IE6, IE7, IE8, Chrome, Firefox )

DEMO:

http://so.devilmaycode.it/jquery-tools-scrollable-navigator-items-flowing-out-of-the-container/

CSS:

( Representing the things to change / add )

*{margin:0;padding:0}
body,html{overflow:hidden}
#wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden
}
.slider {
    margin: 50px auto;
    width: 3000px;
    overflow: hidden
}
.slider .items {
    top: 0;
    left: 0;
    width: 3000px;
    height: 400px;
    position: absolute;
    z-index: 1
}
a.browse{z-index:2}
a.prev{left:10px}
a.next{background-position:0 -30px;left:460px}
#navi{margin:10px 0 0 50px}

Well, I find this as hard to believe as anyone, but this seems to work in Chrome at least:

css:

body, html {
    overflow: hidden;
}
.slider {
    width: 6000px;
}
.next {
    left: 560px;
}

And that's it. I'm going to see if it works in other browsers as well now.

EDIT: Of course, IE6/7 screw it up, except when there's a #hash in the url. Figures. Add the code below to make it work everywhere, centered and all.

div#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -300px;
}

Here's a link: http://nullenenenen.nl/12345_2.html

EDIT 2:

To make sure you can enjoy your content as long as possible when risizing your browser, add this as well:

div#wrapper {
    top: 10%;
    margin-top: 0;
    overflow-y: auto;
}

I can't edit the online version from where I am now, so "edit 2" has not been applied to 12345_2.html yet.

Just get rid of those width property in the CSS on slider class, and specify margin-left instead to make it has some space on the left of window, just like in your demo. But obviously you need to adjust the navigation (the anchor with class next browse so it position absolute by left (not right as in your CSS). And for the navigation below the slider, you just need to adjust it the same as the slider by adding margin-left with the same value.

Ok, assuming you want the numbers to show up on the right but not on the left and this is the only thing you want to show on the page, your main problem is that you can't have overflow: visible on the right but not on the left. How about faking it like this:

add html (add a div before slider):

<div id="wrapper">
    <div class="smokescreen"></div> <!-- added this -->
    <div class="slider">

add css:

.slider {
    overflow: visible;
}
#wrapper {
    position: relative;
}
.smokescreen {
    position: absolute; 
    top: 0px; 
    left: -2000px; 
    width: 2000px; 
    height: 400px; 
    background: black; 
    z-index: 2;
}

Here is a link: http://nullenenenen.nl/12345.html#

Now, the additional div moves with the wrapper, obscuring everything to the left of it. Of course you can alter the "2000px" as you see fit.

One question, is it essential that the .slider element is centered on screen?

if not you can do something like this:

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

I think that about covers it. The only problem is that you define how much space there is on the left side with the left margin of #wrapper element.

Here's the best I could come up with (with very little impact to the code you already have present).

CSS Changes

/* Keep original CSS, just add these to their groups */
html, body {
  overflow-x: hidden !important;
}

.slider {
  overflow: visible !important;
}

Javascript Change

// Add in the .Scrollable({ ... }) tag
onSeek: function(o,e){
  $('.items').children().css('visibility','');
  $('.items').children().filter(':lt('+e+')').css('visibility','hidden');
}

Granted, it's not instant (like it's scrolling under an object or off-screen) but it achieves what you're trying to do with very minimal effort.

EDIT

Added the overflow-x to remove horizontal scroll bar at the bottom. Observed to work in:

• FF4 (beta)
• FF3 (v3.6.13)
• IE8 (v8.0.7600.16385)
• Chorome (v8.0.552.224)