CODEWITHSUNDEEP
jquerysyntaxincompatibilityjquery-1.9
drivebass
drivebass

Reputation: 137

Script not working with jQuery 1.9.0

The following script gives equal heights to divs in a specific container on load and on window resize. It comes from http://stephenakins.blogspot.gr/2011/01/uniform-div-heights-for-liquid-css-p.html

It works on load but with jQuery 1.9.0 the function doesn't work on window resize. If I change the jQuery version to 1.5.0 the resizing works. I used the jQuery migrate plugin but it doesn't give any warnings or errors. Is there any incompatibility with 1.9.0 syntax? Any ideas?

// these are (ruh-roh) globals. You could wrap in an
// immediately-Invoked Function Expression (IIFE) if you wanted to...
var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array();

function setConformingHeight(el, newHeight) {
    // set the height to something new, but remember the original height in case things change
    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
    el.height(newHeight);
}

function getOriginalHeight(el) {
    // if the height has changed, send the originalHeight
    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
    $('.equalize > .col').each(function() {

        // "caching"
        var $el = $(this);

        var topPosition = $el.position().top;

        if (currentRowStart != topPosition) {

            // we just came to a new row.  Set all the heights on the completed row
            for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = topPosition;
            currentTallest = getOriginalHeight($el);
            rowDivs.push($el);

        } else {

            // another div on the current row.  Add it to the list and check if it's taller
            rowDivs.push($el);
            currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

        }
        // do the last row
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

    });

}


// Dom Ready
// You might also want to wait until window.onload if images are the things that
// are unequalizing the blocks
$(function() {
    columnConform();
});


//  Window resize functions 
$(window).resize(function() {
columnConform();
});

Upvotes: 1

Views: 258

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

I think your problem here is your use of data(). In jQuery 1.9.0 values held within an element's data-* attribute is only read the first time the element is traversed in the DOM using data().

Instead of using data('originalHeight), use attr('data-originalHeight') instead, as this will re-read the value every time it's called.

Upvotes: 2

Related Questions