Javascript function based on screen width

Question

Hey I'm trying to decrease the column width of masonry when you get to screen size with: max-width: 450px;

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.box',
    columnWidth: 220,
    isAnimated: !Modernizr.csstransitions,
    isFitWidth: true
  });
});

Here is my Javascript code. What do I add to make it decrease the column width at that screen size??

Or how do I target screen size with an IF statement...if screen size is less than 450 then 'xyz' else the function above...

Answer 1

A shorthand IF statement should do the trick. Essentially, you are saying if document width is less than 450 than columnWidth is set to 220, else columnWidth is set to 110.

var $container = $('#container');
      $container.imagesLoaded(function(){
      $container.masonry({
                          itemSelector : '.box',
                          columnWidth: ( $(document).width() < 450 ? 220 : 110 ),
                          isAnimated: !Modernizr.csstransitions,
                          isFitWidth: true
                        });
       });

Answer 2

if(window.screen.availWidth < 450)
{
    // alternative configuration here
}