Updated April 1, 2023
Introduction to jQuery Window resize
Jquery window resize is defined as reshaping of the window when a resize or reshape event has been occurred where this event is usually triggered by a jquery method called as resize() which takes no parameters instead we can pass a function which may contain logic to run the resize event but this passing of the function is an optional argument for the resize() method. In general, resizing itself means shaping the window according to the web pages which makes the websites responsive where this resize event may take place and hence the resize() method is called to adjust the window size accordingly to the web pages that are being displayed either in laptops, mobile phones, tabs, etc.
Working of jQuery Window resize() Method with Examples
In this article, we will discuss how the resize() method works for windows resizing which is provided by jquery. The resize() method is a function that is used or we can better say it as it would be triggered by a resizing of window event where we are seeing the shaping of the browser window whenever there is a change in the browser window such that minimizing the browser tab or maximizing, etc events may lead to trigger a resize() method in jquery. This method takes the function as the argument where this function has the definition to the resize event or the method is attached with the event handler which has resize event that occurs when this method is called.
Now let us see the syntax of the resize() method with examples:
Syntax:
$(selector_name).resize();Parameters:
- Function_resize: this parameter is optional which is used for specifying the call to this function which consists of logic to run the resize event whenever the resize() method is called.
This function returns a certain numeric value that specifies the number of times the window has been resized.
Example of jQuery Window resize
Let us discuss examples of jQuery Window resize.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba- jQuery Resize()</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#wsize{
color: red;
float left;
margin: 10px;
}
#resized_div {
width: 100px;
height: 100px;
float: left;
padding: 20px;
margin: 20px;
background-color:blue;
}
</style>
<script>
var i=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(i++);
});
});
</script>
</head>
<body>
<h1> Demonstration of resize() method with fucntion having resize event. </h1>
<h2 id = wsize>Change the size of your browser window </h2>
<div id= resized_div> Window is Resized <b> <span> 0 </span></b> times.</div>
</body>
</html>Output:
In the above program, we can see we have defined a jquery code inside the script tag in the head tag which is placed inside the HTML structure. We are firstly declaring the variable “i” because to store the numeric value of the count of the window resizing. In the above code, the jquery code starts with the “$” symbol, and then we are defining the document. ready function to tell the jquery that the document is ready for making changes to the page and this function runs only once. Then we define a window.resize() method for resizing the window of the browser and to trigger the resize event every time the window is minimized, maximized, etc can be done by defining a function in which we are just incrementing the count of resizing of the window each time when you resize the browser window and this function is passed to the resize() method so that it can display the number of times the browse window has been resized. This program’s output can be seen in the above screenshot when the code is executed it will give the count 0 then after we keep resizing the browser window it increments the count and displays as “window is resized ____ times”.
Now let us see another simple example of how the resize() method can have the function that can include seeing the window width and height after resizing the browser window and this done using window.width() and window.height() in the function which is passed as the argument to the resize() method.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba- jQuery Resize()</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#hd {
color: red;
margin: 10px;
padding; 10px;
float left;
}
#hw {
color: blue;
margin: 10px;
padding: 10px;
float left;
}
</style>
</head>
<body>
<h1 id = hd> Demonstration of resize() method with fucntion having resize event. </h1>
<h2 id = hw>Change the size of your browser window </h2>
<div> Window is Resized <b> <span> 0 </span></b> times.</div>
<script>
var i=0;
$(document).ready(function(){
$( window ).resize(function() {
$( "body" ).prepend( "<div>" + "The width of the window after resizing is " + $( window ).width() + "</div>" );
$( "body" ).prepend( "<div>" + "The height of the window after resizing is " + $( window ).height() + "</div>" );
});
});
</script>
</body>
</html>
In the above program, we can see we have defined a jquery code with $ sign and made the document ready for making the changes to the pages. Then we define the window resize()method to which a function is passed as an argument and this function includes the display of window width using the window.width() function and window height is displayed using the window.height() function and the values change each time the window is resized. In the above screenshot the first we can see no display of window height and width as we have just executed the code and we have triggered the resize event so when the browser window is changed or reshaped we can see the display of window height and width on the browser page which can be seen in the second screenshot.
Conclusion
In this article, we conclude that jquery provides a method for reshaping the browser window and also gets a count of how many times the window has been resized using this resize() method. In this article, we saw how to resize an event is defined in a function and passing this function as resize() function’s argument with syntax and example. In this article, we also saw how we can even get the width and height of the window after resizing the window and this is also defined inside a function and passing this function as an argument to the resize() method. So the resize() function is just a shorthand for many other functions like .on(‘resize’, handler) we can also detach such function by using .off(‘resize’).
Recommended Articles
This is a guide to jQuery Window resize. Here we discuss the Introduction, Working of jQuery Window resize() Method and examples with code implementation respectively. You may also have a look at the following articles to learn more –
