I'm making a simple web app, and I want to have navigation links that, instead of using an <a> tag, change the SRC of an iframe. When this happens, is there a way to make the old page "slide up" and out of the iframe quickly, then let the new page load? If possible, I'd like to use only HTML, Javascript, and CSS.

I'm making a simple web app, and I want to have navigation links that, instead of using an <a> tag, change the SRC of an iframe. When this happens, is there a way to make the old page "slide up" and out of the iframe quickly, then let the new page load? If possible, I'd like to use only HTML, Javascript, and CSS.

• javascript
• html
• css

Share Improve this question Follow asked Apr 5, 2012 at 17:54 tkbxtkbx 16.3k3434 gold badges9191 silver badges123123 bronze badges 1

• There is a similar question (fading in andout): stackoverflow./questions/867272 – nalply Commented Apr 5, 2012 at 18:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Before you continue reading let me ask you: do you really need an iframe? Loading a website in a website is something you should avoid unless there is literally no alternative. It's slow and typically causes problems across browsers a lot.

If you are using this for a navigation, surely it would be possible to instead use AJAX to load the new content? Or you could load all possible contents initially and hide all of them but one.

By the way, in case you do not have much experience yet (I apologise if I am under a false impression): Don't be afraid by the term AJAX. It's simply a Javascript function which allows sending data to the server and then handling whatever it returns, after loading a page. It's also known as XML HTTP request.

In any case a Javascript framework such as jQuery (http://jquery.) or prototype (http://prototypejs/) should make your job a lot easier.

If you see no alternative:

1) Link that executes JS is easy: <a href="#" onclick="return own_javascript_function();"> or <a href="javascript:my_function()"> for example.

2) Let your function create a new iframe with the new content (var newframe = new HTMLIFrameElement() then set src etc.) and insert it below the previous iframe. Give it a lower z-index to hide it below the other one.

3) Slide iframe out: Use a container div with position:relative in which you place the iframe with position:absolute. Let javascript_function() use a timer to change the iframe's css-property top from 0 to -500 (or whatever height your iframe has). This is particularly easy to acplish with jQuery. Once that's finished, remove the old iframe and set the new iframe's z-index to something like 1 (to avoid needing lower and lower z-indices).

Bear in mind you could do exactly the same with a <div> instead into which you load the new content using ajax; as long as you're not loading from external domains.

Two options e to mind.

If you're not using jQuery I suggest you look into it.

1) Use a mask. When a user clicks the link, the mask will fade-in over the page content (position: absolute; top: 0; left: 0; width: 100%; height: $windowHeight; color: #{mask-color}). After the fade-in is done, reload the iframe with your new content. Then, fade the mask out.

NOTE: (replace fadeIn/fadeOut with slideUp/slideDown for slide effect, see jquery effects: http://api.jquery./category/effects/ )

fadeout:

$('#elemendId').fadeOut();

fadein:

$('#elemendId').fadeOut();

Default fade time is 500 i think, so you would need to set a timeout for the code that loads the page

setTimeout(function() { ... load new iframe ... }, 500)

2) Ditch the iFrame and do an AJAX request for the content. something like

$.post('path/to/file.html', function(data) {
 $('#destination-div').html(data)
});

Way easier and you probably won't run into as many issues.

EDIT: I'm actually not sure if method #1 will work... i forget if you can put a mask over an iframe