window.resize javascript – How to Capture Browser Window Resize Event in JavaScript?

0
()

window.resize javascript To add a resize event to the window, we can use the onresize() function in JavaScript.

window.resize javascript

you can trigger the resize event using window.dispatchEvent() method: Alternatively, you can use the window.resizeTo() to trigger the resize event. In jQuery, you can trigger the window resize event using the .trigger() method.

JavaScript window resize event

window.addEventListener('resize', function(event) {
    ...
}, true);

//OR

window.onresize = function(event) {
    ...
};

use the window.resizeTo() to trigger the resize event.

window.addEventListener("load", function() {
    window.resizeTo(
        window.screen.availWidth / 2,
        window.screen.availHeight / 2
    );
});
 
window.onresize = function() {
    alert('Handler for .resize() called!');
}

How to Capture Browser Window Resize Event in JavaScript

Use the addEventListener() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event - www.pakainfo.com</title>
</head>
<body>
<div id="output"></div>

<script>        
function userScreenWindwos(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    
    document.getElementById("output").innerHTML = "Total Width: " + w + ", " + "Height: " + h;
}
    
window.addEventListener("resize", userScreenWindwos);

userScreenWindwos();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>

Free Live Chat for Any Issue

Trigger window’s resize event with JavaScript/jQuery

$(document).ready(function() {
    $(window).trigger('resize');
});
 
$(window).resize(function() {
    alert('Handler for .resize() called!');
});
Edit in JSFiddle


Don’t Miss : Browser Window Resize Function With AngularJS

Download

I hope you get an idea about window.resize javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this Article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to make PHP Pagination With Example and Demo?

How useful was this post?

Click on a star to rate it!