在窗口调整大小时动态获取高度滑动大小

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/