LaravelCode

Search

How to Capture Browser Window Resize Event in JavaScript

Javascript
5767 views 4 years ago
post-title

Use the addEventListener() Method

You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window.addEventListener('resize', ...).

The following example will display the current width and height of the browser window on resize.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
    <div id="result"></div>
 
    <script>        
    // Defining event listener function
    function displayWindowSize(){
        // Get width and height of the window excluding scrollbars
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        
        // Display result inside a div element
        document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
    }
     
    // Attaching the event listener function to window's resize event
    window.addEventListener("resize", displayWindowSize);
    
    // Calling the function for the first time
    displayWindowSize();
    </script>
    <p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>

 

Random Articles
  • Google Bar Chart with Example VueJs
    Today,I will learn you how to create Google bar Charts in Vue js. we will show example of Vue Js Google bar Charts. I will make vue js google bar charts example.you can easyliy create google bar chart...
  • How to Change Column Name and Type in Laravel Migration
    In the working with MySQL database, sometimes you need to column type. You feel that the column you have created as enum should be integer or you want to add more option in enum. In that cases changin...
  • Angular 12 RxJs Observable Example
    In this&nbsp;tutorial we will cover an angular 12 overt example. you will learn angular 12 rxjs overt example. In this article, we will implement a angular 12 http overt example. i would relish to sho...
  • How to Count Number of Rows in a Table Using jQuery
    Use the length Property You can simply use the&nbsp;length&nbsp;property to count or find the number of rows in an HTML table using jQuery. This property can be used to get the number of elements i...
  • How to Convert Comma Separated String into an Array in JavaScript
    Use the split() Method You can use the JavaScript&nbsp;split()&nbsp;method to split a string using a specific separator such as comma (,), space, etc. If separator is an empty string, the string is...
Advertise