Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's an alternative I came up with; I wanted to use the tab framework but use dynamically-loaded iframes at the same time. The dynamic iframe resize code only works for pages in the same site; it does not work around any cross-site scripting restrictions. Tested IE9/FF6/Chrome 13. </p> <pre><code>&lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tab1"&gt;My Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;My Tab 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tab1"&gt; Default content here &lt;/div&gt; &lt;div id="tab2" title="myIframeUrl.html"&gt;&lt;/div&gt; &lt;!-- using title element for url storage --&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#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) &amp;&amp; (pnl.find('iframe').length == 0)) { $('&lt;iframe /&gt;') .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; } }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload