I want to get the height of the currently selected tab and pass the value with postMessage() to it's parent iframe:
// ...
jQuery("#my-tabs").tabs({
selected: ran,
show: function( event, ui ) {
try
{
console.log(ui.panel);
var height = ui.panel.height();
if (window.postMessage && parentUrl != undefined)
parent.postMessage("height:" + height, parentUrl);
}
catch (c)
{
console.log(c.message);
}
}
});
works fine when the page is loaded and the randomly selected tab is shown.
But when selecting another tab, ui.panel isn't a jQuery object anymore, so accessing height() crashes: Object #<HTMLDivElement> has no method 'height'
I'am using jQuery 1.4.3 with UI 1.8.6 - but can't find anything about this strange behavior. (Tried also jQuery('#example').bind('tabsshow' ... same thing)
I have fixed it with checking for the height() method and otherwise parse the ui.panel to a jQuery object:
if (typeof(ui.panel.height) == "function") {
var height = ui.panel.height();
}
else {
var panel = jQuery(ui.panel);
var height = panel.height();
}