Skip to content

Unnecessarily re-initializing tabs on mobile devices #1

Description

@steveosoule

On some mobile devices, scrolling can a window resize event to fire. The plugin then responds and unnecessarily redraws the tabs. Then, when the tabs are redrawn, the original .current tab doesn't stay open.

Something like this could help the base.resize() function from unnecessarily re-initializing:

// ...
base.cachedViewport = 0;

base.resize = function () {
    base.viewport = $(window).outerWidth();

    if( base.viewport === base.cachedViewport ){
        return;
    }
    base.cachedViewport = base.viewport;

    if (base.viewport <= base.options.breakpoint && base.options.layout == 'auto') {
        base.$el.removeClass('tabs');
        base.$el.addClass('accordion');
    }
    else if (base.viewport > base.options.breakpoint && base.options.layout == 'auto') {
        base.$el.removeClass('accordion');
        base.$el.addClass('tabs');
    };
    base.init();
};

// Run Functions
base.init();
base.navigation();
$(window).on('resize', function () {
    base.resize();
});
// ...

I didn't really look at how to fix the part where when the tabs are re-initialized the .current tab changes.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions