Изменение размера элемента div

Question

jQuery имеет resize() - событие, но оно просто работает с окном.

jQuery(window).resize(function() { /* What ever */ }); 

Это прекрасно работает! Но когда я хочу добавить событие в элемент div, он не работает.

E.g.

jQuery('div').resize(function() { /* What ever */ }); 

Я хочу начать обратный вызов при изменении размера элемента div. Я не хочу запускать resizable-event - просто событие, чтобы проверить, изменился ли размер элемента div - .

У вас есть решение?

Answer 1

только окно поддерживается да, но вы можете использовать плагин для него: http://benalman.com/projects/jquery-resize-plugin/

Answer 2

DIV не огнь resize события, так что вы не будете в состоянии сделать именно то, что вы закодированы, но вы могли бы посмотрите на monitoring DOM properties.

Если вы на самом деле работаете с чем-то вроде resizables, и это единственный способ изменить размер div, тогда ваш плагин изменения размера, вероятно, будет реализовывать собственный обратный вызов.

Answer 3

что по этому поводу:

divH = divW = 0; 
jQuery(document).ready(function(){ 
    divW = jQuery("div").width(); 
    divH = jQuery("div").height(); 
}); 
function checkResize(){ 
    var w = jQuery("div").width(); 
    var h = jQuery("div").height(); 
    if (w != divW || h != divH) { 
     /*what ever*/ 
     divH = h; 
     divW = w; 
    } 
} 
jQuery(window).resize(checkResize); 
var timer = setInterval(checkResize, 1000); 

КСТАТИ Я предлагаю вам добавить идентификатор в DIV и изменить $ ("Див") до $ ("# yourid"), это будет быстрее, и он не сломается, когда позже вы добавите другие divs

Answer 4

Для интеграции с Google Maps я искал способ определить, когда div изменился по размеру. Поскольку карты Google всегда требуют правильных размеров, например. ширины и высоты для правильной визуализации.

Решение, с которым я столкнулся, - это делегирование события, в моем случае щелчок на вкладке. Это может быть окно изменения размера, конечно, идея остается той же:

if (parent.is(':visible')) { 
    w = parent.outerWidth(false); 
    h = w * mapRatio /*9/16*/; 
    this.map.css({ width: w, height: h }); 
} else { 
    this.map.closest('.tab').one('click', function() { 
     this.activate(); 
    }.bind(this)); 
} 

this.map в этом случае моя карта дел. Поскольку мой родитель невидим при загрузке, вычисленная ширина и высота равны 0 или не совпадают. С помощью .bind(this) я могу делегировать выполнение сценария (this.activate) на событие (click).

Теперь я уверен, что то же самое относится к событиям изменения размера.

$(window).one('resize', function() { 
    this.div.css({ /*whatever*/ }); 
}.bind(this)); 

Надеюсь, это поможет кому угодно!

Answer 5

Существует очень хороший, простой в использовании, легкий (использует собственные браузерные события для обнаружения) плагин для базового JavaScript и для jQuery, выпущенного в этом году. Он выполняет отлично:

https://github.com/sdecima/javascript-detect-element-resize

Answer 6

Я был заинтересован только для триггера, когда ширина элемента была изменена (уход я не»о высоте), поэтому я создал событие Jquery, что делает именно то, что, используя невидимый элемент iframe.

$.event.special.widthChanged = { 
    remove: function() { 
     $(this).children('iframe.width-changed').remove(); 
    }, 
    add: function() { 
     var elm = $(this); 
     var iframe = elm.children('iframe.width-changed'); 
     if (!iframe.length) { 
      iframe = $('<iframe/>').addClass('width-changed').prependTo(this); 
     } 
     var oldWidth = elm.width(); 
     function elmResized() { 
      var width = elm.width(); 
      if (oldWidth != width) { 
       elm.trigger('widthChanged', [width, oldWidth]); 
       oldWidth = width; 
      } 
     } 

     var timer = 0; 
     var ielm = iframe[0]; 
     (ielm.contentWindow || ielm).onresize = function() { 
      clearTimeout(timer); 
      timer = setTimeout(elmResized, 20); 
     }; 
    } 
} 

Это требует следующий CSS:

iframe.width-changed { 
    width: 100%; 
    display: block; 
    border: 0; 
    height: 0; 
    margin: 0; 
} 

Вы можете увидеть его в действии здесь widthChanged fiddle

Answer 7

// this is a Jquery plugin function that fires an event when the size of an element is changed 
// usage: $().sizeChanged(function(){}) 

(function ($) { 

$.fn.sizeChanged = function (handleFunction) { 
    var element = this; 
    var lastWidth = element.width(); 
    var lastHeight = element.height(); 

    setInterval(function() { 
     if (lastWidth === element.width()&&lastHeight === element.height()) 
      return; 
     if (typeof (handleFunction) == 'function') { 
      handleFunction({ width: lastWidth, height: lastHeight }, 
          { width: element.width(), height: element.height() }); 
      lastWidth = element.width(); 
      lastHeight = element.height(); 
     } 
    }, 100); 


    return element; 
}; 

}(jQuery)); 

Answer 8

Просто попробуйте FUNC (он может работать не только для дивы):

function resized(elem, func = function(){}, args = []){ 
    elem = jQuery(elem); 
    func = func.bind(elem); 
    var h = -1, w = -1; 
    setInterval(function(){ 
     if (elem.height() != h || elem.width() != w){ 
      h = elem.height(); 
      w = elem.width(); 
      func.apply(null, args); 
     } 
    }, 100); 
} 

Вы можете использовать его как этот

resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){ 
    console.log(a); 
    console.log(this); //for accessing the jQuery element you passed 
}, /*callback arguments in array*/ ['I\'m the first arg named "a"!']); 

UPDATE: Вы можете также использовать более прогрессивный Бодрствующего (она может работать на любых объектах, не только DOM элементов):

function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){ 
     func = func.bind(elem); 
     var currentVal = {call: {}, std: {}}; 
     $.each(propsToBeChanged, (property, needCall)=>{ 
      needCall = needCall ? 'call' : 'std'; 
      currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false 
     }); 
     setInterval(function(){ 
      $.each(propsToBeChanged, (property, needCall)=>{ 
       try{ 
        var currVal = needCall ? elem[property]() : elem[property]; 
       } catch (e){ // elem[property] is not a function anymore 
        var currVal = elem[property]; 
        needCall = false; 
        propsToBeChanged[property] = false; 
       } 
       needCall = needCall ? 'call' : 'std'; 
       if (currVal !== currentVal[needCall][property]){ 
        currentVal[needCall][property] = currVal; 
        func.apply(null, args); 
       } 
      }); 
     }, interval); 
    } 

Просто попробуйте :

var b = '2', 
    a = {foo: 'bar', ext:()=>{return b}}; 
changed(a, { 
// prop name || do eval like a function? 
    foo:  false, 
    ext:  true 
},()=>{console.log('changed')}) 

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