sam152 / javascript-equal-height-responsive-rows Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery plugin to keep elements the same height, supporting resizing and responsive layouts.
A simple jQuery plugin to keep elements the same height, supporting resizing and responsive layouts.
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.
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
.
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.
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?
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.
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
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 know nobody wants to have to support IE 8, but using the .responsiveEqualHeightGrid method causes window scrolling to become unreasonably jerky.
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!
how can i make all divs the same height on mobile (below 480px)?
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!
I have a couple of divs showing up on a bootstrap modal. When I apply .responsiveEqualHeightGrid() to them it always makes style="height: 0px;"
There seems to be an issue where the heights are not equalising between the following widths:
1300px to 1355px
Has anyone else found this?
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
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?
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
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
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?
Using
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();
}
});
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
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
Currently only tested on jQuery 1.4.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.