Search code examples
javascripttabsprototypejs

Issue on steriotab system

I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/

You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).

I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..

this javascript may causing the issue..

activate: function(tab) {
    var tabName = tab.id.replace(this.options.ids.tab,'');
    this.currentPanel = this.options.ids.panel+tabName;
    if (this.showPanel == this.currentPanel) {
      return false;
    }

    if (this.showPanel) {
      if (this.options.effects) {
        new Effect.Fade(this.showPanel, {queue: 'front'});
      } else {
        $(this.currentPanel).hide();
      }
    }

    if (this.options.effects) {
      new Effect.Appear(this.currentPanel, {queue: 'end'});
    } else {
      $(this.showPanel).show();
    }

    this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
    tab.addClassName(this.options.classNames.tabActive);
    this.showPanel = this.currentPanel;
  }

you guys have any thought?

Solution

  • You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.