Another SmartTabs question

[lesliekirk]

I used the cornerstoneUX.smartTabs to replace a javascript driven <li> "based" tabs. Within the li I was able to set one of the tabs as "selected" even though it was not the first one and to have that tab be open when landing on the page. The javascript would remove the class only after clicking on another tab. Can something like this be done with the cornerstoneUX.smartTabs? It looks like the cornerstoneUX.smartTabs "current" class is added by the javascript but I'm not figuring out how to get a tab other than to first one to be selected.

[Matt Zimmermann]

Hi Leslie,

Here is an updated version of the smartTabs file with a new variable. You can set the 'initialItem' variable when you initialize the function and pass it a zero based count. As an example, if you wanted to make the second item be the one selected as current on load of the page, you would initialize the call like this:

$('#js-smart-tabs').smartTabs({
    initialItem: 1
});

Here's the new file:

;(function($){
    if (!$.cornerstoneUX) {
        $.cornerstoneUX = {};
    };

    $.cornerstoneUX.smartTabs = function(el, options){
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data('cornerstoneUX.smartTabs', base);

        base.viewport = $(window).outerWidth();
        base.ddHeight = '';

        base.init = function () {
            base.options = $.extend({},$.cornerstoneUX.smartTabs.defaultOptions, options);

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

            base.ddHeight = [];

            base.$el.each(function () {
                var smartTabs = $(this),
                    smartTabsHeight = smartTabs.find('dt').outerHeight(),
                    currentHeight = 0,
                    current,
                    hash = location.hash;

                if (base.$el.hasClass('tabs')) {
                    if (base.options.contentHeight == 'fixed') {
                        smartTabs.find('dd').each(function (i) {
                            var dd = $(this);

                            dd.addClass('invisible');
                            if (dd.outerHeight() > currentHeight) {
                                currentHeight = dd.outerHeight();
                            };
                            dd.removeClass('invisible');
                        });
                        smartTabs.css('height', smartTabsHeight + currentHeight + 'px');
                        smartTabs.find('dd').css('height', currentHeight + 'px');
                        console.log(currentHeight);
                    }
                    else if (base.options.contentHeight == 'auto') {
                        smartTabs.find('dd').each(function (i) {
                            var dd = $(this);

                            dd.addClass('invisible');
                            base.ddHeight[i] = dd.outerHeight();
                            dd.removeClass('invisible');
                        });
                    };
                    smartTabs.find('dd').css('top', smartTabsHeight + 'px');
                }
                else {
                    smartTabs.css('height', 'auto');
                    smartTabs.find('dd').css({
                        height: 'auto',
                        top: 0
                    });
                };
                smartTabs.find('dt').removeClass('current');
                smartTabs.find('dd').hide();

                if (smartTabs.find('dt a[href="' + hash + '"]').length) {
                    if (base.$el.hasClass('tabs') && base.options.contentHeight == 'auto') {
                        var findCurrent = smartTabs.find('a[href="' + hash + '"]').parent().addClass('current').next('dd'),
                            i = findCurrent.index('dd');

                        smartTabs.css('height', smartTabsHeight + base.ddHeight[i] + 'px');
                        current = findCurrent.css('height', base.ddHeight[i] + 'px').show();
                    }
                    else {
                        current = smartTabs.find('a[href="' + hash + '"]').parent().addClass('current').next('dd').show();
                    };
                }
                else {
                    if (base.$el.hasClass('tabs') && base.options.contentHeight == 'auto') {
                        var findCurrent = smartTabs.find('dt').eq(base.options.initialItem).addClass('current').next('dd'),
                            i = findCurrent.index('dd');

                        smartTabs.css('height', smartTabsHeight + base.ddHeight[i] + 'px');
                        current = findCurrent.css('height', base.ddHeight[i] + 'px').show();
                    }
                    else {
                        current = smartTabs.find('dt').eq(base.options.initialItem).addClass('current').next('dd').show();
                    };
                };
            });
        };

        base.navigation = function () {
            base.$el.on('click', 'dt a', function (e) {
                var smartTabs = $(this),
                    smartTabsHeight = smartTabs.parent('dt').outerHeight();

                e.stopPropagation();
                e.preventDefault();
                e.stopImmediatePropagation();
                if (base.$el.hasClass('accordion')) {
                    if (smartTabs.parent('dt').hasClass('current')) {
                        var current = smartTabs.parent('dt').removeClass('current').next('dd').slideUp(300);
                    }
                    else {
                        smartTabs.parents('dl').find('.current').removeClass('current').next('dd').hide();
                        var current = smartTabs.parent('dt').addClass('current').next('dd').slideDown(300);
                        current.animate({scrollTop: -smartTabs.parent('dt').outerHeight()}, 800);
                    };
                }
                else {
                    if (!smartTabs.parent('dt').hasClass('current')) {
                        if (base.options.contentHeight == 'auto') {
                            smartTabs.parents('dl').find('.current').removeClass('current').next('dd').hide();

                            var findCurrent = smartTabs.parent('dt').addClass('current').next('dd'),
                                i = findCurrent.index('dd'),
                                current = findCurrent.css('height', base.ddHeight[i] + 'px').fadeIn();

                            smartTabs.parents('dl').css('height', smartTabsHeight + base.ddHeight[i] + 'px');
                        }
                        else {
                            smartTabs.parents('dl').find('.current').removeClass('current').next('dd').hide();
                            var current = smartTabs.parent('dt').addClass('current').next('dd').show();
                        };
                    };
                };
            });
        };

        base.resize = function () {
            base.viewport = $(window).outerWidth();
            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();
        });
    };

    $.cornerstoneUX.smartTabs.defaultOptions = {
        activeClass: 'current',
        breakpoint: 768,
        breakTrigger: $(window),
        contentHeight: 'fixed',
        initialItem: 0,
        layout: 'auto'
    };

    $.fn.smartTabs = function(options){
        return this.each(function(){
            (new $.cornerstoneUX.smartTabs(this, options));
        });
    };

    // This function breaks the chain, but returns
    // the smartTabs if it has been attached to the object.
    $.fn.getcornerstoneUX_smartTabs = function(){
        this.data('cornerstoneUX.smartTabs');
    };
})(jQuery);

[lesliekirk]

Thank you Matt!!! More amazing awesome sauce and I didn't even break it

[Matt Zimmermann]

You're welcome Leslie.

[Islandrose]

Hi Matt, is there any tuts on how to use your smartTabs?

[Matt Zimmermann]

The documentation for smartTabs can be found here: http://influxweb.github.io/cornerstoneUX.smartTabs/

[lesliekirk]

So I have another question. I'm using a conditional to display the first tab. I have added the dt class="current" to the second tab - which is how I want it to display it if there is content in the conditional tab. But if there isn't any content for the conditional first tab I need the tab with dt class="current" to display as the current tab (even though it is now the first tab). Currently, the second tab is displaying as the current tab, with or without the conditional first tab.

I'm wondering if initialItem: 1 is what might be triggering the display.

<script>
$('#js-smart-tabs--tabs').smartTabs({ layout: 'auto', contentHeight: 'auto' , initialItem: 1});
</script>

[Matt Zimmermann]

Dynamically setting the 'current' element is not a function of the SmartTabs plugin. Tabs are being revisited in ReadyThemes and I may go back and rewrite this plugin to have more options if there is a need or requests for it.

[lesliekirk]

Okay, so I guess for the time being I will have to look at going back to the other tabs script I had been using.

[lesliekirk]

Okay, so I guess for the time being I will have to look at going back to the other tabs script I had been using.

So I didn't have to give this up I just wrapped a conditional around the script, added an mvt:else to use the initialItem: 1 as needed and I'm good to go