Question

When I include a function in “show” option in jQueryUI 1.9.1 tabs widget, default effect (fadeIn) always activates. Is there a way to have a function called on show, but without the effect?

$("#divTabContainer").tabs({
    "show": function(){
        var table = $.fn.dataTable.fnTables(false);
        if ( table.length > 0 ) {
            console.log(table);
            $(table).dataTable().fnAdjustColumnSizing();
        }
    }
});

I’ve tried to return false or null from the function, but it didn’t have any influence, the effect was still there. In jQUI 1.8.1 this didn’t happen, i.e. the function was called without the effect.

Answer 1

jQueryUI tabs/#option-show is a method to control how the tab is shown. If you want to add a function when a tab is activated, or just before it is activated then the in-built callback methods activate or beforeActivate should be used.

For example:

$('#divTabContainer').tabs({
  show: false, /* turn off the effect */
  beforeActivate: function(event, ui) {
    // your function to adjust the dataTables column sizing
  }
});