hidden tabs and fnResizeButtons

ejh

I am using a Easy Tabs for my menu.
http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange/

Here is my code for the menu:

[code]
tablink1
tablink2
tablink3
tablink4
[/code]

On tablink1 and tablink2 I have different tables. Here is the initialization:

[code] /**Begin Initialisation oTable***************************************************************/
var oTable = {};
$(document).ready( function () {
oTable = $('#claims').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}, //end oLanguage
"sPaginationType": "full_numbers",

// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
// setting SWF path
"sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
// buttons
"aButtons": [
{ "sExtends": "copy",
"bFooter": false
}, // end sExtends
{ "sExtends": "print",
"bFooter": false
}, // end sExtends
{ "sExtends": "csv",
"bFooter": false
}, // end sExtends
{ "sExtends": "xls",
"bFooter": false
}, // end sExtends
{ "sExtends": "pdf",
"bFooter": false,
"sPdfOrientation": "landscape"
} // end sExtends
] //end aButtons
} //end oTableTools
} ); //end #example .dataTable
} ); //end $(document).ready(function()


/**Begin Initialisation froi table***************************************************************/
var froiTable = {};
$(document).ready( function () {
froiTable = $('#froi').dataTable( {
"bPaginate": false,
"bFilter": false,
"bSort": false,

// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
// setting SWF path
"sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
// buttons
"aButtons": [
"print",
"pdf"
] //end aButtons
} //end oTableTools
} ); //end #froi .dataTable
} ); //end $(document).ready(function()
[/code]

Here is my code placed before my initialization code:

[code] $(document).ready(function() {
$("#tabcontent1, #tabcontent2").tabs( {
"show": function(event, ui) {
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() )
{
/* A resize of TableTools' buttons and DataTables' columns is only required on the
* first visible draw of the table
*/
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
} ); [/code]

It does not allow DataTables to even initialize.

What am I missing?

Thank you in advance.

ejh

Update:
I tried:

[code] $(document).ready(function() {

$("#tabcontent2").on('shown', function (e) {
var TableTools1 = TableTools.fnGetInstance( 'froi' );
if ( TableTools1 != null && TableTools1.fnResizeRequired() )
{
TableTools1.fnResizeButtons();
}
});
}); [/code]

I found that this is for Bootstrap though.

ejh

SOLVED!!!!!

Thanks to severin:

[quote] i think i got to the root of this problem. it's in getDOMObjectPosition of the ZeroClipoard.js. This function tries to determine position and dimension of the element, the Flash-Movie is attached to. The problem is the used .width and .offsetWidth do not work on invisible Elements. i altered the function to check for visibility, and in case of non-visibility clone the element into a temporary div 200px outside of the window where it is visible, then do the dimension-retrieval on the clone and afterwards destroy both the temporary div and the cloned element. here's my new code for getDOMObjectPosition: [/quote]

[code] getDOMObjectPosition: function(obj) {

var info = Object();

// get absolute coordinates for dom element
if ($(obj).is(":visible")){ //obj.widht and obj.offsetWidth only work on visible elements
info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
} else {
//clone the object into a div outside of the window
var tempDiv = $('');
var objClone = $(obj).clone();
objClone.appendTo(tempDiv).appendTo($('body'));
//get the info needed
info = {
left: 0,
top: 0,
width: objClone.width ? objClone.width : objClone.offsetWidth,
height: objClone.height ? objClone.height : objClone.offsetHeight
};
//destroy the temporary objects
objClone.remove();
tempDiv.remove();

}

if ( obj.style.width != "" )
info.width = obj.style.width.replace("px","");

if ( obj.style.height != "" )
info.height = obj.style.height.replace("px","");

while (obj) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj = obj.offsetParent;
}

return info;
}; [/code]