Question

I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation.
I have the basic logic for it but then came about this

problem:

When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of about.html.

  <a href="about.html" target="content">About</a> 
  <iframe id="content" name="content" align="top" src="index.html" 
      frameborder="0" width="100%" height="1200px" scrolling="no">
  </iframe>

this is just the most basic logic, but I need help on how do I achieve the refreshing part/

and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages

Answer 1

You can use the following to change the src attribute of the iFrame:

$("#content").attr('src', 'http://mysite.com/newpage.html');

Oops, looks like I misread the question.

If you want to slide it down, you can bind an event handler to the load event (jQuery doc) to do something when the frame loads.

$("#content").hide();

$("#loadLink").click(function() {
    $("#content").hide();
    $("#content").attr('src', 'http://mysite.com/newpage.html');
});

$("#content").load(function() {
    $(this).slideDown();
});

In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.

Demo

Edit: still misread it!

To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.

In the load event of the iframe save the page that it’s currently showing.

localStorage['lastPage'] = "about.html"

and then load it back using localStorage['lastPage'] on page load.

Updated demo showing both sliding and keeping the page after refresh.