Sliding An Entire Web Page

November 30, 2023 Post a Comment

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

Solution 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

Solution 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 HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Page Slide</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scripttype="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><styletype="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.Contenta { font-size: 30px; }

</style></head><body><divclass="Header">
  absolutely positioned header
</div><divclass="SlideContainer"><divclass="Slides"><divclass="Slide"><divclass="Content"><h1>Slide 1</h1><ahref="#"class="Left">&laquo;</a></div></div><divclass="Slide"><divclass="Content"><h1>Slide 2</h1><ahref="#"class="Left">&laquo;</a><ahref="#"class="Right">&raquo;</a></div></div><divclass="Slide"><divclass="Content"><h1>Slide 3</h1><ahref="#"class="Right">&raquo;</a></div></div></div></div><divclass="Footer">
  absolutely positioned footer
</div></body></html>

Edit

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

Solution 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.

Solution 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.

Solution 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.

Html5 Tech