jQuery Tab Menu and WebGL

Question

I want to use the tabs from jQuery UI (Source: http://jqueryui.com/demos/tabs/) to display on each tab a COLLADA dae file using WebGL GLGE (Source: http://www.glge.org/). The Tabs should be generated dynamically depending on an xml file. Everything works as planed, only the rendering of the 3D Objects does not work.

I tried now different approaches but none of them works. The result is everytime the same. The 3D COLLADA Object is only rendered on the first tab. Even if I use basic and static document.write statements without retrieving data from my xml only the building on the first page is displayed.

For Example:

<div id="tabs">
  <div id="tabs-1">
     //ONLY THIS OBJECT IS RENDERED
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-2">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-3">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>

If i use the iframes out of the jQuery Tabs more than one iframe is rendered. So

<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<div id="tabs">
     //codehere
</div>

brings three rendered 3D Objects above the Tabs.

Hope you can understand my problem and help me out.

EDIT: I just uploaded the above "simple" example. You can see it under: http://korb.cwsurf.de/tmp/buildingdetail_simple.html

greetings, faiko

score 2 · Answer 1 · edited May 23 '17 at 11:48

The iframe is loaded with an initially hidden state, the code basically gets a 0x0 dimensions from the hidden ones. You can choose to load on tab click or refresh the frame. You can see that if you go to http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2 that only the visible one gets rendered properly.

I'll defer to here What's the best way to reload / refresh an iframe using JavaScript? for how to reload an iframe.

You could start out with a blank href and then only populate it when the tab is clicked. Or render it all then call tabs after the frames load.

score 2 · Answer 2 · answered Jan 13 '12 at 01:48

Could it be that the <iframe>s need to be visible (or at least have non-hidden parents) before they know what to do with themselves? I have seen strange sizing and positioning issues with non-visible tabs before, perhaps you're seeing a similar issue.

You could try adding the <iframe>s after showing the tab. Something like this:

$('#tabs').tabs();
$('#tabs a:not(:first)').one('click', function() {
    var tab = this.href.replace(/.*#/, '#');
    setTimeout(function() {
        // Add the appropriate <iframe> here.
        $(tab).append('<iframe src="..."></iframe>');
    }, 0);
});

That assumes that the first will already be open (hence the :not(:first)). Using one to bind the click handler will unbind the handler after its first activation so you don't needlessly re-add the <iframe>s. The "timeout 0" trick is just a way of delaying something until after the browser has control again and that should add the <iframe> after the panel is displayed.

Quick demo of the technique: http://jsfiddle.net/ambiguous/FMBcE/

jQuery Tab Menu and WebGL

2 Answers2