With the recent release of mootools 1.2. I thought I’d share something that I have been using for a while. I call them “sliding windows” for lack of a better term. Check out the demo before we get started.

Let’s start by looking at the HTML for the example:
<div id="wrap">
<a href="#one" class="one">Goto 1</a> | <a href="#two" class="two">Goto 2</a> | <a href="#three" class="three">Goto 3</a> | <a href="#four" class="four">Goto 4</a><br /><br />

<div id=”window”>
<div id=”container”>
<div id=”slide_wrap”>
<div id=”one”><a name=”one”></a>
<img src=”images/1.gif” width=”181″ height=”107″ alt=”" border=”0″ /><br />
<span>Prev</span> <a href=”#two” class=”two next”>Next</a>
</div>
<div id=”two”><a name=”two”></a>
<img src=”images/2.gif” width=”181″ height=”107″ alt=”" border=”0″ /><br />
<a href=”#one” class=”one”>Prev</a> <a href=”#three” class=”three next”>Next</a>
</div>
<div id=”three”><a name=”three”></a>
<img src=”images/3.gif” width=”181″ height=”107″ alt=”" border=”0″ /><br />
<a href=”#two” class=”two”>Prev</a> <a href=”#four” class=”four next”>Next</a>
</div>
<div id=”four”><a name=”four”></a>
<img src=”images/4.gif” width=”181″ height=”107″ alt=”" border=”0″ /><br />
<a href=”#three” class=”three”>Prev</a> <span class=”next”>Next</span>
</div>
</div><!– end slide wrap –>
</div><!– end container –>
</div><!– end window –>
</div><!– end wrap –>
<br />
<strong>Scroller</strong>
<div id=”area”>
<div id=”knob”></div><!– end knob –>
</div><!– end area –>

We set up the sliding action by giving our overall #wrap div a width of 742px and a “hidden” overflow property, while giving the #slide_wrap div a width of 2220px. This gives us a nice long div inside an area that has a constrained “window”. Now all we have to do is add a little Javascript to the action and with the power of mootools, we’ll have some really cool stuff.

A dash of Javascript:
// setup the scroll bar
var scroll = new Fx.Scroll('container', {
wait: false, //start immediately
duration: 500, // take .5 seconds to complete the transition
offset: {'x': 0, 'y': 0}, // no padding in the scroll bar
transition: Fx.Transitions.Quad.easeInOut // make it look cool with easing
});
// trying to write for unlimited images
var area = new Array ('one', 'two', 'three', 'four');
// Slider
var mySlide = new Slider($('area'), $('knob'), { //set up the slider based on the position of the scroll bar
steps: 3, // how many positions can we slide too, 0 counts
offset: 0, // no padding
onChange: function(pos){
scroll.toElement(area[pos]); // when the scroll bar is moved, move the sliding div to the appropriate spot
}
}).set(0); // when we load the page, start at the beginning
// setup the links to take you to the correct div when clicked

$$(’a.one’).addEvent(’click’, function(event) {
event = new Event(event).stop();
mySlide.set(0);
});
$$(’a.two’).addEvent(’click’, function(event) {
event = new Event(event).stop();
mySlide.set(1);
});
$$(’a.three’).addEvent(’click’, function(event) {
event = new Event(event).stop();
mySlide.set(2);
});
$$(’a.four’).addEvent(’click’, function(event) {
event = new Event(event).stop();
mySlide.set(3);
});
Now, there’s a little bit of script for the scroll bar I added, but the basic gist of it is as follows…

First, we set up an array of our four areas:
var area = new Array ('one', 'two', 'three', 'four');

Then, we initialize the slider (see the mootools docs for more on the options:)
var mySlide = new Slider($('area'), $('knob'), { //set up the slider based on the position of the scroll bar
steps: 3, // how many positions can we slide too, 0 counts
offset: 0, // no padding
onChange: function(pos){
scroll.toElement(area[pos]); // when the scroll bar is moved, move the sliding div to the appropriate spot
}
}).set(0); // when we load the page, start at the beginning

And, last but not least we tell it where to move when a link is clicked:
$$('a.one').addEvent('click', function(event) {
event = new Event(event).stop();
mySlide.set(0);
});

That’s all there is too it!! The best part about this whole script is that we are using page anchors in our links (#one, #two, etc..) so, even if Javascript is turned off, the correct div should still appear in the window.