• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Detect Window Resize

Using jQuery to Detect Window Resize

April 27, 2022 Leave a Comment

We can use jQuery to detect a window resize by using the jQuery resize() method on the window object.

$(window).resize(function(){
  //Do something when the user resizes the window
});

Let’s see a simple example of this below.


Let’s say we have the following jQuery code:

$(window).resize(function(){
  alert("The window has been resized.");
});

No matter what our HTML code is, the alert box will show if the user ever resizes their browser window. The function will also run every time the user resizes the window.

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery(window).resize(function(){
  alert("The window has been resized.");
});

Let’s take a look at this for ourselves in the example below.

Using jQuery to Run HTML When the Window Resize

In this example, we will have a div with a background color. When we resize the window, we will change the color of our box div.

Here is our HTML setup:


<style>#div1 { height: 300px; width: 300px; border: 1px solid #444; background: #7bbfa2; }</style>
<div id="div1"></div>
<p>Resize the window to change the color of the box.</p>
<p>Notice every time the box color changes when you drag the corner of the browser window to resize it.</p>

When we resize the window, we will generate a random color and then change the background color of the div.

We will detect the window resize using the jQuery resize() method.

Here is our JavaScript and Query code:


//The genRandomColor function below will generate a random color for us
function genRandomColor() {
  var letters = '0123456789ABCDEF';
  var randomColor = '#';
  for (var i = 0; i < 6; i++) {
    randomColor += letters[Math.floor(Math.random() * 16)];
  }
  return randomColor;
}

//When a resizing of the browser is detected, the function below will run
//It will run every time the browser is being resized.
$(window).resize(function(){
  $('#div1').css("background-color", genRandomColor());
});

The final code and output for this example of how to detect and change some HTML on a window resize is below:

Code Output:

Resize the window to change the color of the box.

Notice every time the box color changes when you drag the corner of the browser window to resize it.

Full Code:


<style>#div1 { height: 300px; width: 300px; border: 1px solid #444; background: #7bbfa2; }</style>
<div id="div1"></div>
<p>Resize the window to change the color of the box.</p>
<p>Notice every time the box color changes when you drag the corner of the browser window to resize it.</p>

<script>

function genRandomColor() {
  var letters = '0123456789ABCDEF';
  var randomColor = '#';
  for (var i = 0; i < 6; i++) {
    randomColor += letters[Math.floor(Math.random() * 16)];
  }
  return randomColor;
}

$(window).resize(function(){
  $('#div1').css("background-color", genRandomColor());
});

</script>

Hopefully this article has helped you to understand about jQuery window resize.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Set a Radio Button to Checked
  • 2.  Get the Window Scroll Position Using jQuery
  • 3.  jQuery fadeOut – Fading Out Element in HTML
  • 4.  Using jQuery to Change Image src
  • 5.  How to Check if Element Exists Using jQuery
  • 6.  Using jQuery to Get the Previous Sibling of an Element
  • 7.  How to Clear an Input Field Using jQuery
  • 8.  Using jQuery to Get the Top Position of Element
  • 9.  Using jQuery to Add a Sibling to an Element
  • 10.  jQuery delay – How to Delay the Start of a Method

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy