liabru / jquery-match-height Goto Github PK
View Code? Open in Web Editor NEWa responsive equal heights plugin
License: MIT License
a responsive equal heights plugin
License: MIT License
Hi,
I'm using matchHeight()
on a WordPress site, and its working fine on initial render. But I'm using Ajax Load More to load more posts, using jQuery's ajaxComplete()
to update the height on loaded posts. It's working fine on the first load, but on the second load the heights are set to high (should be around 300px, gets set to around 500px).
Here is my JS:
jQuery.noConflict();
jQuery(document).ready(function($){
$(function() {
$('#employees .person').matchHeight();
});
$( document ).ajaxComplete(function() {
$.fn.matchHeight._apply('#employees .person')
$.fn.matchHeight._maintainScroll = true;
});
});
And ideas?
Hi,
at first thanks for your great plugin. :) I used it on one page without problem, but on a new layout, I'm having problems with the calculated height. I made a jsfiddle to show the problem.
The last Box is always falling out, because the height is calculated to small:
http://jsfiddle.net/emjay__/xp1g0d0f/
If I add another box to the last row, it is working again. I hope this problem is fixable. :)
Thanks
Hi,
Whenever I respond the browser window to test in smaller screens the height in element.style doesn't reset.
Unfortunately I can't show any examples as I'm under NDA. I couldn't find another way to contact you.
This part allways sets the top and buttom padding on elements to 0. Commenting the lines out them out fixes this. Am i doing something wrong?
// get rows if using byRow, otherwise assume one row
if (byRow) {
// must first force an arbitrary equal height so floating elements break evenly
$elements.css({
'display': 'block',
//'padding-top': '0',
//'padding-bottom': '0',
'border-top': '0',
'border-bottom': '0',
'height': '100px'
});
// get the array of rows (based on element top position)
rows = _rows($elements);
// revert the temporary forced style
$elements.css({
'display': '',
//'padding-top': '',
//'padding-bottom': '',
'border-top': '',
'border-bottom': '',
'height': ''
});
}
First, fantastic plugin! Kudos!
Something I noticed was that when reducing the screen width to the point where all items in a group were stacked on top of each other (essentially single item rows), the height would continue to be set to whatever the last value was prior to being stacked.
I believe the issue can be fixed by changing the code on lines 201-203 from this:
// skip apply to rows with only one item
if (opts.byRow && $row.length <= 1)
return;
To something more like this (I'm sure you'll know a better way to implement this, pardon my crude coding):
// set item height to auto for rows with only one item
if (opts.byRow && $row.length <= 1) {
$(this).css('height','auto');
return;
}
Thanks again, maybe this enhancement can make an already amazing plugin just a teeny bit better.
~Steve
Hi,
Fantastic plug-in, thanks for this!
I am not very well-versed with jQuery or JS, so wanted to know how to disable/remove the matching heights, if the page is viewed on small screens (phones, tablets) or when window is made narrow by the user.
I'm using match-height in differentent projects and, in one way or another, I always end up with the need of a reliable callback.
Hi, great plugin, thank you. I'd like to use it with content that is split into a couple of tabs. The content in visible tabs is fine, but the content in hidden tabs (display:none) is set to height:0px. Is there any way around this?
$('.item').matchHeight();
When padding is set:
DIV[1] -> padding: 28px;
DIV[2] -> padding: 38px;
Works properly only when first DIV height is bigger than second DIV.
For example, works wrong when last DIV height is largest.
There is the problem with padding calculation.
There is the problem with the sequence of measurements.
Hello,
First of all thanks for the plugin and the detailed instructions on how to use it. I have used it for a primary & secondary section. It works. But in the primary content section I have a Ajax form that adds error message above the form. This results in increase in the height of the #primary div. So the content overflows.
I'm not sure if I have explained it well, but in case you did understand is there any way to avoid such issues?
Hi, I use this plugin to assign the same height to a group of blocks, the whole being responsive. Everything works fine except on IE8. After a few tests, I realize that the matchHeight plugin fails to calculate the height of my elements when their css properties are in a media queries.
In fact, if I delete the media queries, the plugin works well.
Here is the zip with all the test files :
https://dl.dropboxusercontent.com/u/92785077/bug%20matchHeight.zip
How to fix it ?
Thank you.
Hi. Equal height divs don't seem to be working on this site in firefox: http://postharvestenergy.com/
Hey thanks for making this available. I was pulling my hair out trying to get something to work for like 2 days and then found this. Within a couple of minutes, "bam" it's all working just how I wanted.
I think I saw this somewhere else, but would be nice to have a settable min/max height config.
Like....height (min 300, max 1000)
Thanks again.
Hi.
Is it possible to pass the calculated height to other style attributes like line height?
(This way it would be peace of cake to vertically align text).
In some companies they don't allow Firefox to automatically update. I have a client who is stuck on FF 27 because of this and the height is not calculated correctly when box-sizing is used.
See http://caniuse.com/#search=box-sizing
This can be fixed by changing:
if ($that.css('box-sizing') !== 'border-box') {
into:
if ($that.css('box-sizing') !== 'border-box' && $that.css('-moz-box-sizing') !== 'border-box') {
I know this is something that shouldn't really be fixed (companies need to update), but I thought I'd post it here for people with a similar problem.
I'm having an issue with matchHeight removing the inline style display:none from any parent that contains the element that matchHeight is called on. This happens upon load and resize of the page.
I am using matchHeight on a tabbed page where content is initially shown or hidden using javascript. The issue is that I am using javascript to add inline CSS to hide content, which is where the issue occurs.
The work-around that I have found is to apply an additional class to let CSS hide the content, although this is not ideal.
The page jumps up on reloading the elements when using ajax pagination.
I fixed it by saving the scroll position and reloading it on this part of the code.
Thought it might be usefull.
if (byRow) {
var scroll = $(window).scrollTop();
// must first force an arbitrary equal height so floating elements break evenly
$elements.css({
'display': 'block',
'padding-top': '0',
'padding-bottom': '0',
'border-top-width': '0',
'border-bottom-width': '0',
'height': '100px'
});
// get the array of rows (based on element top position)
rows = _rows($elements);
// revert the temporary forced style
$elements.css({
'display': '',
'padding-top': '',
'padding-bottom': '',
'border-top-width': '',
'border-bottom-width': '',
'height': ''
});
$(window).scrollTop(scroll);
}
Scenario: Take for example the thumbnails component in Bootstrap 3.x. Create a responsive grid (.container-fluid) of thumbnails. Create 4 thumbnails inside a single row. Each thumbnail's content should be of different height, well, at least the first thumbnail on the left. Resize down until a thumbnail goes down onto a new line. It should get stuck at the right end of the first taller thumbnail. That's when I gave your plugin a shot to solve that issue.
Since the maximum height is set on all thumbnails by matchHeight, when the window is being resized that maximum height does not change until a certain amount of time has passed (80ms by default) but a responsive grid such as bootstrap's keeps adapting without any delay and that has two visible downsides:
Solution:
Set the items' height to auto
when a resize event occurs and when the actual resize stops, calculate the max height and set it on every item. You should use underscore's _.debounce
function for that. Something like this (snippet from an app I'm developing):
var $win = $(window);
$win.on('load resize orientationchange', _.debounce(resetItemsHeight, 500, true);
$win.on('load resize orientationchange', _.debounce(matchItemsHeight, 500);
I'll make a pull request when I enjoy some free time but right now I'm too busy.
Despite this small issue, great plugin!
I think the resize doesn't trigger if i rotate my iPad from landscape to portrait.
Ive noticed the performance of this plugin can effect page rendering performace when used heavily on a page. I have a scenario where there could be up to 300 resizes on a given page. Ive increased the throttling value but also added a check around the height setter.
My assumption is that DOM manipulations are expensive and that i only need to manipulate the height of an element if its not already the height i want it to be. So i have added this check around the setter.
if (_parse($that.css('height')) !== maxHeight - verticalPadding) {
$that.css('height', maxHeight - verticalPadding);
}
thoughts?
We have a mobile experience on a responsive site that shows a header link above a series of story-blocks. The matchHeight script works fine on the responsive page working as planned until the user collapses a row of content. This runs a windowshade action that hides the story blocks. The user can open and close and the story blocks show and hide correctly.
However, if the user closes the row, then changes the viewport size (by dragging a browser window or rotating the device), the matchHeight script runs and sets the height of these items to 0px. The row can not be opened again.
Start state (notice the heights on the article elements)
Change Viewport width (notice the articles are now 0px in height)
Open state (since items have 0 height, the row will not open)
Hi
First of all, thanks for such an awesome plugin, it works like a charm, I have used it in my project mentioned below and it works perfectly as expected.
However, I have a unique issue, in my project there is a hidden content, and on click of a button (button name is hidden content) we are showing the content inside the div, but when I click on the button only that div is expanding, not the other 2 div, also the parent div classes are not applying due to fixing the height at the initial level.
Below is the link.
http://pacificit.in/visitfree1/overview.html
Kindly check the below image to have a look at initial stage
Below is the image after I click on the hidden content button
I've got this working properly on desktop view, but the height of the elements will not reset responsively. It looks fine on desktop, but when i resize the viewport the height stays the same and doesn't reset to account for the new breakpoint, leaving a lot of extra space at the bottom.
So I see the inline style height
being added to the desire elements, and the heights are in fact matching for the elements I selected - awesome!
But, the text is not "centering" it self in the adjusted container - I am also not seeing any attempted changes to the margin, padding or border for either element.
What am I missing?
Thanks in advance, I am sure it is mistake on my end but cannot find anything in the docs.
This is great! Thoughts of adding a destroy method when height matching is no longer needed?
This doesn't work
$(function() {
$('.js-sameheight').matchHeight({
byRow: false,
});
});
Hi. I'm using this on a responsive site to achieve rows of aligned blocks. Works great in modern browsers, but it doesn't seem to be row-aware in IE8. I'm using respond.js to handle my media queries. The page finishes loading and the blocks aren't equal heights. If I re-run the function from the console, it only fires if I set byRow to false. Any idea how I can resolve this? Thanks!
Is there a way built inside the plugin to disable it after a certain breakpoint?
Can we get a new release? I am currently using this via bower (v0.5.2) and I really need access to the callback functions.
There are quite a few bug fixes and features that would be nice to have as well as the callbacks :)
I can't get it to work with Wordpress. Is there something that might be causing a conflict?
Thanks, this was useful. Would you consider adding it to bower or npm? It would be nice to pull in via a package manager.
Is there a way to remove the equal height on resize? for mobile browsers, some of my full size equal height elements need to return to their previous automatic height. Is there a "desctruct" method that removes the styles applied by the plugin, or am i going to have to do this myself programmatically with $(window).on('resize, function..
Thanks!
Hi,
I'm developing some site and I use your plugin. It's really great and this is the only one that works for me, but I have problem with it in one place. Maybe it's some bug or I do sth wrong.
This is the situation: In one row, there are two blocks (A). In each block there are two blocks (B), in desktop view - one next to second.In tablet view, these inside blocks strething to full width (parent block A), so now they are one above other. The problem is, when resize window, heights doesn't change - it stays this same. But, when I refresh window, everything is OK (in tablet/desktop view), the plugin works well untill change from desktop/tablet view problem appears again.
I use your plugin this way:
$(window).load(function () {
$.fn.matchHeight._apply('.row-blocks', true);
});
and for resize:
var functions;
function functionsResize() {
$.fn.matchHeight._update();
}
$(window).resize(function () {
clearTimeout(functions);
functions = setTimeout(function () { functionsResize(); }, 200);
});
If I use plugin in basic way: $('.block').matchHeight('.row-blocks'); everything works well, but window freezes/lags during resizing.
Sorry for my language mistakes, but I don't write in English a lot. Thanks in advance for any help. ;)
Hey there,
Congrats for your plugin! You might consider setting the min-height param and not the height as it will allow more flexibility; just a quick hint :)
Radu
hey there. first off, i love the script. the row aware feature is amazing especially for responsive sites.
i am having a strange issue however. in IE8 i am getting the following inline styles on my matchHeight elements.
border-top: medium none;
border-bottom: medium none;
it seems .css("border-bottom",""); is not doing its job in IE8 for some reason. I will look into it, but just wanted to let you know.
Thank you for this great plugin. Should I question whether it is possible to set the same height for hidden elements. specifically for bootstrap tabs.
Thanks
This works really well except if used on an element that utilizes the css "display" attribute. e.g., display: table;
Since the display attribute gets overwritten by the javascript, it breaks the design (unless using !important
). Perhaps an optional setting variable could be created for the display attribute?
On load, this plugin works great, but when I filter using mixitup plugin, things start to break. I assume I need a callback function to re-evaluate the height. The following doesn't work. Otherwise, if this question is for the MixItUp dev, then sorry for the trouble.
$(window).resize(function() {
$.fn.matchHeight._update('.item');
});
$(function(){
$('#mixitup').mixItUp({
animation: {
effects: 'fade scale',
animateResizeTargets: true
},
callbacks: {
onMixEnd: function(){
$.fn.matchHeight._update('.item');
}
}
});
});
Is there any way to have the plugin respect the "table-cell" display option? It's helpful for vertically centering within the columns.
Hi,
How to or is it possible to set data api using min-height instead of height?
Resizing the window causes the viewport to jump up the page.
I assume this is a side effect of the way the heights are calculated, and I'm not sure if there is a way around this, just thought I'd let you know.
The plugin is great! However, there is the slight issue of it breaking for Safari (Windows/Mac) and Chrome(Mac)
This is the way it should look:
This is what happens when it breaks:
and this:
It seems like it either doesn't calculate the heights at all, or calculates some of them and negates others.
Safari for Windows 5.1.7.
Chrome for Mac 31.0.1650.63
Any fix would be greatly appreciated!!!
Thanks.
I have experienced a strange issue while setting this up. I made a jsfiddle and while I was trying to extract it I figured out a workaround to it but its not going to solve my problem in the medium term.
The issue is that when the page first loads all the boxes are the same height; the equal heights works but the row detection isn't working. Upon resizing the browser screen it triggers the row detection and the rows resize correctly.
The fiddle below shows the issue. As I was trying to solve it I added in various things, adding in a separate row for every second item, changing the class names so floats, etc weren't applied, eventually putting in data-mh annotations to the items but nothing solved the problem:
http://jsfiddle.net/rtpHarry/6mudcbuc/9/
It turned out that while I was moving it across I hadn't brought over the startup JS line. Without the JS it correctly deduces the rows:
http://jsfiddle.net/rtpHarry/6mudcbuc/8/
But even without the .row tags or the data-mh it still fails to do row detection until you resize the browser:
http://jsfiddle.net/rtpHarry/6mudcbuc/11/
This has solved my problem for today but I am keen to find a solution to the JS startup method because the ultimate plan is to pull these boxes in via data from a json feed and generate them on the fly so they won't exist when your data attribute auto-startup code runs.
Any thoughts?
I uploaded a screen cast.
In the first situation, it works properly. In the second situation (after reload) it does not. I have also noticed that in multiple reloads, it doesn't always calculate the height correctly.
I apologize in advance, Screencast isn't the fastest to load videos.
http://screencast.com/t/ZuynFBfTT8u
First, thank you very much for your plugin! It helped me a lot.
But I have one problem which I already solved, but I do not know if there is a chance to use your library in a better way.
I use Twitter's Bootstrap 3 with a 1-, 2- or 3-column layout dependent on the viewport. I have three bigger boxes and three smaller ones, all with dynamic content and dynamic font sizes. It should be responsive / fluid and so I do not limit the height or width of the boxes.
Here is an image how it should be (1-column is no problem):
With your plugin, 1-column and 3-column layout works fine. The problem is the 2-column layout, because I want to align the boxes 4 and 5 to box 3. So if box 3 is larger than box 4+5+margin, box 4 and 5 should be stretched both in height. If box 4+5+margin is higher, box 3 will be stretched, so it will fit perfectly.
Here you can see my JSFiddle.
Maybe you know how to improve it based on your plugin?
Row detection does not work correctly with inline-block.
See this fiddle:
http://jsfiddle.net/2Sjw4/
I'm trying to get a div "float" to the bottom of the containing div.- e.g http://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div
The containing div is the element which is "matchHeighted".
The pseudo-HTML contains:
<div class="content">
<div class="frontpage-item">
<div class="floatdown">
<div class="frontpage-item">
<div class="frontpage-item">
</div>
CSS
.frontpage-item {
position: relative;
}
.frontpage-item .floatdown {
bottom: 0;
position: absolute;
}
js contains
$(document).ready(function() {
$(".frontpage-item").matchHeight(false);
The problem is that as soon as I "apply" position:absolute to the inner-div,- whether by css as above or later on via js/jquery (this is the actual idea), the height of the .frontpage-item div "collapses" to the height on it's content without the inner div.
Clearly position:absolute breaks the flow - but I figured since matchHeight sets the height of the containing div explicitly this would have no effect. Somehow the flow-break bubbles up to this element afterall.
Is there any way to stop this or is there any other technique you know of to have the text of the inner-div aligned to the bottom of the outer div - without causing such a collapse?
(been struggling with this for a couple of hours!)
Hi,
I'm using the matchHeight.js plugin in my Rails app:
I've noticed an overflow issue, where text is overflowing it's div borders. Apparently this only appears on mobile screen sizes.
I'm not sure if the error is caused by the Bourbon Neat grid framework or the matchHeight.js plugin.
Anyone else encountered this issue?
my repository is at:
https://github.com/acandael/beautysalonapp2
the matchHeight.js script is implemented at:
https://github.com/acandael/beautysalonapp2/blob/master/app/views/homes/index.html.erb
thanks for your help,
Anthony
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.