sam152 / javascript-equal-height-responsive-rows Goto Github PK

Using $('.group-of-elements').responsiveEqualHeightGridDestroy(); seems stop the jquery $(window).on('resize') event firing.

In this example "test" is logged on resize until the destroy method is called (when window.width is greater than 800). After that, "test" will never be logged on resize.

$(window).on('resize', function (e) {
    console.log("test");

    var windowWidth = $(window).width();
    console.log("windowWidth" + windowWidth);
    if (windowWidth < 800) {
        console.log('yup');
        var $elements = $('div');
        var columns = $elements.detectGridColumns();
        $elements.equalHeightGrid(columns);
    } else {
        console.log('nope');
        $('div').responsiveEqualHeightGridDestroy();
    }
});

JSFiddle example

Salute,

I was asked to look over a website (https://www.doctores-kaul.de/erwachsene/wissen/) that is using your plugin (using the .responsiveEqualHeightGrid(); command) but it is not working as expected. It is wanted to equal the sizes of their 'Themen' Boxes (Class: .same-height-element). Strangely enough the last '.same-height-element' is left over and set to some different height.

However when I use

$('.same-height-element').equalHeight();

it looks pretty good. But (I guess) this is not wanted.

Can you give me some insight whats possibly going wrong?

Thanks for this great solution.

I tried this with a bootstrap theme and want to use it like this

$("[class*='col-']").responsiveEqualHeightGrid();

but it doesn't work.

As a workaround I added a standard class to each col (like class="col col-md-4") and it works as expected. But it would be great if it works with wildcard selectors as well.

Thanks

Hi

The script seems to miss the last box when different column layouts are used

f.e. i have one row with 2 columns and then a row with 3 columns.

It fails to resize the laste column in the second row.

Do you have a fix?

Thnx

Hey!

Love your script, but I encountered an issue on Safari (Mac/iOS). If some of your cols include images, the height will be calculated before the image is fully loaded. The result is not pretty as cols will overlap and destroy the layout. It seems that using document.ready is a bad idea with Safari in such cases. Changing to window.load instead seems to fix the problem as all images will be loaded before the script is executed.

I guess this is more of a problem related to Safari/Webkit than your actual script, but maybe a fix for this issue could be included somehow?

This script seems to account for that, but it has an issue when resizing the browser using the "minimize" and "maximize" button in the top right corner of your browser. That is not the case with your script.

Do you have any thoughts on this?

Hi Sam,
What your script does is really amazing, and dead simple but super effective.
The only thing missing here is destroy methods.
My problem is to equalize columns within ajax view. Everytime i replace the content, the memory will be leaked and i have no way to destroy or unbind the event.
Thanks in advanced

I want to animate the divs that should have equal heights and use the animate.css together with the wow.js.

If I'm setting an animation delay with WOW data-wow-delay="200ms" the divs are set to their normal heights after the animation in Chrome - in Firefox they remain with their equal height.

With no animation delay everything works fine in both browsers.

Any idea what causes this issue?

Would you consider releasing this plugin under a license? It would be really useful for anyone wanting to make use of it in their projects to know to what extent this is permitted.
If so, some comparisons are available at http://choosealicense.com/
Thanks for reading!

Hi,

Is it possible to have multiple versions of this ?

Or if you could like the heights to be evaluated on a row-by-row basis, ensuring elements only match the height of elements in their row:

Can you maybe give an example of how this works?

Thanks! lovely plugin

Hello,

I am using https://github.com/rpnzl/jquery-lazyjson and responsiveEqualHeightGrid() together. But after page load responsive equal height grid is not applying with lazy loading thats why my blog page is not loking good.I am using Wordpress and bootstrap. Can you figure out what is the issue? The website is live. So our client needs solution on this ASAP.

Thanks and Regards,
Sushant

Bug in Firefox. (In jsfiddle this bug in Chrome too, but in my page chrome work fine)
I write:
$('.populb > div').equalHeight();
$('.populb .botfix').responsiveEqualHeightGrid(3);
$('.populb .topfix').responsiveEqualHeightGrid(3);

Plugin not write right heigth in firefox for block .populb .botfix;
In Chrome, Safsri that's ok!

This is link for jsfiddle:
http://jsfiddle.net/2rsvL8yj/

If you look that in firefox, you see this bug. Don't resize window for look this bug.
Please fix it! Thx.
Sorry for my Eng.

There seems to be an issue where the heights are not equalising between the following widths:

1300px to 1355px

Has anyone else found this?

When the window is resized using mouse dragging, the resize event fires many times and for each time the syncHeights() function is called and makes the page very slow if there are hundreds of items.
So, When the user starts dragging to resize the window, resize event will not fired i.e. syncHeights() function should not be called until the user ends dragging. The syncHeights() function will be called once the drag ends and the window is resized to the final width.

I know nobody wants to have to support IE 8, but using the .responsiveEqualHeightGrid method causes window scrolling to become unreasonably jerky.

how can i make all divs the same height on mobile (below 480px)?

When you have an embedded item inside of the container the sizes are applied before the embed loads. For example, a twitter widget will extended beyond the height of the column on page load. Then once window is resized, it will fix itself.

I used this plugin in conjuction with Bootstrap 3. When applying it to the contents of a a form-horizontal structure, when I scaled the browser width < 768px, the scrollbar could not be scrolled all the way t the bottom of the page in IE8.

I have a couple of divs showing up on a bootstrap modal. When I apply .responsiveEqualHeightGrid() to them it always makes style="height: 0px;"

Is it possible to disable the plugin when on some resolutions? For example when using bootstrap that i's only applicable when the .col-md is active and not on the .col-xs

Thank you! great plugin

Hi,

Lovely plugin! Just one issue is when i'm using padding on an element that it doesn't match the height for the element with padding on it.

Any ideas?
Thanks!

I had to use bower install javascript-equal-height-responsive-rows#latest otherwise Bower failed with the error ENORESTARGET No tag found that was able to satisfy ~1.0.0. I think all you need to do is create a tag called 1.0.0 and then people can simply use bower install javascript-equal-height-responsive-rows.

Currently only tested on jQuery 1.4.

First, I am testing this simple, nice, and clean plugin with Bootstrap, using this function:

$('.group-of-elements').responsiveEqualHeightGrid();

My tests shows it is working with Bootstrap latest version very clean code, therefore I suggest you to add the keyword Bootstrap to the plugin and to the documentation.

I'd also suggest to add to the docs that the above function is ready for Bootstrap which works on window resize, media trigger etc.

Thank you for your nice work.