调整不使用div resize的事件:两者

时间:2013-09-06 16:25:03

标签: javascript html

您好我有一个可调整大小的div:

<div id="mydiv" style="resize:both">
something here
</div>

我需要在用户调整此窗口时捕获事件。

两者

$("#mydiv").resize(function() {
        alert('works'); 
    });

$("#mydiv").bind('resize', function(){
        alert('works'); 
    });

不工作; /

4 个答案:

答案 0 :(得分:1)

the resize event实际上仅在窗口更改大小时触发,而不是在特定元素调整大小时触发。

如果要在特定元素重新调整大小时创建事件,我过去使用过this plugin;效果很好。

您也可以这样做:

$.fn.changeSize = function(fn){
var $this = this,
    w0 = $this.width(),
            pause = false; // this is only necessary if you don't want the callback to overlap
$this.sizeTO = setInterval(function(){
         if (!pause){
    var w1 = $this.width();
    if (w1 != w0) { 
        pause = true
        w0 = w1;
        fn(function(){pause=false;}); // if you don't want the callback to overlap, have the callback accept another callback to resume the check.
    }
         }
}, 100);
}

每隔.1秒检查一次元素。如果高度已更改,则会调用fn回调。

答案 1 :(得分:1)

请尝试使用此代码:

(function() {
    function myfunction(){
       // do what you need to do in the event
    }

    $(window).on("resize", myfunction);
    $(document).on("ready", myfunction);
})();

答案 2 :(得分:0)

您可以使用jquery ui来调整div的大小:

$("#mydiv").resizable();

FIDDLE

如果你想在窗口大小调整上做一些事情,你需要这样的东西:

$(window).resize(function() {
  alert("DO SOMETHING");
});

check this plugin也是{{3}},我想这会对你有所帮助!

答案 3 :(得分:0)

适用于所有 div 情况的最佳解决方案(参考:https://web.dev/resize-observer/

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement); // replace someElement with your element var