Cross-Browser Window Resize Event Using JavaScript/jQuery
In this post, two methods are adapted to resize the window based on JavaScript and jQuery. In the first method, the addEventListener() method is employed to extract the width as well as height of the resize browser window. In the second method, the window.resize() method computes the number of times the browser is resized. The browser window can be maximized or minimized depending on the user’s needs.
This post serves the following learning outcomes:
Method 1: Resize the Window Using JavaScript
In JavaScript, the addEventListener method is utilized by passing the “resize” value. It returns the page height and page width of the window by maximizing or minimizing the window. The event is triggered when the browser changes the size of the window. Moreover, the user can specify an element or selector for invoking the window resize event. All the latest browsers (Opera, Chrome, Edge, Safari, etc.) support this method.
The syntax of the addEventListener() method (w.r.t to the resize functionality of the window) is provided below:
Syntax
The above-written syntax can be described as
The addEventlistener method is bound with the ‘resize’ property of the window. Moreover, the function will be called if the resize of the window is detected.
Example
The following example code shows the usage of JavaScript’s addEventListener() method.
Code
div {
background-color: lightpink;
width: 40%;
} span { font-size: 20px;}</style>
<h2> Example of Resizing the Window </h2>
<div><span>Page Width = <span class="width"></span></span>
<span>Page Height = <span class="height"></span></span></div>
<script>
display();
window.addEventListener('resize', display);
function display() {
document.querySelector('.height').innerText = document.documentElement.clientHeight;
document.querySelector('.width').innerText =
document.documentElement.clientWidth;
}
</script> </head>
</body></html>
The description of the above code is described here:
- A section is specified with <div> tag in which different styling properties such as background color, and width are mentioned.
- After that, the Page Width and Page Height of the current window is displayed using the span class, which is used to represent inline content.
- The window.addEventListener() method is triggered by passing the resize value as an argument.
- Furthermore, a display() method is called within <script> tags. The width and height of the window are dynamically updated by passing values .height and .width. These values are associated with the HTML elements.
Output
The output is explained here:
- A message is displayed first with heading tags.
- Initially, the Page Width and the Page Height of the existing window are set to 567 and 304 pixels, respectively.
- The values of Page Width and Page Height are updated according to the dimension of the current window.
Method 2: Resize the Window Using jQuery
The window.resize() method of jQuery is employed to extract the width and height of the browser. It returns the values that show how many times the window has been resized by maximizing or minimizing it. The syntax of the resize() method is provided below:
Syntax
The window element represents that the resize method is being applied to the window. You can pass any function as an argument to the resize() method. By doing so, the function is executed on the resizing of the window.
Example
Let’s understand the concept using the following example.
Code
<body>
<h2>Example of resizing browser window.</h2>
<p>Resize the Window about <span>0</span> times.</p>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>var i = 1;
$(document).ready(function() {
$(window).resize(function() {
$("span").text(i += 1);
});});
</script></html>
In this code:
- First, import the jQuery within the <script> tags.
- After that, a variable i is initialized with the value 1.
- After that, the document.ready() method is utilized to check if the document is ready for resizing.
- In this method, window.resize() method is executed that extracts the content of the browser window using $(“span”).text property.
Output
The output shows the execution of the above code. It displays a value that dynamically updates with the size of the window screen. It represents the number of times the window resizes.
Conclusion
The addEventListener() method of JavaScript reports the height and width of resizing windows dynamically. While the window.resize() method of jQuery returns the number of times the window is being maximized or minimized. You have learned two different methods to detect the cross-browser window resize event using jQuery and JavaScript.
Source: linuxhint.com