jQuery: How do I set a variable on page load, on page resize destroy the variable, and then load a new variable?
<p>So I'm using some jQuery that I found online.  There's a lot of variations of it that all do the same thing to help you create divs of equal height.  The code I'm using is like so when I load a page.</p>

<pre><code>    var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);
</code></pre>

<p>Works like a charm.</p>

<p>To get this to work when resizing the browser window, I re-use the same code from above but just put it inside the resize function:</p>

<pre><code>    $(window).resize(function() {
var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);
});
</code></pre>

<p>Here's the challenge: I'm using the 1140grid with responsive layout (http://cssgrid.net/).  It resizes divs as you resize the window.  So my divs are shrinking in width and the 2nd set of code above works great when the window resizes.</p>

<p>The problem I'm having and would love insight from anyone is how do I destroy the value of the min height on page resize, then run the function again to get the new min-height from the tallest div?  The problem is that once the div becomes tall and I resize the window to be wider, the div needs to decrease in height but it is staying with the highest div min-height it reached.  This will allow me to constantly update the min-height of the div with a new value and re-calcuate the actual height of the largest div.</p>
