Jquery flash of unstyled content (IE and Chrome)

Question

Possible Duplicate:
Cross-browser window resize event - JavaScript / jQuery
Jquery flash of unstyled content (IE only)

I have a div (#container) where on a click event I swap out an image and replace it with a YouTube video:

$("#feature_content").click(function(){
                var iframe = "<iframe />";

                var url = "http://www.youtube.com/embedlink";

                 $(iframe, {
                    name: 'videoframe',
                    id: 'videoframe',
                    src: url,
                    width: '600',
                    height: '335',
                    frameborder: 0,
                    allowfullscreen: true
                }).appendTo(this);

                $(this).find('img').fadeOut(function() { $(this).remove();});

    });

However, I am getting a flash of unstyled content (the iframe) BELOW the div before the video starts playing.

This is happening in IE and Chrome, but not Firefox

Thought about placing the iframe under the image and removing the img on iframe load? — Boldewyn, Nov 23 '11 at 15:20

score 2 · Accepted Answer · answered Nov 23 '11 at 15:21

Guessing somewhat, as we don't have a demonstration of the bad behaviour, but I think your problem is that the image is still taking up the space that's supposed to be occupied by the iframe.

You should use CSS position: absolute attributes to ensure that they both have the same relative position within the parent div.

Jquery flash of unstyled content (IE and Chrome)

1 Answers1