jQuery not detecting div resize

Question

UPDATE: since everyone is hung up on window resize

I've got a div inside a resizable div and I want to detect the resize of the child div. I know .on('resize') is only for the window. My question is solely based on the child div resize.

<div id='main_wrapper'>
  <div id = 'child_div'>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#main_wrapper {
  height: 300px;
  width: 300px;
  background-color: blue;
}

#child_div{
  height: 100%;
  width: 100%;
}

$('#main_wrapper').resizable();

$('#child_div').on('resize', function() { //i know this isn't proper, how to do this is my question.
  alert('i changed');
})

https://jsfiddle.net/cyclingpaper/2kksqoLs/

Thanks for your time.

What's going to make this div change size? You're setting percentages for the height and width, these are surely only going to change on window resize? — Daniel Dewhurst, Dec 10 '15 at 12:22
Not necessarily. If I had a jQuery UI resizealbe() function enabled on the div, then the window size wouldn't be changing. There are a couple other instances that I could list. I'm just curious on how to detect the resize of a div. (div inside a div) — Cycling Paper, Dec 10 '15 at 12:27
@CyclingPaper Did you even see my answer man? I gave the right answer and that has now been pushed to the last because of the downvotes. Please read my answer and give me your honest comments. — Praveen Kumar Purushothaman, Dec 10 '15 at 12:49
@PraveenKumar I've got the jsfiddle updated with the code that shouldn't work... but now is... I thought .on('resize') didn't apply to divs, but in my jsfiddle it is clearly working now. What is up with this function? Does it work for divs or not? — Cycling Paper, Dec 10 '15 at 14:16

score 1 · Answer 1 · answered Dec 10 '15 at 12:24

1

The resize event is only targetted by the window object. You can't attach it to another DOM tree element than the most top.

https://developer.mozilla.org/en-US/docs/Web/Events/resize

answered Dec 10 '15 at 12:24

Marcos Pérez Gude

21,869
4
38
69

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

Post Edited: Downvoters please remove the downvotes for no reason / anger!

The resize event is for window only, not for elements. Use this code instead:

$(window).on('resize', function(){
  alert('i changed');
});

Fiddle: https://jsfiddle.net/effsmpdm/

Take a look at this http://benalman.com/code/projects/jquery-resize/examples/resize/

It has various examples. Try resizing your window and see how elements inside container elements adjusted.

Example with js fiddle to explain how to get it work.
Take a look at this fiddle http://jsfiddle.net/sgsqJ/4/

In that resize() event is bound to an elements having class "test" and also to the window object and in resize callback of window object $('.test').resize() is called.

e.g.
$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

Source: How to detect DIV's dimension changed?

edited May 23 '17 at 12:09

Community

1
1

answered Dec 10 '15 at 12:22

Praveen Kumar Purushothaman

164,888
24
203
252

I know how to do that. I need to know how to check for a div resize. – Cycling Paper Dec 10 '15 at 12:25
@CyclingPaper Added a solution for your issue. – Praveen Kumar Purushothaman Dec 10 '15 at 12:27
@CyclingPaper Did you even see my answer man? I gave the right answer and that has now been pushed to the last because of the downvotes. Please read my answer and give me your honest comments. – Praveen Kumar Purushothaman Dec 10 '15 at 12:52
I didn't down vote this. It also isn't working for me. If $('#main_wrapper').bind('resize') is how that works, it isn't for me. And the $(window).resize isn't what I'm looking for. I'm going to remake this question, I just remade my jsfiddle to better reflect my question so people don't get hung up on the window events. – Cycling Paper Dec 10 '15 at 12:56
@CyclingPaper FYI `Uncaught RangeError: Maximum call stack size exceeded`. – Jai Dec 10 '15 at 12:56
@CyclingPaper Can you post the updated fiddle please? I am ready to solve the issue. – Praveen Kumar Purushothaman Dec 10 '15 at 13:03
It should now be updated, I'll leave this question since I don't want to use a flag on this. – Cycling Paper Dec 10 '15 at 13:10
@CyclingPaper I will try to solve it. Lemme see. – Praveen Kumar Purushothaman Dec 10 '15 at 13:10
@CyclingPaper Lemme ask you one question. When does the div trigger resize event, or when will it get resized? What actions of user or the browser will make the div to resize? – Praveen Kumar Purushothaman Dec 10 '15 at 13:11
I guess the easiest way of describing it would be I am dynamically loading a new div, with children divs. The parent div will have resizable handles and the child div position is dependent on the parent size. So I need the child position to change while the parent is resized. – Cycling Paper Dec 10 '15 at 13:18
@CyclingPaper Interesting. Can we see it somewhere live? – Praveen Kumar Purushothaman Dec 10 '15 at 13:18
I mean, I guess I could update the jsfiddle again. Give me a bit and I'll comment when I have it updated. – Cycling Paper Dec 10 '15 at 13:20

score 0 · Answer 3 · edited Dec 10 '15 at 12:36

0

Here you go:

https://jsfiddle.net/danhaswings/ejoxphov/2/

You can't bind the resize event to anything other than the window.

// cache objects
var $main_wrapper = $('#main_wrapper');

// on window resize
$(window).resize(function() {

    console.log('The window has resized.');

    // random example to run on window resize
    $main_wrapper.css({
        'background-color': 'red'
    });

});

edited Dec 10 '15 at 12:36

Praveen Kumar Purushothaman

164,888
24
203
252

answered Dec 10 '15 at 12:26

Daniel Dewhurst

2,533
2
21
39

What if the `.main_wrapper` needs to be of fixed width and it is changing by height? – Praveen Kumar Purushothaman Dec 10 '15 at 12:30
That's nothing related to the question. – Daniel Dewhurst Dec 10 '15 at 12:31
You are totally changing the OP's CSS. – Praveen Kumar Purushothaman Dec 10 '15 at 12:32
I am removing my downvote. I am not able to argue for this answer and don't wanna lose my rep on this. Moreover, I am sure, if you understand what I mean, you will change your answer, coz it is not the right expected one. Will you remove your downvote on mine if you had done? – Praveen Kumar Purushothaman Dec 10 '15 at 12:36
Still.. Not looking for a window event. I know how to do exactly what you just posted and I clarified that in my op. I want to know how to detect specifically a div change in size. I don't care about the window, checking for the window resize doesn't help in my project. – Cycling Paper Dec 10 '15 at 12:43
Just cache the width and height of the div, and check it again on whatever event might change the size. – Daniel Dewhurst Dec 11 '15 at 10:33

jQuery not detecting div resize

3 Answers3