Sliding An Entire Web Page

Question

Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?

I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.

The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.

Would slides made in HTML5 be what I need? Thank you in advance for any help!

Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.

The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.

EDIT:

Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:

My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.

If someone could figure this out I will be greatly indebted to you!

(I would post a link to what I have, but I can't. It's confidential work for a company)

Thank you in advance!!

EDIT I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!

Answer 1

If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?

Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?

Answer 2

The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.

Answer 3

Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.

Answer 4

jQuery pageSlide is an other alternative.

Answer 5

Try JQuery Cycle plugin.

http://jquery.malsup.com/cycle/

They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.

Answer 6

Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ? Just do that :

var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.