CODEWITHSUNDEEP
javascriptjqueryhtml
Jimbo Mombasa
Jimbo Mombasa

Reputation: 528

Making iframe fadein

I would like to make my iframe fadein as soon as the visitor has loaded the website:

I have tried :

<script type="text/javascript">
    $(document).ready(function () {
        $('#doneimg').fadeIn("normal");
    });
</script>

        <span style="display: none;" id="doneimg">
            <iframe src="http://om-p.com" width="90%" height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>
        </span>

but it does not work!

thanks for you help

here is an example: http://jsfiddle.net/zfFXr/

I have acces to the page which I am fading in!

Upvotes: 4

Views: 4472

Answers (4)

wpgbrown
wpgbrown

Reputation: 40

You can use JQuery's .on() function to detect when the iframe has finished loading. See here: https://stackoverflow.com/a/30012/5287820

Upvotes: 0

nobody
nobody

Reputation: 269

It is fading in. If you set it to fadeIn("slow") then you will see that the iframe itself is fading in slowly (ie the borders of it) but that does not affect the loading of the page within the iframe. The code for that page fading in would have to be on that page I think.

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Below seems to be working for me, jsFiddle here

$(document).ready(function () {
  $('#doneimg').fadeIn(3000);
});

But please note that this just fadeIn in 3 secs, doesn't wait till iframe is loaded or not.

Upvotes: 4

petermolnar
petermolnar

Reputation: 1626

Make an overlay layer with absolute positioning over the iframe by cloning the position and adding a larger z-index, fade it out and delete it.

Upvotes: 0

Related Questions