highslide

Get highslide size dynamically on window resize


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;

Solution

  • 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;
    }