We help IT Professionals succeed at work.

Jquery tabs

erikTsomik
erikTsomik asked
on
614 Views
Last Modified: 2014-06-04
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>
			
		</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>

Open in new window


 $('#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;
            }
        });

Open in new window

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Why use an iFrame at all?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.