The Coda page has done something like this, and I am planning on implementing something to fill this need for my client’s project.

With that said, however, if you are building a site with this type of effect you are probably building it for an audience that would appreciate it. An audience like that is probably going to have the latest browser with JS enabled.

David

function MoveLeft() {
var bigBox = $(’BigBox’);
new Fx.Style(bigBox, ‘marginLeft’, {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
}).start(bigBox.getStyle(’marginLeft’));
}

(didn’t test it)

mootools handles all the little issues we have with JavaScript

It just goes to show you the difference between an experienced user and a newb when it comes to MooTools.

David

BTW, navigation using scrolling is nice
Look at http://filthyrichclients.org/ .

Its all good. Nice site by the way.

I typically use Left rather than margin-left as well…for some reason in the example I saw when I was dabbling in Moo they used margin-left.

Thanks for the advice.

David

P.S. Olivier, send me an email if you have any interest in writing something on MooTools…

Thank you for this article,
Pedja

It is written using Scriptaculous, but it should be easy to convert to MooTools.

David

Anyway, thanks a lot for the codes, I’m both an Ajax newbie and Mootools newbie, and your snippet helped me a lot.

I made some changes:
function MoveLeft(){
var current_slide = parseInt($(’current_slide’).value) - 1;
var left = parseInt($(’BigBox’).getStyle(’marginLeft’))+parseInt($(’ScrollBox’).getStyle(’width’));

if(current_slide parseInt($(’num_slides’).value)){
current_slide = 1;
left = 0;
}
Move(current_slide, left);
}

function Move(current_slide, left){
var bigBox = $(’BigBox’);
new Fx.Style(bigBox, ‘marginLeft’, {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
}).start(left);
$(’current_slide’).value = current_slide;
}
I assign fixed width to ScrollBox div, and use it instead.
Also, with my code, when you go to the end of the slides, clicking next and you will go back to the beginning (vice versa: at the beginning, you can click previous to go to the end).
I needed to create 2 hidden input fields to store current_slide, and num_slides btw. num_slides is the total number of slides, which is calculated by php/asp.

function MoveRight(){
var current_slide = parseInt($(’current_slide’).value) + 1;
var left = parseInt($(’BigBox’).getStyle(’marginLeft’))-parseInt($(’ScrollBox’).getStyle(’width’));

if(current_slide > parseInt($(’num_slides’).value)){
current_slide = 1;
left = 0;
}
Move(current_slide, left);
}

However your code will be great for those who want to stick with mootools.

Thanks!
David