jQuery Masonry and media queries - reload masonry

Question

i have my site designed with media queries to cover different-sized layouts. i have masonry organizing a bunch of floats at the full-size width, no problem. at the mobile widths, all the floats, unfloat and just stack on top of each other. so i only need to re-run masonry when the site resizes to the tablet layout when 768px <= width <= 1000px.

<script type="text/javascript">
//<![CDATA[

    $(document).ready(function($){

        $('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer'  });

        //If the User resizes the window, adjust the #container height
        $(window).bind("resize", resizeWindow);
        function resizeWindow( e ) {
            var newWindowWidth = $(window).width();

            if(newWindowWidth<1008){
                $('ul.xoxo').masonry();
            } else {
                $('ul.xoxo').masonry();
            }
        }

    });

/* ]]> */
</script>

which doesn't work for me yet, but also i don't want it running on all resizes... just at the break points.

Answer 1

You can use Masonary's isResizable option for these cases.

  $container.masonry({
    itemSelector: '.box',
    isResizable: true
  });