Re Size Me

There are several cool jQuery tricks we can use when we resize any element in the DOM or the window itself. For example the resize event can be used to detect when a view is resized:

$(window).resize(function() { alert("You have resized this!"); });

This little bit of code will pop up an alert message letting you know when you have resized your browser window. Applied to a more practical use we can us the resize event to check if the user has modified the width of a webpage past a certain length. If they do, we change the format of the page to accomodate a wider page. We can also put an else in there to remove formatting if we resize the page more narrowly.  An example might look something like this:

$(document.ready(function()
{ accomodateWidth();
   $(window).resize(accomodateWidth);
 });

function accomodateWidth()
{ if($('body').width() > 600)
   { ... code to add page style for greater than 600px width ... }
   else
   { ... code to remove page style for greater than 600px width ... }
}

This allows for a greater flexibility of control over your page that makes end user experiences more flexible based on the size of their document window.