javascript - Resize on div element - Stack Overflow

admin管理员组

文章数量:1134241

jQuery has the resize() - event, but it just work with window.

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

This works fine! But when I want to add the event to a div element it doesn't work.

E.g.

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

I want to start an callback when the size of a div-element has changed. I don't want to start a resizable - event – just a event to check if the size of a div - element has changed.

Is there any solution to do this?

jQuery has the resize() - event, but it just work with window.

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

This works fine! But when I want to add the event to a div element it doesn't work.

E.g.

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

I want to start an callback when the size of a div-element has changed. I don't want to start a resizable - event – just a event to check if the size of a div - element has changed.

Is there any solution to do this?

• javascript
• jquery

Share Improve this question Follow edited Feb 27, 2018 at 9:34 Paolo Forgia 6,74888 gold badges5050 silver badges5959 bronze badges asked Apr 10, 2012 at 10:04 TJRTJR 6,5771010 gold badges4141 silver badges6565 bronze badges 3

• 3 resize events are only fired on window(s) objects (and iframes maybe?). – BiAiB Commented Apr 10, 2012 at 10:07
• 3 have a look at this page - benalman.com/code/projects/jquery-resize/examples/resize – Elen Commented Apr 10, 2012 at 10:08
• 1 This might help: resizeObserver. developer.mozilla.org/en-US/docs/Web/API/ResizeObserver. Supported by Chrome 64, Firefox 69... – captain puget Commented Jan 9, 2020 at 18:25

Add a comment  | 

14 Answers 14

Sorted by: Reset to default 36

DIV does not fire a resize event, so you won't be able to do exactly what you've coded, but you could look into monitoring DOM properties.

If you are actually working with something like resizables, and that is the only way for a div to change in size, then your resize plugin will probably be implementing a callback of its own.

I was only interested for a trigger when a width of an element was changed (I don' care about height), so I created a jquery event that does exactly that, using an invisible iframe element.

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

It requires the following css :

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

You can see it in action here widthChanged fiddle

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

I've created jquery plugin jquery.resize it use resizeObserver if supported or solution based on marcj/css-element-queries scroll event, no setTimeout/setInterval.

You use just

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

or as resizer plugin

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

I've created this for jQuery Terminal and extracted into separated repo and npm package, but in a mean time I switched to hidden iframe because I had problems with resize if element was inside iframe. I may update the plugin accordingly. You can look at iframe based resizer plugin in jQuery Terminal source code.

EDIT: new version use iframe and resize on it's window object because the previous solutions was not working when page was inside iframe.

EDIT2: Because the fallback use iframe you can't use it with form controls or images, you need to add it to the wrapper element.

EDIT3:: there is better solution using resizeObserver polyfill that use mutation observer (if resizeObserver is not supported) and work even in IE. It also have TypeScript typings.

There is a really nice, easy to use, lightweight (uses native browser events for detection) plugin for both basic JavaScript and for jQuery that was released this year. It performs perfectly:

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

There now exists Resize Observer

You could use it like so:

const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(console.log);
})
resizeObserver.observe(document.getElementById("ExampleElement"));

what about this:

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 I suggest you to add an id to the div and change the $("div") to $("#yourid"), it's gonna be faster, and it won't break when later you add other divs

Only window is supported yes but you could use a plugin for it: http://benalman.com/projects/jquery-resize-plugin/

A very simple implementation.

    <script>
    var move = function(e) {
        if ((e.w && e.w !== e.offsetWidth) || (e.h && e.h !== e.offsetHeight)) {
            new Function(e.getAttribute('onresize')).call(e);
        }
        e.w = e.offsetWidth;
        e.h = e.offsetHeight;
    }
    var resize = function() {
        console.log('Resized')
    }
    </script>

    <style>
    .resizable {
        resize: both;
        overflow: auto;
        width: 200px;
        border: 1px solid black;
        padding: 20px;
    }
    </style>

    <div class='resizable' onresize="resize(this)" onmousemove="move(this)">
      Pure vanilla implementation
    </div>

For a google maps integration I was looking for a way to detect when a div has changed in size. Since google maps always require proper dimensions e.g. width and height in order to render properly.

The solution I came up with is a delegation of an event, in my case a tab click. This could be a window resize of course, the idea remains the same:

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 in this case is my map div. Since my parent is invisible on load, the computed width and height are 0 or don't match. By using .bind(this) I can delegate the script execution (this.activate) to an event (click).

Now I'm confident the same applies for resize events.

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

Hope it helps anyone!

You can change your text or Content or Attribute depend on Screen size: 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>

document.addEventListener('transitionend', function(e) {
  if ($(e.target).is("div")) {
    $("div").text("width: "+$("div").width());
  }
});
$("div").css({"width":"150px"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100px;transition-delay: 0.000000001s;">width: 100</div>

I added a timer so the event does only trigger every 500ms. Additionally a flag is implemented to avoid a false trigger while loading the page.

let lastExecutionTime = 0;
let isFirstRun = true; // Flag to ignore the first trigger


const resizeObserver = new ResizeObserver((entries) => {

    if (isFirstRun) {
    isFirstRun = false; // Skip the first call
    return;
  }
  const currentTime = Date.now();

  // Check if enough time (500ms) has passed since the last run
  if (currentTime - lastExecutionTime >= 500) {
    lastExecutionTime = currentTime;

    // Callback logic
    entries.forEach((entry) => {
      console.log("Throttled resize:", entry); // show in console that it works
      // Your logic goes here
      
    });
  }
});


// register div which you want to monitor
resizeObserver.observe(document.getElementById("DivId"));

If you just want to resize the div itself you need to specify that in css style. You need to add overflow and resize property.

Below is my code snippet

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

<div id="div1">

</div>

本文标签： javascriptResize on div elementStack Overflow