Geek Answers Handbook

Moving JS or Css slides between two full pages

I have two html pages: Page1.html, Page2.html. I would like to slide between two pages. I found many plugins and solutions for sliding between two divs or a slide inside the container, but I need a full page change.

I found something , but the problem is that the jquery code on page2 doesn't work when the page loads. I could use jQuery mobile, but my project uses jQuery ui, and this gives me some conflicts ... so I need something else.

It is assumed that the project will be launched on the iPad, so it would be great to have sliding pages that you can drag and drop. But I would be happy to just find a plugin for the slide.

Thanks.

+8
javascript jquery css3 transitions
source share
2 answers

You have few solutions, for example, using Ajax to add content to "new pages" and add some gliding effect using jQuery. The Stack Overflow section has several topics:

slide between pages using jQuery

Tips for moving between page effects

Or just add some effect to the page, ready as in this example:

<html> <head> <script src="js/jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ $('body div').slideDown(); }); </script> </head> <body> <div style="width: 400px; height: 400px; background-color: blue; display: none;"> <a href="page2.htm" style="color: white;">PAGE 2>></a> </div> </body> 

 <html> <head> <script src="js/jquery-1.7.2.min.js"></script> <script> $(document).ready(function(){ $('body div').slideDown(); }); </script> </head> <body> <div style="width: 400px; height: 400px; background-color: red; display: none;"> <a href="page1.htm" style="color: white;">PAGE 1>></a> </div> </body>

Good luck

+1
source share

I was looking for a full page transition and many examples showing a single page with multiple DIVs. I found that Animate.css does the trick very well.

Demo on this link.

enter image description here

0
source share

More articles:


All Articles