Style the iframe and then make it visible

Question

I am using a Twitter widget in my site which is in an iframe. I am styling this iframe without any problem. The problem I have is that I first see the old let's say iframe and then I can see the changes to the styled one. Is there a way to have the iframe hidden while all the css/style changes are happening on the background and then make it visible?

I using this jquery:

 $(document).ready(function(){
    hideTwitterBoxElements();
 });

 var hideTwitterAttempts = 0;

 function hideTwitterBoxElements() {
   setTimeout( function() {

    if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            var ibody = $(this).contents().find( 'body' );

            ibody.find(".timeline .stream").css("padding-top", "10px")

            if ( ibody.find(".timeline .stream .h-feed li.tweet").length ) 

                ibody.find(".timeline").css("background-color","transparent");  
                ibody.find(".customisable-border").css("border","none");    
                ibody.find(".timeline .stream").css("overflow","hidden");   

            }
        });
    }
    hideTwitterAttempts++;
    if ( hideTwitterAttempts < 3 ) {
        hideTwitterBoxElements();
        $("#twitter").show();
    }
}, 1500);

}

And what happens is that when I load the page, the iframe comes after a while (which I also could like to reduce the time if possible) and then I can see for example the overflow changing to hidden.

Thanks in advance.

Can you reproduce your issue on http://jsbin.com ? – Andrey Mikhaylov - lolmaus May 27 '14 at 10:22 — Andrey Mikhaylov - lolmaus, May 27 '14 at 10:22

score 0 · Answer 1 · edited May 23 '17 at 10:32

edited:

Mashing up your code with this one and we've got a pretty good result.

JSFiddle

function hideTwitterBoxElements() {

    var hideTwitterAttempts = 0;

    if ($('.twitter-timeline').length) {
        //Timeline exists is it rendered ?
        interval_timeline = false;
        interval_timeline = setInterval(function(){
            //console.log($('.twitter-timeline').width());
            if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) {
                if ($('.twitter-timeline').width() > 10) {
                    //Callback
                    clearInterval(interval_timeline);
                    setTimeout( function() {
                        if ( $('[id*=twitter]').length ) {
                            $('[id*=twitter]').each( function(){
                                var ibody = $(this).contents().find( 'body' );
                                ibody.find(".timeline .stream").css("padding-top", "10px");
                                if ( ibody.find(".timeline .stream .h-feed li.tweet").length ); 
                                ibody.find(".timeline").css("background-color","transparent");  
                                ibody.find(".customisable-border").css("border","none");    
                                ibody.find(".timeline .stream").css("overflow","hidden");
                            });
                        }
                        hideTwitterAttempts++;
                        if ( hideTwitterAttempts < 40 ) {
                            hideTwitterBoxElements();
                            $("#twitter").show();
                        }
                    }, 100);
                }     
            }
        },200);
    }
}

$(document).ready(function(){
    hideTwitterBoxElements();
});

I do that already. You can see in my code that I have $("#twitter").show(); This does exactly what you said. But still is not working the way I wanted. — novellino, May 27 '14 at 15:06

Style the iframe and then make it visible

1 Answers1