Skip to main content

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!


Comments

  1. 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.

    ReplyDelete
  2. 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.

    ReplyDelete
  3. 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.

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?