Search code examples
javascriptjquerytabsshieldui

change content on resize without page refresh?

I'm using ShieldUI's "Tabs" and there is a property for the tabs position. I want when the screen width is >= 768px to display the tabs at "left" and while <= 768px to display them on the "top". I came to here:

var $window = $(window);
var $pane = $('#tabsDiv');

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize < 768) {
        $pane.shieldTabs({
            position: "top"
        });
    } else {
        $pane.shieldTabs({
            position: "left"
        });
    }
}

checkWidth();

$(window).resize(checkWidth);

But when i'm full width and i go "mobile" i have to refresh the page to get what i want, is there a way to do that without page refresh?

Solution

  • We kind of have some issues with your code, along with the Shield UI limitations. Let's see some of them:

    • First of all, for what I've checked at the official docs, the framework does support component refreshing, but only for new options you'd like to add to your widgets. Therefore, your code won't work when you try to update specific features of the tab (like the position). This means that it's good to have a global function (initTabs, in our case) for destroying and recreating the whole tab structure;
    • Second, once you do that, don't declare the resizing function inside of this global new one, in order to evict recursiveness problems;
    • It's also a good idea creating a global variable to store the state of the tabs position, since we have now local/global functions to handle.

    Check out the final working code: https://jsfiddle.net/ro0a5bhv/4/

    Note: See that I had to do a workaround regarding the CSS property min-height, which is always set by the framework when switching tab views.