JQuery Resize

Question

I am new to jQuery. So naked with me.

I am trying to make a script that will execute a function of equal height over a specific resolution.

After this permission, I would like the script to be disabled, as columns of equal height go to the mobile version of the site.

I would like this to be done when resizing as well. Here is my code so far. This does not work at all.

The stretch function is executed and has been tested outside the width check function.

Here is my code:

Original Stretch Function

$(document).ready(function () { var $stretch = $(".eq"); $stretch.animate({ height: $stretch.parent().height() }, 300 ); }); 

Resize function that doesn't work

 $(document).ready(function() { // Optimalisation: Store the references outside the event handler: var $window = $(window); var $stretch = $("#narrow") var $stretch2 = $(".eq") function checkWidth() { var windowsize = $window.width(); if (windowsize > 440) { //if the window is greater than 440px wide then turn on jScrollPane.. $stretch.animate({ height: $stretch.parent().height() }, 800 ); $stretch.animate({ height: $stretch2.parent().height() }, 300 ); } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); }); 

How can i do this?

Answer 1

For the jquery part

 $(window).resize(function() { // do your stuff here checkWidth(); }); 

If you use media queries with js combination, keep in mind that the width of the media request and $(window).width() are different due to the scroll bar.

Answer 2

I would highly recommend using CSS instead of jQuery for such a thing. A responsive user interface can be handled by a media request as follows:

 @media screen and (max-width: 1200px) { body{ width:1000px; } } @media screen and (max-width: 440px) { body{ width:440px; } } 

There are many great tools that make it easy for you, one of the most popular Twitter bootstraps .