jQuery CSS Height of twitter box on page load

Question

I am aware of how stupid this sounds...

I'm trying to re-size an iframe. Here's what I have:

function doTwitterHeight(screenwidth)
{
    if(!screenwidth){
        var screenwidth = window.innerWidth;
        console.log('screenwidth is now defined as: ' + screenwidth);
    }
    if(screenwidth >= 981){
        $('#twitter-widget-0').css('height',466);
    }
    else if(screenwidth <= 980 && screenwidth >= 952){
        $('#twitter-widget-0').css('height',614);
    }
    else if(screenwidth <= 951 && screenwidth >= 877){
        $('#twitter-widget-0').css('height',632);
    }
    //etc.
    else{
        $('#twitter-widget-0').css('height',468);
    }
}

The function works when called with resize, like so:

$(window).on('resize', function(){
    doTwitterHeight();
});

But I also need the function to be called and re-size the height of that div when the page is first loaded. I've tried:

 $(window).on('load', function() {      
    doTwitterHeight();
 });

And:

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

And:

$(doTwitterHeight());

And I've had no luck with any of them.

Thanks in advance :)

You could use `$(window).on('load resize', doTwitterHeight);` If it doesn't work, i don't know what's going wrong — A. Wolff, May 05 '14 at 12:57
Thanks for your help, however this still only makes it work on resize. A very neat way of writing it though, so that's what I've adjusted my code to for now. — H2ONOCK, May 05 '14 at 13:00
I guess window onload event is fired before all the content of iframe is fully loaded, for some reason. Any online link we can check it? — A. Wolff, May 05 '14 at 13:05
Are you sure? Make the chrome window smaller and then refresh the page? The bottom of the twitter feed should line up with the testimonials, but it doesn't. — H2ONOCK, May 05 '14 at 13:22
You are correct, i see your issue now. Looks like you should use the twitter iframe onload event instead of window onload event but i don't know at all twitter API — A. Wolff, May 05 '14 at 13:28
Great tip, I've now fixed it using advice from here: http://stackoverflow.com/questions/17798707/twitter-embedded-timeline-callback — H2ONOCK, May 05 '14 at 13:39

score 3 · Accepted Answer · edited May 23 '17 at 12:23

So the resolution was to modify the code that twitter provide for the iframe embed. By using the advice found at: Twitter Embedded Timeline Callback

I've now fixed the problem by replacing:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

with:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

i.e. by adding:

js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");

Oh ya, i forgot about that. FYI, you could use `twttr.events.bind('rendered',doTwitterHeight);` — A. Wolff, May 05 '14 at 14:06

score 0 · Answer 2 · answered May 05 '14 at 13:02

0

You can try this:

$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load

or as per your code piece:

$(window).on('resize', function(){
    doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.

answered May 05 '14 at 13:02

Jai

74,255
12
74
103

jQuery CSS Height of twitter box on page load

2 Answers2