X

LATEST #JQUERY NEWS

Using jQuery’s .resize() Method


jQuery’s .resize() method is a cool way to have an event triggered or have a function executed when something is resized. For the purposes of this tutorial, we’re going to show you how to use the .resize() method to trigger an alert method whenever the window is resized. You might be surprised at how easy this functionality is to add to any of your code.

In terms of syntax, the .resize() method is used in much the same was as any other jQuery method. Take a look at the snippet below to get a look for yourself:

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

That’s all it takes to use the resize method to trigger an alert message once the window has been resized. Feel free to use the code and change the alert message to say whatever you like. Just be aware that if you are going to use this code, the alert messages that will appear will likely be very annoying for the user, as an alert will pop up whenever the window changes size, even if it happens in one fluid motion. Making the window 50px less wide will send 50 alert messages. Still, the concept behind the .resize() method is pretty neat, and a lot of different functionalities can be achieved by using it.

Recently Published

article image
»

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins Dropdown menus are mostly used for website ...

article image
»

20 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Tooltips are a great option for showing extra ...

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...