change content on resize without page refresh?

Question

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?

Provide a working example that demonstrates the problem (jsfiddle/codepen/snippet). — Dekel, Nov 04 '16 at 13:59

diogo · Accepted Answer · 2016-11-12T12:31:05.647

3

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.

edited Nov 12 '16 at 12:31

answered Nov 06 '16 at 16:44

diogo

3,769
1
24
30

You can use .refresh() on all Shield UI plugin instances to refresh any component. It should be a base method. You can also pass a subset of properly arranged options dictionary, which you want to be merged with the original properties, thus overriding them. – Vladimir Georgiev Nov 08 '16 at 20:28
@VladimirGeorgiev, to refresh any component is not what the docs say about it. The only `.refresh()` function available there is for Grid widgets (https://www.shieldui.com/documentation/grid/javascript/api/methods/refresh). Straight to Tabs API demo (https://demos.shieldui.com/web/tabs/api), even them use the *destroy/recreate* strategy... Do you have any functional code to comprove/enrich this points? – diogo Nov 09 '16 at 11:04
As far as I know, the .refresh() method is implemented for all widgets, but is not fully documented... Here you can see it is in the base shield ui widget class: https://github.com/shieldui/shieldui-lite/blob/master/common/core.js#L769 – Vladimir Georgiev Nov 10 '16 at 14:11
You're right, there is a refresh for Widget objects, but it seems to be restricted to only add new options, not update any already added (which wouldn't work for this situation..). Thanks @VladimirGeorgiev! – diogo Nov 12 '16 at 12:28
AFAIK, the code uses $.extend, which will override the old options with any new ones passed. – Vladimir Georgiev Nov 14 '16 at 14:17

change content on resize without page refresh?

1 Answers1