Turn Packery On/Off on window size

[metafizzy]

Turn Packery On/Off on window size

[desandro]

Here you go: http://jsfiddle.net/Tjp7a/6/ I am using destroy method to disable Packery.

That is amazing. Thank you so much!

Hi David,

I am noticing some strange behavior when making your example slightly more complex.

If you re-size the browser smaller and then full screen again some of the items do not get positioned correctly, some go off screen

http://jsfiddle.net/trewknowledge/Tjp7a/12/

This issue does not happen if you do not use the re-size function

http://jsfiddle.net/trewknowledge/LYAMN/1/

however, the items get arranged when the page loads (expected result).

Any thoughts?

P.S. Do you offer paid support?

[amirkhan81]

Thank you for this!

[desandro]

See better answer at #135 (comment)

[tomsabin]

We can use matchMedia to make this more efficient. See the following example for Packery to be disabled on mobile, but enabled on tablet and larger:

if (Modernizr.matchmedia) {
  var mq  = matchMedia('(min-width: 660px)');
  var $container = $('[data-packery-target]');
  var packeryOptions = {
    itemSelector: '.item'
  };

  if (mq.matches) {
    $container.packery(packeryOptions);
  }

  mq.addListener(function(mql) {
    if (mql.matches) {
      $container.packery(packeryOptions);
    } else {
      $container.packery('destroy');
    }
  });
}

Support is decent: http://caniuse.com/#feat=matchmedia