Link to home
Start Free TrialLog in
Avatar of erikTsomik
erikTsomikFlag for United States of America

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

<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>

<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?"></div>

Open in new window

            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 />')
                            frameborder: '0',
                            scrolling: 'no',
                            src: url,
                            width: '100%',
                            height: '100%'
                        .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;

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Why use an iFrame at all?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial