Thay đổi kích thước trên phần tử div

Question 1

jQuery có resize()- sự kiện, nhưng nó chỉ hoạt động với window.

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

Điều này hoạt động tốt! Nhưng khi tôi muốn thêm sự kiện vào một phần tử div thì nó không hoạt động.

Ví dụ

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

Tôi muốn bắt đầu gọi lại khi kích thước của phần tử div đã thay đổi. Tôi không muốn bắt đầu một sự kiện có thể thay đổi kích thước - chỉ là một sự kiện để kiểm tra xem kích thước của phần tử div có thay đổi hay không.

Có giải pháp nào để làm điều này?

Question 2

DIVkhông kích hoạt một resizesự kiện, vì vậy bạn sẽ không thể thực hiện chính xác những gì bạn đã mã hóa, nhưng bạn có thể xem xét giám sát các thuộc tính DOM .

Nếu bạn thực sự đang làm việc với một cái gì đó như có thể thay đổi kích thước và đó là cách duy nhất để div thay đổi kích thước, thì plugin thay đổi kích thước của bạn có thể sẽ triển khai một lệnh gọi lại của riêng nó.

Question 3

Tôi chỉ quan tâm đến trình kích hoạt khi chiều rộng của một phần tử bị thay đổi (tôi không quan tâm đến chiều cao), vì vậy tôi đã tạo một sự kiện jquery thực hiện chính xác điều đó, bằng cách sử dụng phần tử iframe ẩn.

$.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);
      };
  }
}

Nó yêu cầu css sau:

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

Bạn có thể thấy nó hoạt động ở đây widthChanged fiddle

Question 4

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

Question 5

Tôi đã tạo jquery plugin jquery.resize nó sử dụng resizeObserver nếu được hỗ trợ hoặc giải pháp dựa trên sự kiện cuộn marcj / css-element-queries , không có setTimeout / setInterval.

Bạn chỉ sử dụng

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

hoặc dưới dạng plugin chỉnh sửa

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

Tôi đã tạo điều này cho jQuery Terminal và trích xuất thành gói repo và npm riêng biệt, nhưng trong thời gian ngắn tôi đã chuyển sang iframe ẩn vì tôi gặp vấn đề với việc thay đổi kích thước nếu phần tử nằm bên trong iframe. Tôi có thể cập nhật plugin cho phù hợp. Bạn có thể xem plugin chỉnh sửa khung dựa trên iframe trong mã nguồn jQuery Terminal .

CHỈNH SỬA : phiên bản mới sử dụng iframe và thay đổi kích thước trên đối tượng cửa sổ của nó vì các giải pháp trước đó không hoạt động khi trang bên trong iframe.

EDIT2 : Vì iframe sử dụng dự phòng nên bạn không thể sử dụng nó với các điều khiển biểu mẫu hoặc hình ảnh, bạn cần thêm nó vào phần tử trình bao bọc.

EDIT3:: có giải pháp tốt hơn bằng cách sử dụng polyfill resizeObserver sử dụng trình quan sát đột biến (nếu resizeObserver không được hỗ trợ) và hoạt động ngay cả trong IE. Nó cũng có kiểu chữ TypeScript.

Question 6

cái này thì sao:

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 Tôi khuyên bạn nên thêm một id vào div và thay đổi $ ("div") thành $ ("# yourid"), nó sẽ nhanh hơn và nó sẽ không bị hỏng khi sau này bạn thêm các div khác

Question 7

Có một plugin thực sự đẹp, dễ sử dụng, nhẹ (sử dụng các sự kiện trình duyệt gốc để phát hiện) cho cả JavaScript cơ bản và jQuery đã được phát hành trong năm nay. Nó hoạt động hoàn hảo:

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

Question 8

Chỉ cửa sổ được hỗ trợ có nhưng bạn có thể sử dụng một plugin cho nó: http://benalman.com/projects/jquery-resize-plugin/

Question 9

Để tích hợp bản đồ google, tôi đang tìm cách phát hiện khi div đã thay đổi kích thước. Vì bản đồ google luôn yêu cầu kích thước thích hợp, ví dụ chiều rộng và chiều cao để hiển thị đúng.

Giải pháp mà tôi đưa ra là ủy quyền một sự kiện, trong trường hợp của tôi là nhấp vào tab. Tất nhiên, đây có thể là một thay đổi kích thước cửa sổ, ý tưởng vẫn như cũ:

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.maptrong trường hợp này là div bản đồ của tôi. Vì cha mẹ của tôi ẩn khi tải nên chiều rộng và chiều cao được tính là 0 hoặc không khớp. Bằng cách sử dụng, .bind(this)tôi có thể ủy quyền việc thực thi tập lệnh ( this.activate) cho một sự kiện ( click).

Bây giờ tôi tin rằng điều tương tự cũng áp dụng cho các sự kiện thay đổi kích thước.

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

Hy vọng nó sẽ giúp bất cứ ai!

Question 10

Chỉ cần thử func này (nó có thể hoạt động không chỉ với 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);
}

Bạn có thể sử dụng nó như thế này

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

CẬP NHẬT: Bạn cũng có thể sử dụng bộ theo dõi liên tục hơn (nó có thể hoạt động với mọi đối tượng, không chỉ các phần tử 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);
    }

Hãy thử nó:

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')})

Nó sẽ ghi 'thay đổi' mỗi khi bạn thay đổi trực tiếp b, a.foo hoặc a.ext

Question 11

Bạn có thể thay đổi văn bản hoặc Nội dung hoặc Thuộc tính của mình tùy thuộc vào Kích thước màn hình: HTML:

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

Javascript:

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

Question 12

Nếu bạn chỉ muốn thay đổi kích thước của chính div, bạn cần chỉ định điều đó trong kiểu css. Bạn cần thêm thuộc tính tràn và thay đổi kích thước .

Dưới đây là đoạn mã của tôi

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

<div id="div1">

</div>