2013-09-06 2 views
-1

Привет я получил перебольшое DIV:Resize событие не работает с сНу изменения размера: как

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

мне нужно поймать событие, когда пользователь изменять размер этого окна.

Оба

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

и

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

не работают;/

ответ

0

Вы можете использовать JQuery UI, чтобы изменить размер DIV:

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

FIDDLE

Если вы хотите сделать что-то в окне изменения размера вам нужно что-то вроде этого:

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

И check this plugin тоже, я думаю, что вам поможет!

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.

+2

упускают. Обратный вызов fn будет вызываться много раз за короткий период ... не так хорошо. –

+0

У меня не было проблем с этим, но я сделал некоторые изменения, чтобы гарантировать, что выполнение обратного вызова не перекрывается. –

0

, пожалуйста, попробуйте использовать этот код:

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

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