Introduction to JavaScript onresize
The JavaScript onresize function is a property that can be used in event handling. It triggers whenever there is an event of resizing takes place. This event happens when the window of a particular page is resized. It is used to resize to different sizes. It can also be used with different internet browsers and used as per necessity. It is a part of the Document Object Model (DOM) and can be used very easily.
Syntax:
The JavaScript onresize function can be used as below:
window.onresize = functionName;The functionName is a function name or a function expression which will be receiving the FocusEvent object as its only argument. This function will be responsible for handling the argument sent by the FocusEvent object and take care of it.
We will also need the addEventListener() method which can be used as below:
object.addEventListener("resize", myCode);We use the above syntax for listening to the events.
How onresize Event works in JavaScript?
The working of the onresize function is very easy.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example helps in resizing an existing window and also keeps a count of it.</p>
<p>Let us resize the browser window.</p>
<p>Window has been <span id="demo">0</span> times.</p>
<script>
document.getElementsByTagName("BODY")[0].onresize = function() {myResizeFunction()};
var x = 0;
function myResizeFunction() {
var edu = x += 1;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>Here in the body we are printing the count of how many times the window is resized. The script that follows contains the onresize function. This function is calling the myResizeFunction(). We have then declared a variable x which will keep a count of the resizing. As mentioned above the onresize function takes the user defined function as a parameter and then performs its function. Here, in this function whenever the window is resized the count is incremented. It signifies that this function is calling onresize whenever the window is being resized. In addition to this we have some more functions for resizing.
When the first time program is run, then above output will be displayed. But when the window is resized then the counter will increase. To check it you can just minimize your browser window, the Event will be captured and the count will increase. Below is the output after resizing the page.
Examples of JavaScript onresize
Given below are the examples of JavaScript onresize:
Example #1
Let us see an example of resizing windows with using an <iframe>. Since the code will be running on an <iframe> there will be needed a setup that can help in actually seeing the resizing effect.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Changing thesize of the browser window to check the working of onresize event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<script>
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
function letsresize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = letsresize;
</script>
</body>
</html>In this program we have used two variables for accepting the height and width of the window. We make use of querySelector which helps us to store the height and width. The function letsresize() is making use of different functions.
These functions are as below:
- clientWidth, clientHeight
- innerWidth, innerHeight
- outerWidth, outerHeight
- offsetWidth, offsetHeight
These functions can help us in setting the height and width of window, client or the server. We have used one of these functions in order to set the size of the text as per the window being resized. After this, we are using the onresize function where we are calling the letsresize function. Below will be the output of the above code. As mentioned earlier you will have to set the <iframe> prior to running this program.
Output:
Example #2
The above resizing functions can also be used with addEventListener().
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resize Event for a Window</title>
</head>
<body>
<div id="result"></div>
<script>
// Function for Event Listener
function displayWinSize(){
// Acquiring width and height
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Display result of the element
document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
window.addEventListener("resize", displayWindowSize);
displayWinSize();
</script>
<p><strong>Note:</strong> Resizing the window is important to see the working</p>
</body>
</html>The above program display the width and height of the window at runtime. You can easily change the window size and see the numbers change dynamically. We have used clientWidth, clientHeight for getting the height and width as and when the event is triggered. Once we this these from the resizing functions we are displaying it by calling the function explicitly. The displayWinSize hence helps us in getting the accurate height and width of the window. This is supported by all browsers that we use. You can use these functions and get real-time size of window when they are being used. Below is the output of the above program. We have first run the program when the window was full size.
Output:
To see the change in resize figures you will have to minimize the screen. You can also resize by using the mouse and dragging it at your convenience. It will work as per expectation. The additional functions can also help you in gaining the inner height and width and also outer height and width in addition to the complete window height and width. The next output is when we minimize the window.
Output:
Conclusion
The onresize function is hence a useful function that helps us in getting the window sizes. It is triggered with the help of a user defined function. This function can have an event listener check when the window is being resized. It is useful in getting different window sizes. It is supported by all browsers which are used in our day-to-day life. onresize function helps in getting dynamic window sizes which can be used when a particular event happens.