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.
Add a comment
|
6 Answers
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.
Comments
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.
3 Comments
Marten Zander
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.
geeksal
@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.
Marten Zander
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
try this
$(window).on('resize', executeThisFunction);
1 Comment
Marten Zander
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.
You can also try this one
<body onresize="executeThisFunction()">
Comments
Using pure javascript you can check the HTML size
setInterval('checkHtmlSize()', 500);
Comments
var h = $('html').heigth();
$( window ).resize(function() {
if (h != $(this).height(){
// do your code
}
});
1 Comment
Marten Zander
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.