mattbanks / jquery.equalheights Goto Github PK

I'm having some issues with this plugin on Firefox 19.

A cache-clearing reload (Ctrl+R) will make the images display incorrectly.

Example:
https://dl.dropbox.com/u/2758854/equalheightserror.png

The tag height is defined inside the div. I'm loading equalHeights at the bottom of the page.

The call is made as such:

jQuery('.grid-tile').equalHeights();

jQuery version 1.8.3

Love this plugin, been using it for awhile.

One thing I thought was cool is to invoke like this:

$(".equal").parent().each ->
  $(this).find(".equal").equalHeights()

This works. Do you think it makes sense to build it into the plugin somehow? It seems like most situations ask for a group of children; on my page, I had two different sets of divs I wanted to be equal in height.

Hi Matt

I experienced the following issue with the plugin auto initialize feature:

• When the page was first loaded it will work as expected.
• When the page was refreshed using Ctrl-F5, resize won't work properly. I found out later it was because some images were been reloaded.

Base on this recommendation (http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) I wrapped the auto initialization code into a window.load function, like this:

$(window).load(function() {
    // auto-initialize plugin
    $('[data-equal]').each(function() {
        var $this = $(this),
            target = $this.data('equal');
        $this.find(target).equalHeights();
    });
});

... and now everything works now as expected.

Could you publish jQuery.equalHeights on npm?
https://docs.npmjs.com/misc/developers

Unfortunately there's already another package with the same name, so you have to choose a slightly different one. 😕
https://www.npmjs.com/package/jquery-equalheights

After update to new version no heights are set.
In Firebug there is no manipulation to the elements.
Downgrade via bower to version 1.5.2 solved it and it worked.

Browser: FF42

I have an issue with bootstrap, when window size changes, my blocks gets new @media but heights the same, so texts glitching.

On jQuery 1.8 and higher, adding padding to the equalHeights elements results in unexpected behavior. The padding seems to be added to the element height twice. I think a live example explains best: http://jsfiddle.net/marcvangend/rtkyd/.

Nice plugin, I'd love to use it!
No license is given (as far as I can see), could you please specify some specific license for it?

hi. i try to use plugin
but i have some problem - selected objectsjQuery('.pg-csv-box').equalHeights();have real max height 291px but plugin returns 316px because objects with margin and padding.

when i modied plugin to show height and innerheight:

console.log(height);
console.log('height'+$(this).height());

it was returned:

316
height291
311
height286
310
height285

then i modified src to var height = $(this).height(); and height at now calculated OK

//sorry for scary english :)

Instead of delaying with setTimeout when using @font-face to get a correct calculation, I am calling equalHeights window.load rather than document.ready, as per this SO answer. Seems to be ok so far. Not sure why it works but may be better than a ms loading guess?

I've tried a large number of jQuery equal heights approaches. In Chrome, all approaches produce short columns. They all work in Firefox though.

Wondering if you've run into this issue with your plugin? The elements I want to be equal height contain images, but the images all have their width and height attributes set. The images aren't necessarily displaying at those width and height attributes due to this being a responsive design.

Firefox:

Chrome:

Great stuff, works out of the box. Thanks for that!

Only thing I'd like to see is it also work on fluid / responsive designs. So I guess it would need to reset the height on window resize.

Is this possible? Would be awesome ;)