Skip to content

Effect should not be triggered during initial load of tabs #531

Closed
Josh5A opened this Issue Oct 11, 2011 · 11 comments

5 participants

@Josh5A
Josh5A commented Oct 11, 2011

Initializing tabs runs a click event... which means if you're using an effect, for example the fade effect, the content of the current tab fades in as the page loads. Any way to avoid this?

I want the content to fade in when changing tabs... I just don't want it to fade in on the first load. That behavior makes no sense; the content in the default tab should not fade in on load, it should be present from the beginning like all the other content on the page.

@talbet
talbet commented Oct 25, 2011

I ran into the same problem, wanted the initial tab setup to render with no effect, but introduce an effect for tab changes.

It would be great to have a property in configuration to set this up, but in the meantime something like this should work:

$(function() {
    // no effect is set so that there is no fade in initially 
    $("#entry-nav > ul").tabs("div.entry-content > div");

    //Access the tabs API and set the transition effect after the tabs have been initialized
    tabsettings = $("#entry-nav > ul").data("tabs").getConf();
    tabsettings.effect = "fade";
}); 
@Josh5A
Josh5A commented Oct 26, 2011

Nice, thanks! At the very least that should be added to the documentation/examples, as I am not the only person who has posted in the forums looking for an answer.

@Josh5A Josh5A closed this Oct 26, 2011
@Josh5A
Josh5A commented Oct 26, 2011

Whoops, I accidentally closed the issue!! :(

@Josh5A Josh5A reopened this Oct 26, 2011
@alibby251

Hi talbet, josh5A,

Thanks for this - any chance you could please get this set up as a pull request?

Alex.

@Josh5A
Josh5A commented Oct 26, 2011

I am not sure how to do that.. is that something a non-developer would normally do?

@alibby251

Hehe - I was kinda hoping that talbet may have done this for you, as I got the sense that he (or she?) is a developer...

I need to take further advice on the best way to work this in - can I come back to you please?

@Josh5A
Josh5A commented Oct 26, 2011

Of course.

@talbet
talbet commented Oct 26, 2011

This is more of an interim solution. It changes the configuration of the tabs after they have been created, but as yet I haven't had a chance to look at the jquery.tools.js files. But If I can work out a solution there I will set up a pull request.

In the meantime a quick update: you'll get a JS error on pages without tabs because .getConf() is undefined. So in most projects you will need a few extra lines to make sure you are on a page with tabs.

There may be a more elegant way to do this, I'm working to a tight deadline at the moment.

$(function() {
    // no effect is set so that there is no fade in initally 
    $("#entry-nav > ul").tabs("div.entry-content > div");

    //Access the tabs API and set the transition effect after the tabs have been initallized
    tabsettings = $("#entry-nav > ul").data("tabs")
    if (tabsettings) {
        tabapi = tabsettings.getConf();
        tabapi.effect = "fade";
    };
});
@Josh5A
Josh5A commented Oct 27, 2011

Wow, thanks so much! I only included the script on the page that has the tabs, so I didn't know this is a possibility. Thanks for saving me or some other soul in the future from dealing with that.

@duckzland



$.tools.tabs = {
.......................................
/*
configuration:
- fadeOutSpeed (positive value does "crossfading")
- fadeInSpeed
*/
fade: function(i, done) {

  var conf = this.getConf(),
     speed = conf.fadeOutSpeed,
     panes = this.getPanes();

  if (speed && panes.hasClass('start') == false) {
    panes.fadeOut(speed); 
  } else {
    panes.hide(); 
  }
  if (panes.eq(i).hasClass('start') == false) {
    panes.eq(i).fadeIn(conf.fadeInSpeed, done); 
  } else {
    panes.eq(i).show();
  }
},

..................................................................................


$('div.entry-content > div').addClass('start');
$("#entry-nav > ul").tabs("div.entry-content > div");
$('div.entry-content > div').removeClass('start');

That is how I fix this problem, although it will be perfect if we dont need to rely on custom class to tell the script that we are on init function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.