window resize determine controls parent is smaller or greater
<p>I need a script to determine when the parent element width of the conrol is resized. This is determined on the windows resize event all i need is to know weither the parent is smaller or larger than before instantaneously. please leave a working example - would be apreciated thanks</p>

<p>JavaScript:</p>

<pre><code>(function ($) {
   $.fn.quicklist = function () {
      var _this = this;
      var config = {   
         quicklistParentWidth: $(_this).parent().width(),    
      }                

      var parentWidth = config.quicklistParentWidth;
      $(window).resize(function (event) {
         var currWidth = config.quicklistParentWidth;
         $(_this).parent().css('width', config.quicklistParentWidth);

         if (currWidth &gt; parentWidth) {
            $('#width').text('greater');    
         } else if(parentWidth &lt; currWidth) {
            $('#smaller').text('smaller');
         }
         parentWidth = currWidth;
      });
   };
})(jQuery);

$(document).ready(function () {            
   $('#quicklist').quicklist();
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
    &lt;tr style="height:34px"&gt;
        &lt;td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; width:100%;"&gt;
            &lt;ul id="quicklist"&gt;
                &lt;li&gt;&lt;a href="#"&gt;List Goes here&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/td&gt;
        &lt;td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; "&gt;
            &lt;a id="link" href="#"&gt;Link&lt;/a&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;span id="width"&gt;&lt;/span&gt;    
</code></pre>
