Get highslide size dynamically on window resize

Question

Is that possible to see the size dynamically when i resize Highslide box (by dragging right-bottom corner)?

Here is how to determine size of Highslide box: 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);
};

Here is what i want inside HighSlide on resize: 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

I found solution: http://jsfiddle.net/yUuRX/21/

It's simple, not the best, but what i need.

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

Only what comes to my mind is cathci window resize, then try to adapt width in css on each children element:

$(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/