I'm using Control.Tabs to provide a full screen tab interface on an AJAX application but am having a problem when the page first loads. All the tab content is visible for a fraction of a second before the following (simplified) code executes.
$$('.tabs').each(function(tabs){
new Control.Tabs(tabs);
});
I tried to specify the following in my CSS to hide the tab content from the start but the activated tab, specified by #tabid, didn't appear on page load.
.tabcontent{
display: none;
}
I added the following code after the JS above to try to undo the CSS when the page finishes loaded:
$$('.tabcontent').each(function(s){s.show();});
This still didn't allowed the tab to appear but, as I soon worked out, would have caused all of the tabs to appear at once!
I modified the afterChange function to save the ID of the current tab to a global variable and set the following to run at the end of page load. Still no luck.
I'm using Control.Tabs to provide a full screen tab interface on an AJAX application but am having a problem when the page first loads. All the tab content is visible for a fraction of a second before the following (simplified) code executes.
I tried to specify the following in my CSS to hide the tab content from the start but the activated tab, specified by #tabid, didn't appear on page load.
I added the following code after the JS above to try to undo the CSS when the page finishes loaded:
This still didn't allowed the tab to appear but, as I soon worked out, would have caused all of the tabs to appear at once!
I modified the afterChange function to save the ID of the current tab to a global variable and set the following to run at the end of page load. Still no luck.
Also tried this but no luck:
Any ideas?
Thanks.
Posted June 13th, 2007 at 12:55pm by