CODEWITHSUNDEEP
jqueryiframetabsheight
PHP User
PHP User

Reputation: 2422

getting iframe height inside jQuery tabs returns 0

I'm having multiple iframes inside jQuery tabs and they are not in the active tab. Each tab contains an iframe. I'm trying to get the height of the iframe contents to expand the iframe height. The problem is the function alerts 0 if the iframe is inside a tab but works fine if the iframe is in the page body directly. Here's the iframe code

<div id="discussion">
    <iframe src="page path here" id="myFrame" style="width: 90%; 
     float: right;border: 0;" onload="calcHeight()"></iframe>
</div>

and the function

function calcHeight(){
    var the_height=document.getElementById('myFrame')
        .contentWindow.document.body.scrollHeight;
    document.getElementById('myFrame').height=the_height;
    $("#myFrame").css("height",the_height);
    alert(the_height);
}

Upvotes: 1

Views: 752

Answers (1)

isherwood
isherwood

Reputation: 61114

You can use jQueryUI's callback to get the iframe height once the tab is loaded:

$( ".selector" ).tabs({
    activate: function( event, ui ) {
        calcHeight();
    }
});

http://api.jqueryui.com/tabs/#event-activate

Upvotes: 1

Related Questions