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!

Blend

Could you add the rule overflow-y:scroll to the main content area to keep the scroll bar there permanently? – Proudfoot

Nah, sorry, I don't want that. It needs to be more dynamic. Scrollbars when you need them and no scrollbars when you don't need them. – Blend

I think you are expecting a ready made iPhonish plugin or something, I'm sure that if you stop and think for a minute you can work it out, you've been giving alot of good tools to work with. – Hexastyle

Don't punish yourself, try Silverlight – Schema

Can't use any 3rd party plug-ins. Flash and Silverlight are not options. The user should be able to use this site with nothing more than a web browser and javascript turned on – Blend

Answer 1

I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).

Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.

http://madesignuk.com/uploader/

PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.

PPS The site is in development so please try not to mock me :p

Proudfoot

Thanks for the help but this isn't quite what I need. I have two monitors and I am able to stretch this website pretty far. And if I drag the browser window out, I can see all of your DIV's lined up in a row across the screen. I need each "slide" to fill the screen at 100% width and I don't want to see anything else until you hit the next button. I am guessing that your code is finding my browser width onLoad but it's not dynamically updating when you resize the browser. – Blend

All you have to do is ask :) Check again. I have amended the code so that when the browser is resized, the slider resizes with it. This created an issue with the position of the elements within the slider so I have had it reset to the starting position for now. If anyone can think of a way to retain the current position then please feel free to submit the solution here. I have a feeling I could come up with a math based solution given the time. – Proudfoot

I like the edits you made to this page. It's much closer to what I am looking for. However, do you think you could edit this page so that the scrollbar on the right appears inbetween the header and footer (also put a static footer on the bottom). And lastly, as a test, make the main content area full of lots of data so that it scrolls vertically in the content area (but doesn't scroll the page). If your method can do that, you get the 50 rep points. I would do this myself but I just don't have time to test another method. – Blend

How about now? Slight issue in IE7 which I am trying to resolve. – Proudfoot

Nice man! This is just what I needed! Unfortunately, I didn't get back to this site in time to give you the bounty (I didn't realize that I only had a certain amount of time to award it) but is the best solution and I am giving you the green check anyway :) – Blend

Answer 2

You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.

Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });

  var pos = 0;

  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });

});

</script>

<style type="text/css">

body { margin: 0; padding: 0; }

.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }

.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }

.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }

</style>

</head>
<body>

<div class="Header">
  absolutely positioned header
</div>

<div class="SlideContainer">
  <div class="Slides">

    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

  </div>
</div>

<div class="Footer">
  absolutely positioned footer
</div>

</body>
</html>

Edit

Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC

Nympho

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.

Sustenance

I just looked at this, but I don't see how this will help if I want the width of my container to be dynamic and 100% width and height.... – Blend

I retract what I said. This has been the best suggestion so far. But the overall problem has yet to be solved, any ideas?? – Blend

Answer 4

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.

Shewmaker

How is scrolltop going to help me animate horizontally sliding DIV's? – Blend

You want to slide from right to left ? I understood you wanted it to slide from top to bottom. – Shewmaker

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.

Acidforming

I took a look at this tool and its not going to work either. Once the content is loaded into the animation area it's a static size. If you resize the window, it dos not resize the content until you refresh the browser. Thanks, but I don't think this is going to help me. – Blend

Answer 6

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?

Kerch

Answer 7

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

Highland

Answer 8

Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.

I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.

I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).

Sexuality

Answer 9

You could use something like Coda Slider, and have the content of the slide be the whole page.

Alpaca

I am familiar with this tool and I was looking at it, but this uses constant buttons that exist outside the content area. It needs to be just like on an iPhone where the navigation is dynamic and changes based on what page you are on. For instance, I don't want a home button to appear until you navigated to the next page. Then on the next page you have a Home button and a "Next" button. – Blend