jQuery resize() example
jQuery resize() event is fire when the size of the browser is changed, and this event is only bind to $(window).
$(window).resize(function () {
$('#msg').text('Browser (Width : ' + $(window).width()
+ ' , Height :' + $(window).height() + ' )');
});
To get the browser’s width and height details, use $(window).width() and $(window).height().
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#browserInfo{
padding:8px;
border:1px solid blue;
width:300px;
}
</style>
</head>
<body>
<h1>jQuery resize() example</h1>
<h2>Try resize this browser</h2>
<div id="browserInfo">
</div>
<script type="text/javascript">
$('#browserInfo').text('Browser (Width : '
+ $(window).width() + ' , Height :' + $(window).height() + ' )');
$(window).resize(function () {
$('#browserInfo').text('Browser (Width : ' + $(window).width()
+ ' , Height :' + $(window).height() + ' )');
});
</script>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
how can i detect when a div’s height changes using jQuery?
I have tried the following code, but it’s not working.
$(“div[class=’box round first’]”).bind(“resize”, function() {
alert( $(this).outerHeight() );
});
according to the post, the resize event is only bound to the window object.
This appears to not be functional with browsers as of 2016 (specifically Chrome 54.0.x
THANKS!