Say I have the pages:

test1.html test2.html test3.html

And I want to link test1.html to test2.html and test1.html to test3.html

Using page anchors and iframes, I had the issue that when going from test1 to test3, it scrolled through test2 also.

I found something cool called jquery mobile page transitions (.0/docs/pages/page-transitions.html) but everytime it would tell me could not load page. This is however exactly what i want. Different page transitions (i can choose between sliding top, left, down, etc.) for each button/link i want to create.

If there's a way to do this in CSS that would be awesome!

Say I have the pages:

test1.html test2.html test3.html

And I want to link test1.html to test2.html and test1.html to test3.html

Using page anchors and iframes, I had the issue that when going from test1 to test3, it scrolled through test2 also.

I found something cool called jquery mobile page transitions (http://jquerymobile./demos/1.0/docs/pages/page-transitions.html) but everytime it would tell me could not load page. This is however exactly what i want. Different page transitions (i can choose between sliding top, left, down, etc.) for each button/link i want to create.

If there's a way to do this in CSS that would be awesome!

• javascript
• jquery
• html
• css
• animation

• 'going from test1 to test3, it scrolled through test2 also.' What wizardry is this? – dezman Commented Jun 11, 2013 at 21:12
• 1 Be aware that jquery mobile works by loading the page content of the next page using ajax calls. This may or may not be desirable. – nullability Commented Jun 11, 2013 at 21:12
• 1 If you want to use the jQuery mobile transitions, why not just use them? – Brad Commented Jun 11, 2013 at 21:12
• @Brad it kept giving me "could not load page" or something along those lines. couldn't figure out what was wrong :/ – user2457563 Commented Jun 11, 2013 at 21:15
• show us what you got working then, some code at least. And a real error message would be useful, not an 'or something'. (and iframes, really?) – Pevara Commented Jun 11, 2013 at 21:23

2 Answers 2

http://net.tutsplus./tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ Take a look here loading with ajax with Slide Down You can work a little bit this Tutorial to load the whole Page as drop down or fadeIn. Only with CSS I think it is not possible.

Not exact code, but should get you started.

$(document).ready(function(){
  $('body').fadeIn();

  $('a').click(function(e){
    window.goto=$(this).attr("href");
    $('body').fadeOut('fast',function(){
      document.location.href=window.goto;
    });

    e.preventDefault();
  });
});

CSS:

body{display:none;}

Just be aware that if you are using other jQuery plug-ins that need to know an element's height that they will likely break because the element won't have a height until the fadeIn is plete. You might be able to get around this by using visible:hidden instead of display:none to do the initial hiding.