Implementing IE min-width with Javascript

min-width works in Firefox and Safari, and even IE 7, but not IE 6 -- big surprise. However, we can fake it fairly well. With a little jQuery fun, we can read the min-width value, and then implement it using javascript fairly nicely.

First off, we know we have to attach this to the resize of the browser. IE seems to execute the resize event many, many times during an actual window resize¹ -- almost as if it were trying to execute it once every pixel resized (just a guess).

Enter the wresize jQuery plugin. This plugin tries to catch when the resize starts, and more importantly, when it finishes, and then executes a function. The one downside to this plugin is that we cant execute a function that requires us to pass any variables to it. Luckily, we don't need to for this.

Here are the things we need to do:

1. Get the min-width value; if it's not set then we'll default to 760px.
2. jQuery will give us the value text, so it will return "960px" or the like. We need to strip out the text to convert it from a string to a number.
3. Then, we need to calculate what size the browser window should be before we invoke the min-width.
4. Then, we wait. Wait for the browser to be just the right size.
5. Set the min-width on the first div inside the body element.
6. Un-set the min-width when the browser window widens.

Simple, right? Here's the actual min-width function:

function minwidth() {
  if ( (jQuery.browser.msie) && (jQuery.browser.version==6) ) {
    var cssprop = jQuery("body div").css("min-width");
    if ( cssprop == null ) {
      cssprop = 760; //No min-width; default to min-width of 760
    } else {
      cssprop = parseInt(cssprop); //Convert value to numeric;
    };
    
    //get document margin to figure browser width to look for
    var margin = parseInt( jQuery("body").css("margin-left") ) + parseInt( jQuery("body").css("margin-right") );

    //21px is the width of the scroll bar.
    if (clientwidth() < (cssprop + margin + 21)) {
      jQuery(document.body).width(cssprop); //Set fixed-width
    } else {
      jQuery(document.body).width("auto"); //Un-set fixed-width
    };
  };
};

Now that's just the function; we haven't used it yet. We need to execute this function on page load, and use the wresize plugin to execute the same function on resize. Luckily, that's simple too.

$(document).ready(function(){
  minwidth(); //call IE minwidth on page load
  $( window ).wresize( minwidth ); //IE Resize event - resize for min-width
});

We didn't cover the clientwidth() function -- that's how we're getting the browser's window size. Check out the example page for the final result.

¹http://snook.ca/archives/javascript/ie6_fires_onresize/