Stop script from working if screen size is smaller than

Question

I have this small snippet of jQuery:

if (jQuery(window).innerWidth() > 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

This works fine, but I want to stop this from working, or uninitialize it on resize if the screen is smaller than a certain size. I've tried this:

jQuery(window).smartresize(function() {
    if (jQuery(window).innerWidth() > 568) {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }   
});

.smartresize is a debounce script, it works well, but for this particular scenario, its not doing anything and the masonry script is still initialized. How can I make first set of jQuery stop applying itself to the elements if the screen is smaller than 568 pixels but then start working again if the resize is larger than 568?

you can't stop something that has already happened. you can only undo it. — Kevin B, Feb 14 '14 at 16:24
Is it possible that the window is wide enough at the start so `masonry` is called? I think you need to explicitly undo whatever `masonry` does if the width is `<= 568`. — Zach Rattner, Feb 14 '14 at 16:24

Alvaro · Accepted Answer · 2014-02-14T16:41:45.623

2

This would work on load. Not on resize:

if (jQuery(window).innerWidth() < 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

To make it work on resize then you would need to use the method destroy as detailed at the documentation.

$(window).resize(function () {
    if (jQuery(window).innerWidth() < 568) {
        jQuery('#boardOfTrustees').masonry('destroy');
    } else {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }
});

edited Feb 14 '14 at 16:41

answered Feb 14 '14 at 16:24

Alvaro

40,778
30
164
336

I know, that's exactly what I want to happen, but then also watch for resize and stop working if its smaller than 568. – AndyWarren Feb 14 '14 at 16:25
I made a typo, and you copied it, the width check should actually be `< 569`. My mistake, sorry. So the destroy method seems to partially work, however it leaves behind some random styles on the elements. Any suggestions on that? Not sure how I missed the destroy method, I checked the docs several times. – AndyWarren Feb 14 '14 at 16:38
@AndyWarren about the styles you will have to ask to the creator of the plugin or its issues forum. – Alvaro Feb 14 '14 at 16:41
If this solved your problem it would be nice if you accept it as the valid answer. It might help future people. – Alvaro Feb 14 '14 at 16:54
I will definitely, sorry, was just messing with it. It hasn't solved it yet, but its very close. Its the right solution, I just have to get it to work correctly. Thanks. – AndyWarren Feb 14 '14 at 16:58
@Alvaro I want to ask something. Is there any case to get performance drawbacks from re-initialize the plug in over and over, all the time? I take as example a user with a laptop. The user maybe will resize the window regularly. Isn't there any cost by using it? – Jul 05 '16 at 17:01
@GeorgeGkas of course it is. But you can always use a timeout to only fire the resize event every X milliseconds after the user stopped resizing. So it won't fire while resizing. Check out [this answer](http://stackoverflow.com/a/5490021/1081396) – Alvaro Jul 06 '16 at 09:07

score 0 · Answer 2 · answered Feb 14 '14 at 16:26

0

Destroy it

else {
    jQuery('#boardOfTrustees').masonry('destroy')
}

answered Feb 14 '14 at 16:26

epascarello

204,599
20
195
236

Stop script from working if screen size is smaller than

2 Answers2