erikTsomik
asked on
Jquery tabs
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
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
<div id="tabs">
<ul style="padding: 0; margin: 0;">
<li><a href="##tab-1">test1</a></li>
<li><a href="##tab-2">test2</a></li>
<li><a href="##tab-3">test3</a></li>
</ul>
<div id="tab-1" title="index1.cfm"></div>
<div id="tab-2" title="index2.cfm"></div>
<div id="tab-3" title="index3.cfm"></div>
<cfoutput query="rc.getMenuTab" >
<div id="tab-#rc.getMenuTab.currentrow#" title="index.cfm?event=#rc.getMenuTab.link#"></div>
</cfoutput>
</div>
$('#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;
}
});
Why use an iFrame at all?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.