thanks!

smoothscrooling

high

window.addEvent('domready',function()
{new SmoothScroll({ duration:700 });
});

top
 
 
 
 
 
 
 
 
 
TEST

 
 
suite
 
 
 
 
 
 
 
encore
 
 
 
 

 
 
 
hophop
 
 
 
 
 
 
Aller au début

thanks!

thanx.

its as bare as it can be

hope this helps

#vertical-parent-container {
height:120px;
overflow:hidden;
}

#horizontal-parent-container {
height:120px;
width:560px;
overflow:hidden;
}
these are the parent containers… but for aesthetics i added a border and here we go
#vertical-parent-container-line {
border:1px solid #333333;
}

#horizontal-parent-container-line {
border:1px solid #333333;
}

the reason i need a another div was because padding/margin is an issue when you scroll one element to another element… it literally goes to that elements regardless of any padding in the parent container… for design/aesthetics i knew i needed a seperate div for the border…

on the the horizontal example it is a little bit more complicated in that you need an extra div to force the divs to lay in a horizontal direction.

#horizontal-frame {
width:2240px;
}

yeah just reverse-engineer it, im sure that after 3 attempts you’ll get lot closer to that you actually need… i was gonna do a real real bare bone example but it would just be too dry…

@jorge luis:

the auto-center is also there for aesthetics, nothing to do with the mootools script othen than being called into action… here’s a demo were i commented out the autocenter call…

http://gurroladesign.com/x8/mootools_scrollbox_demo_2.html

yeah go ahead and delete the auto-center script and the call, it has nothing to do with it… if you want post a link of what your trying to do, and ill troubleshoot it

You say quite strongly: ” … that parent container must have a fixed height and width and here’s the key, “overflow:hidden”… now all other child containers will be inside this container, and these child container must also be the same height as the parent container.”

But I note in your last example that the parent container does not set “overflow:hidden”. To confuse matters even more, your containers differ in size. Yet your example works. Mine only partially works because there are a lot of issues with the divs stacking on top of each other. I wish I knew the answer.

Clearly the javascript file called “center.js” or “auto-center.js” plays a role in the success of this, but I can’t figure out what it is. I’m fairly sure that this secondary script is implicated in the vertical placement of my scroller, but nothing is mentioned here about it. Ideally I’d like to eliminate that added script altogether. Been there, tried that, and I know that it has to stay.

http://www.gurroladesign.com/x8/mootools_scrollbox_demo.html

attention: not using the fx.smoothcroll rather just the fx.smooth class… download the latest copies of core and more… feel free to rip up my demo… the scope is a tricky issue, so keep your eyes open

but here’s another demo using the same technique
http://www.gurroladesign.com/adv07/