0

I am wondering how I can trigger a function using Jquery as soon as my $('html') resizes.

I tried:

$('html').on('resize', executeThisFunction);

But it looks like the event ist only triggering on the window element.

beerwin
  • 9,813
  • 6
  • 42
  • 57
Marten Zander
  • 2,385
  • 3
  • 17
  • 32

6 Answers6

1

html doesn't fire a resize event, but you could look into monitoring DOM properties, or a plugin as described in this thread

window does fire have a resize event which is why it's working.

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

Technically speaking it is the window which resizes, not html. Hence you need to trigger resize on window object.

You can try this way

$(document).ready(function () {

    $(window).resize(function(){

        //your code to be triggered on resize goes here
        }
    });

     //triggering resize whenever your window is resized        
    $(window).trigger('resize');
}

Update

As asked in comment by OP user, if one needs to call a function when the content of div or html changes than it can be achieved in following way

$('html').bind("DOMSubtreeModified",function(){
      //your code goes here
});

This method has a drawback that it is fired every time if there is a slight change in DOM tree. To overcome this you can use alternative method as follows:

$('#anydiv').bind('DOMNodeInserted DOMNodeRemoved', function() { 
    //your code goes here
});

Note: Opera and IE does not support DOMSubtreeModified. Also this event is depreciated. It is recommended to use MutationObserver instead.

geeksal
  • 4,856
  • 3
  • 24
  • 47
  • Okay, i know that the window is triggering the event but if you guys would have read carefully, you would know that I want to fire a function if the height of my HTML changes, not the window. – Marten Zander Aug 10 '16 at 13:32
  • 1
    @MartenZander What do you mean by height of html?. html is represented by DOM structure which is nothing but your _document_ object in javascript, this DOM is rendered in your browser window and html occupy the width and height of the window. Hence when window resizes so does the html. – geeksal Aug 10 '16 at 13:40
  • I am adding content dynamically which changes the size of the Document without changing the actual window Size. Thats why I have to trigger a function as soon as my document extends – Marten Zander Aug 10 '16 at 13:51
0

try this

$(window).on('resize', executeThisFunction);
Ivan Karaman
  • 1,224
  • 1
  • 7
  • 11
  • Okay, i know that the window is triggering the event but if you guys would have read carefully, you would know that I want to fire a function if the height of my HTML changes, not the window. – Marten Zander Aug 10 '16 at 13:32
0

You can also try this one

<body onresize="executeThisFunction()">
Prakash Bhavnath
  • 269
  • 2
  • 10
0

Using pure javascript you can check the HTML size

setInterval('checkHtmlSize()', 500);
Maxim
  • 98
  • 7
-1
var h = $('html').heigth();
    $( window ).resize(function() {
       if (h != $(this).height(){
        // do your code
        }
    });
Adrian
  • 171
  • 1
  • 6
  • Okay, i know that the window is triggering the event but if you guys would have read carefully, you would know that I want to fire a function if the height of my HTML changes, not the window. – Marten Zander Aug 10 '16 at 13:32