div 요소의 크기 조정

jQuery에는 resize()-이벤트가 있지만 창에서만 작동합니다.

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

이것은 잘 작동합니다! 하지만 이벤트를 div 요소에 추가하고 싶을 때 작동하지 않습니다.

예

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

div 요소의 크기가 변경되면 콜백을 시작하고 싶습니다. 크기 조정 가능한 이벤트를 시작하고 싶지 않습니다. div 요소의 크기가 변경되었는지 확인하는 이벤트입니다.

이를위한 해결책이 있습니까?

DIVresize이벤트를 발생시키지 않으므로 코딩 한 작업을 정확히 수행 할 수는 없지만 DOM 속성 모니터링을 살펴볼 수 있습니다 .

실제로 크기 조정과 같은 작업을하고 있고 이것이 div의 크기를 변경하는 유일한 방법 인 경우 크기 조정 플러그인은 자체 콜백을 구현할 것입니다.

요소의 너비가 변경되었을 때만 트리거에 관심이 있었기 때문에 (높이는 신경 쓰지 않습니다), 보이지 않는 iframe 요소를 사용하여 정확히 수행하는 jquery 이벤트를 만들었습니다.

$.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 바이올린

// 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));

jquery 플러그인 jquery.resize를 만들었습니다. 지원되는 경우 resizeObserver 를 사용하거나 marcj / css-element-queries 스크롤 이벤트를 기반으로하는 솔루션 , setTimeout / setInterval이 없습니다.

당신은 단지

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

또는 리사이 저 플러그인으로

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

나는 jQuery 터미널을 위해 이것을 만들고 분리 된 repo 및 npm 패키지로 추출했지만 그 동안 요소가 iframe 내부에 있으면 크기 조정에 문제가 있었기 때문에 숨겨진 iframe으로 전환했습니다. 그에 따라 플러그인을 업데이트 할 수 있습니다. jQuery 터미널 소스 코드 에서 iframe 기반 크기 조정기 플러그인을 볼 수 있습니다 .

편집 : 페이지가 iframe 내부에있을 때 이전 솔루션이 작동하지 않았기 때문에 새 버전은 iframe을 사용하고 창 개체의 크기를 조정합니다.

EDIT2 : 대체가 iframe을 사용하기 때문에 양식 컨트롤이나 이미지와 함께 사용할 수 없으므로 래퍼 요소에 추가해야합니다.

EDIT3 : : 돌연변이 관찰자를 사용 하는 resizeObserver 폴리 필 을 사용하는 더 나은 솔루션 이 있습니다 (resizeObserver가 지원되지 않는 경우). IE에서도 작동합니다. 또한 TypeScript 타이핑도 있습니다.

이것에 대해 :

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);

BTW div에 ID를 추가하고 $ ( "div")를 $ ( "# yourid")로 변경하면 더 빠르며 나중에 다른 div를 추가해도 깨지지 않습니다.

기본 JavaScript와 올해 출시 된 jQuery를위한 정말 멋지고 사용하기 쉽고 가벼운 (탐지에 네이티브 브라우저 이벤트 사용) 플러그인이 있습니다. 완벽하게 수행됩니다.

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

창만 지원되지만 플러그인을 사용할 수 있습니다. http://benalman.com/projects/jquery-resize-plugin/

Google지도 통합의 경우 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이 경우에는 내지도 div입니다. 부모님이로드시 보이지 않기 때문에 계산 된 너비와 높이가 0이거나 일치하지 않습니다. 를 사용 .bind(this)하여 스크립트 실행 ( this.activate)을 이벤트 ( click)에 위임 할 수 있습니다 .

이제 크기 조정 이벤트에도 동일하게 적용됩니다.

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

누구에게나 도움이되기를 바랍니다!

이 기능을 시도하십시오 (div에서만 작동하지 않을 수 있습니다).

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"!']);

업데이트 : 더 진보적 인 감시자를 사용할 수도 있습니다 (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')})

b, a.foo 또는 a.ext를 직접 변경할 때마다 '변경됨'으로 기록됩니다.

화면 크기에 따라 텍스트 또는 콘텐츠 또는 속성을 변경할 수 있습니다. HTML :

<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>

자바 스크립트 :

<script>
const changeText = document.querySelector('.change');
function resize() {
  if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
    changeText.textContent="FAQ";
  } else {
    changeText.textContent="Frequently Asked Questions (FAQ)";
  }
}
window.onresize = resize;
</script>

div 자체의 크기를 조정하려면 CSS 스타일로 지정해야합니다. 오버플로 를 추가 하고 속성의 크기를 조정해야합니다 .

아래는 내 코드 스 니펫입니다.

#div1 {
        width: 90%;
        height: 350px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        overflow: auto;
        resize: both;
    }

<div id="div1">

</div>