Question

I am loading an equalheights function on browser load if the window is wider than ‘x’. I am also wanting to do another check for ‘x’ on browser resize to ‘retest’ if I want to add my function.

Not sure how to do this:

// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query
jQuery(document).ready(function($) {
    //set the initial values
    detectorColumn = jQuery('.js');
    compareWidthColumn = detectorColumn.width();
    smallScreenColumn = '481';

    if ($(window).width() > smallScreenColumn) {
        $('#sidebar_right').equalHeights();
    }    

    jQuery(window).resize(function() {
        //compare everytime the window resize event fires
        if (detectorColumn.width() != compareWidthColumn) {

            //a change has occurred so update the comparison variable
            compareWidthColumn = detector.width();

            if (compareWidthColumn > smallScreenColumn) {
                $('#sidebar_right').equalHeights();
            }
        }

    });
});

The entire concept is that I am only wanting to apply ‘equalHeights’ if the browser is wider than 481px. This is being applied to a fluid layout and I expect the user to be resizing their browser, hence the call to resize.

Problem:
The initial load works right, the equalHeight is only called if the window is wider than 481px. The problem is if the user starts with the browser wider than 481 px, and shrinks it down, the equalHeight is not being removed.

How do I fix this?
*my attempt at learning jQuery, so kinda new.

EDIT
It was mentioned in the comments that I had different things being measured so I tried this as well:

jQuery(document).ready(function($) {
    //set the initial values
    detectorColumn = jQuery('.js');
    compareWidthColumn = detectorColumn.width();
    smallScreenColumn = '481';

    if ($(window).width() > smallScreenColumn) {
        $('#sidebar_right').equalHeights();
    }    

    jQuery(window).resize(function() {

            if ($(window).width() > smallScreenColumn) {
                $('#sidebar_right').equalHeights();
            }
    });
});

I am still having the issue of the equalHeights not ‘remeasuring’ the elements on screen resize, and not removing itself if the screen is less than 480px.

EDIT 2*
I should mention the reason I was using 2 different measurements is before this script, i am declaring some global variables:

This is above my script at the top of my jquery page.

// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query

My idea was that if I declared those outside of the function that they would be storing the values. Then when the screen resizes, it would be comparing the new value to the global value, then if there is a change, redo the function.

Is that bad logic?

Answer 1

Maybe I’m missing something here but the following simple approach should work (well at least it will do something):

$(function() {
    var $sidebar_right = $('#sidebar_right'),
        smallScreenColumn = 481;
    $(window).on('resize', function() {
        $sidebar_right.height('auto');//remove previously applied equalHeights.
        if($(window).width() > smallScreenColumn) {
            $sidebar_right.equalHeights();
        }
    }).trigger('resize');
});

I have assumed .height('auto') to be the correct way to remove previously applied .equalHeights() based on a comment here.

You may wish to reintroduce detectorColumn etc. but, at least superficially, it appears to be an unnecessary complication.

I still don’t understand how applying .equalHeights() to the container manages to affect the divs contained within it when all the examples in the documentation are of the form $(classSelector).equalHeights();. If my understanding is correct, then something like $('#sidebar_right > div') would be more appropriate (ie. all sidebar_right’s child divs).

EDIT: My bad. By setting .equalHeights() on a container element, it automatically “loops through the top-level child nodes”. See link in @shaWn’s comment below.