在窗口調整大小時動態獲取高度滑動大小

Question

當我調整Highslide框（通過拖動右下角）時，可以動態查看大小嗎？

這裏是如何確定Highslide箱尺寸：http://jsfiddle.net/roadrash/yUuRX/

HTML：

<div> 
    <a href="javascript:;" onclick="return hs.htmlExpand(this)" title="test"> 
     Open HTML-content 
    </a> 
    <div class="highslide-maincontent"> 
     <h3>Lorem ipsum</h3> 
     <p> 
      Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit. Aliquam dapibus leo quis nisl. 
      In lectus. Vivamus consectetuer pede in nisl. 
      Mauris cursus pretium mauris. Suspendisse 
      condimentum mi ac tellus. 
     </p> 

     <p style="color: red;"> 
      Popup width: [width]px<br /> 
      Popup height: [height]px 
     </p> 
    </div> 
    </div> 

的JavaScript：

hs.graphicsDir = 'http://highslide.com/highslide/graphics/'; 
hs.outlineType = 'rounded-white'; 
hs.wrapperClassName = 'draggable-header'; 

hs.Expander.prototype.onBeforeExpand = function(sender) { 
    var popupWidth = sender.x.full; 
    var popupHeight = sender.y.full; 
    sender.content.innerHTML = sender.content.innerHTML.replace('[width]', popupWidth).replace('[height]', popupHeight); 
}; 

這裏是我想裏面HighSlide上調整大小：http://jsfiddle.net/Uvh6e/226/

HTML：

<div id="zzz">dfjhgkdfjhgkjdfgkjdfgkjhdfjkgjkjdfhgkjdhf<br>fgfg</div> 
<span id="jsWidth">0</span>, 
<span id="jsHeight">0</span> 

的JavaScript：

function jsUpdateSize(){ 
    var width = document.getElementById('zzz').offsetWidth; 
    var height = document.getElementById('zzz').offsetHeight; 

    document.getElementById('jsWidth').innerHTML = width; 
    document.getElementById('jsHeight').innerHTML = height; 
}; 
window.onload = jsUpdateSize; 
window.onresize = jsUpdateSize; 

Answer 1

我找到了解決辦法：http://jsfiddle.net/yUuRX/21/

這很簡單，不是最好的，但我需要什麼。

HTML：

<a href="javascript:;" onclick="return hs.htmlExpand(this)" title="test">Open HTML-content</a> 
    <div class="highslide-maincontent"> 
     <div id="zzzz"> 
     <h3>Lorem ipsum</h3><input type="submit" id="btn2" onclick="test()"/> 
     </div> 
    </div> 
<br><br> 
<div id="bzzzz"></div> 
<div id="bzzzz2"></div> 

的JavaScript：

hs.graphicsDir = 'http://highslide.com/highslide/graphics/'; 
hs.outlineType = 'rounded-white'; 
hs.wrapperClassName = 'draggable-header'; 


function test() { 
    document.getElementById('bzzzz').innerHTML = document.getElementById('zzzz').offsetWidth; 
    document.getElementById('bzzzz2').innerHTML = document.getElementById('zzzz').offsetHeight; 
} 

Answer 2

只有什麼在我腦海中是cathci窗口大小調整，然後嘗試在CSS來適應寬度的每個孩子元素：

$(document).ready(function(){ 
$(window).resize(function() { 
    $('#report').text($(window).width()); 

    var width = $(window).width() > $('.highslide-container').width() ? $('.highslide-container').width() : $(window).width(); 
    console.log(width); 
    $('.highslide-container table,#highslide-wrapper-0').css({ 
     width: width 
    });  

}); 

}）;

http://jsfiddle.net/yUuRX/20/