窗口調整大小確定控件父級更小或更大

Question

我需要一個腳本來確定調整conrol的父元素寬度的大小。這是確定的窗口調整大小事件我需要的是要知道我們父母是比以前更小或比以前更大。請留下工作的例子 - 將apreciated感謝

的JavaScript：

(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 > parentWidth) { 
      $('#width').text('greater');  
     } else if(parentWidth < currWidth) { 
      $('#smaller').text('smaller'); 
     } 
     parentWidth = currWidth; 
     }); 
    }; 
})(jQuery); 

$(document).ready(function() {    
    $('#quicklist').quicklist(); 
}); 

HTML：

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

Answer 1

下面是JavaScript的一個工作版本。 http://jsfiddle.net/ZhG8N/

<div style="width:50%; background:#F00">not yet resized 
    <div id="child"></div> 
</div> 

<script> 
var parent = document.getElementById('child').parentNode, 
    lastSize = parent.offsetWidth, 
    newSize, timer; 


window.onresize = function(){ 
    newSize = parent.offsetWidth; 
    if(lastSize > newSize){ 
     parent.innerHTML = 'smaller'; 
    } 
    else if(lastSize< newSize){ 
     parent.innerHTML = 'wider'; 
    } 
    lastSize = newSize; 
} 
</script>