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

只有我想到的是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/

Answer 2

我找到了解决方案：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;
}

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

2 个答案: