Geek Answers Handbook

Webpage hosting

Is there a way to simulate my own transition and the functionality of "sliding whole pages", as you see on the iPhone, but inside a web browser?

I want one HTML page to move, and the new HTML page will take its place after clicking the button.

The button cannot be permanent. So if you had a persistent title with buttons that contained content inside the box, that would be wrong. I need to shift the whole web page.

Will the slides made in HTML5 be what I need? Thank you in advance for your help!

Editing: I also thought about the possibility of creating two full-sized DIVs side by side with one hidden from the overflow: hidden page, and then using CSS transitions to click the button, and then move one DIV from the screen and the other, but I don’t know how to do it.

Another really tricky point is that my DIV containers must be dynamic and 100% width and height. I can not use fixed sizes.

EDIT:

Using the scrollTo and localscroll functions developed by Ariel Flesler I was able to fill 99% of what I'm looking for. However, at the very end of development, I ended up in a huge road block. Here is an image that I hope will help explain what I'm trying to do:

alt text

My problem is that the main content area is a fixed position with auto-overflow-y so that I can hold the scroll bar for the DIV between the header and footer. But the problem is that when I start the sliding animation of my DIV by clicking on my button, the fixed content area does not move, but only the header and footer are moved. If I change the location of the main content area to “relative,” everything moves as I want, but I lose the scroll positioning.

If someone can understand this, I will be very grateful to you!

(I would post a link to what I have, but I can’t. This is a confidential work for the company)

Thanks in advance!

EDIT I am working on a review of all this information. I will answer in a couple of days. Thank you all for your contribution!

+7
html css slide
source share
10 answers

I am currently developing what may be useful to you. It uses the ones you examined side by side, but I found difficulties using 100% width due to problems with scrollbars and differences in browsers. I overcame 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 source code as possible, checking the source, and if you need me to tell you something, just let me know.

http://madesignuk.com/uploader/

PS I'm not 100% sure of the rules for posting links on my personal site, so if this is a problem for moderators, let me know.

PPS The site is under construction, so please try not to scoff at me: p

+6
source share

This can be done by placing the elements next to each other inside the container with overflow:hidden and simply moving the internal elements.

Here is the proof of concept. It does not handle resizing a page after loading it, but at least it shows the principle. I put three slides in a container, but the code is dynamic so that you can place any amount 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 gets up again, so you can try it here: jsfiddle.net/9VttC

+3
source share

Have you watched LocalScroll ? This will make all hash links scrollable within the container you specify. However, you will need to set the width of the slides, since you have to swim them.

+1
source share

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

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

The second line consists of jQuery, but just remember the principle: apply the new scrollTop value to your main div state.

+1
source share

Try the jQuery Cycle plugin.

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

They provided many code examples and tutorials, so it’s easy for you to build it your own way.

0
source share

If I understand correctly, the scrollTo method works, but only if you change the position: fixed to position: relative, which means that the scroll bar extends beyond the scrollable div?

Wouldn't it be easier to place a div wrapper 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 its overflow: scrolling and using the scrollTo function inside it?

0
source share

The Google Chrome team has done 20 things that I learned about browsers and the Internet that have this effect.

0
source share

As a theoretical example, but I would create static HTML pages and use jQuery to load content from them (to ensure compatibility). The main problem is scrolling.

I use jQuery to calculate the width of the browser, set the width of <body> , and then set overflow: hidden . Then simply create an absolutely positioned content area and immediately copy both of them.

I will post the code later, but this is where I will start (I, being a pathetically incompetent JS script).

0
source share

You can use something like a Coda Slider , and the content of the slide is a whole page.

-one
source share

jQuery pageSlide is another alternative.

-one
source share

More articles:


All Articles