1

I want to run a JavaScript function when the width of an element grows to a certain size. Listeners properly speaking only seem to be for 'events.' But is there any way to set a "listener" on a CSS attribute, like width? If so, how?

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
JohnK
  • 6,865
  • 8
  • 49
  • 75
  • 1
    It is possible. Based on the width – DaniP Jan 03 '14 at 21:07
  • 1
    @Danko: How is this possible? – gen_Eric Jan 03 '14 at 21:08
  • 1
    Check http://stackoverflow.com/questions/10086693/jquery-resize-on-div-element – Zlatko Jan 03 '14 at 21:11
  • 1
    Look at this post http://stackoverflow.com/questions/8053583/jquery-resize-listener-on-a-div – Merlin Jan 03 '14 at 21:12
  • 1
    Or this one http://stackoverflow.com/questions/9255162/detect-if-an-element-has-been-resized-via-javascript – Palpatim Jan 03 '14 at 21:14
  • 1
    Why is everyone directing OP to jQuery solutions when there's no indication that jQuery is being used? – cookie monster Jan 03 '14 at 21:16
  • 1
    @cookiemonster, thanks for your defense! Everyone these days needlessly assumes that jQuery is open. In the past I would have preferred straight JS, but in this case jQuery is fine--I should have written more clearly. I would like to note, that I'd prefer not to use plugins. – JohnK Jan 03 '14 at 21:33

3 Answers3

2

If you are specifically looking to listen for an attribute change on a DOM element, you can use a MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) with a fallback to Mutation events (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) in modern browsers.

If it is not an attribute change but another event that causes the DOM element to change sizes, you can hook into the event, for example, if it is a window resize that causes the change, you can bind that event with the following code (note that IE 8 and older will need a fallback):

window.addEventListener("resize", function(e){});

If the change in width is caused by a JavaScript library, there will likely be an API for it, or a function you can override to create one.

As a last resort, you can poll the DOM element using setInterval or requestAnimaitonFrame, depending on how often you need to check the element.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
1

If you have the need to listen to an element size in 2020 you can use a ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

You can try the following snippet to print the dimension changes of an element

const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) 
        console.log(entry);
});

resizeObserver.observe(htmlElement);
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Gustavo Ulises Arias Méndez
  • 405
  • 2
  • 13
-1

If you are using jQuery, you can use resize event to identify the width.

http://api.jquery.com/resize/

EDIT: Working example added

http://jsfiddle.net/addy2601/5LX6A/

$( '#div' ).resize(function() {
//Your code here
});
addy2601
  • 387
  • 2
  • 12
  • 2
    That's of the browser window, not of a specific element (which is what he wants). – gen_Eric Jan 03 '14 at 21:09
  • 1
    Note that only the window has a resize event – adeneo Jan 03 '14 at 21:10
  • From the linked document: "The resize event is sent to the window element when the size of the browser window changes". – JohnK Jan 03 '14 at 21:26
  • @RocketHazmat & adeneo - I have updated the answer with JSFiddle sample. Johnk - please try and let me know if it doesn't work. – addy2601 Jan 03 '14 at 21:44
  • 1
    Your jsFiddle example uses jQuery UI to create a [resizable](http://jqueryui.com/resizable/) div. The `resize` event is being manually triggered by jQuery when that div is resized. This won't work if the div is resized by any other method. I doubt this is what the OP wants. – gen_Eric Jan 03 '14 at 21:46