CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
egr103
egr103

Reputation: 4008

Changing Masonry's columnWidth option on resize

I'm using this plugin: http://masonry.desandro.com/

I currently initialise the plugin for 960px layouts and my code for this is:

<script>

$(function(){

    var $container = $('#container');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box',
        gutterWidth: 8,
            // Want to change this here:
        columnWidth: 113
      });
    });

  });
</script>

I want to change the columnWidth number from 113 to 146 when the screen width or browser window width is higher than 1225px. How do I do this?

Upvotes: 1

Views: 3556

Answers (2)

Ian Clelland
Ian Clelland

Reputation: 44152

If you're doing this on window resize, then you want to attach a handler to the resize event. In your event handler, call $(yourdiv).masonry({columnWidth: }) if appropriate.

You will probably also want to look into th jquery.resize plugin here: http://benalman.com/projects/jquery-resize-plugin/ -- some (most) browsers will send resize events constantly while the window is being resized, and that could result in a lot of re-layout if the user hovers right around the threshold.

Upvotes: 0

Nimnam1
Nimnam1

Reputation: 513

columnWidth: $(document).width() > 1225 ? 146 : 113

Upvotes: 4

Related Questions