Vertical Slide/Scroll Between Pages

[Lovelybones]

Hey Guys,

I'm looking at creating a vertical sliding version of this website -

http://www.carrotcreative.com/

I've looked at other sliders and do what I want them to do using div IDs, but all the pages need to be on the same page by the looks of it.


So what what needs to be done? Is it as simple as changing the JS file that website uses and switch it to vertical or does someone have a link where it shows how to go from to start from the beginning?

Thanks in advance!

Max

 

[vicvirk]

They are using jQuery tools to do all their scrolling.

They have a lot of documentation on how to use their library to acheive the effects you are looking for.

http://www.jquery.com

Basically, what carrot creative has done is created ALL of their content on a single page and used the css overflow:hidden attribute to hide the scroll bars. When a user clicks on one of the links, the scroll bars (they are still there, but just hidden) move to bring the selected content into the center of the screen.

So if you have a containter that is 500 pixels wide (make sure to set the css attribute of overflow to hidden) and 4 div tags within that containter that are 500 pixels wide each, only the first one will be visible. When a user clicks on a link the scroll bar is moved to the appropriate position, hiding the content that was just there. Here's a good link on how to position scroll bars:

http://www.daniweb.com/forums/thread61409.html

 

[Lovelybones]

Thank you so much for such a detailed explanation. Really appreciate it!