CODEWITHSUNDEEP
javascriptjqueryiframe
H2ONOCK
H2ONOCK

Reputation: 981

jQuery CSS Height of twitter box on page load

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 :)

Upvotes: 2

Views: 352

Answers (2)

H2ONOCK
H2ONOCK

Reputation: 981

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()});");

Upvotes: 3

Jai
Jai

Reputation: 74738

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.

Upvotes: 0

Related Questions