I am trying to implement jquery tabs and load the iframe in it.
so I came up with following code. That code will append the the iframe to the panel and resize the iframe. There are a few problems here.
First, when the page is loaded the content does not get loaded until I click on the tab. Once It clicked and loaded if I need to come back it does not reload it show previous result.
I need the tab act like a ajax tabs
The other issue is the iframe does not re-size properly
$('#tabs').tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "There was an error loading this content. "); } }, select: function(event, ui) { var pnl = $(ui.panel); var url = pnl.attr('title'); // get url to load from title attr //if ((url) && (pnl.find('iframe').length == 0)) { $('<iframe />') .attr({ frameborder: '0', scrolling: 'no', src: url, width: '100%', height: '100%' }) .appendTo(pnl) .load(function() { // IFRAME resize code var iframe = $(this); // iframe element var win = this.contentWindow; // child window var element = $(win.document); // element to size to; .document may return 0 depending on sizing of document, may have to use another element $(win.document).ready(function() { iframe.height(element.height()); // resize iframe }); }); // } return true; } });