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

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@talbet

talbet 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";
}); 

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

This comment has been minimized.

Show comment
Hide comment
@Josh5A

Josh5A 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 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

This comment has been minimized.

Show comment
Hide comment
@Josh5A

Josh5A Oct 26, 2011

Whoops, I accidentally closed the issue!! :(

Josh5A commented Oct 26, 2011

Whoops, I accidentally closed the issue!! :(

@Josh5A Josh5A reopened this Oct 26, 2011

@alibby251

This comment has been minimized.

Show comment
Hide comment
@alibby251

alibby251 Oct 26, 2011

Contributor

Hi talbet, josh5A,

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

Alex.

Contributor

alibby251 commented Oct 26, 2011

Hi talbet, josh5A,

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

Alex.

@Josh5A

This comment has been minimized.

Show comment
Hide comment
@Josh5A

Josh5A Oct 26, 2011

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

Josh5A commented Oct 26, 2011

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

@alibby251

This comment has been minimized.

Show comment
Hide comment
@alibby251

alibby251 Oct 26, 2011

Contributor

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?

Contributor

alibby251 commented Oct 26, 2011

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

This comment has been minimized.

Show comment
Hide comment
@Josh5A

Josh5A Oct 26, 2011

Of course.

Josh5A commented Oct 26, 2011

Of course.

@talbet

This comment has been minimized.

Show comment
Hide comment
@talbet

talbet 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";
    };
});

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

This comment has been minimized.

Show comment
Hide comment
@Josh5A

Josh5A 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.

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.

@bradrobertson

This comment has been minimized.

Show comment
Hide comment
Contributor

bradrobertson commented Oct 31, 2011

@duckzland

This comment has been minimized.

Show comment
Hide comment
@duckzland

duckzland Nov 13, 2011

$.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.

$.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