jsliang/eqheight.coffee

eqHeight.coffee is a jQuery plugin that stretches fluid columns to equal height. It is originally designed to be used in responsive web design.

eqheight.coffee's Issues

eqHeight causes 100% CPU in Firefox & Safari?

When I load the demo page of eqHeight (http://jsliang.com/eqHeight.coffee/demo.html) and watch the Firefox process in my activity monitor the CPU consumption doubles and sometimes maxes out at 100%. In Safari, the processes also went from sub 10% to a constant 60-70% simply by having that demo page loaded.

Is this just my machine or is there something weird going on with eqHeight?

Height calculation of columns to equalize

I have columns having a 10px padding which I would like to equalize.
The tallest column's text will always overlap (the padding or even the border), because the height() function does not count with paddings and borders. Therefore I suggest using the outerHeight() function, which solves the mentioned problem.

# Get max height of marked_columns
    max_col_height = 0
    marked_columns.each () ->
        max_col_height = Math.max($(this).outerHeight(), max_col_height)

Potential issue of column grouping in fluid layout

In current implementation, eqHeight first groups column elements in the same row by examing each of its position().top value, and then equalize the column heights for each group. However, in fluid layout the position().top values of some columns might change when equalizing column heights. Columns that eqHeight thought were of different rows might be re-positioned to the same row.

A more reasonable flow would be 1) identify columns of the first row, 2) equalize columns of the first row, and after that 1) identify columns of the 2nd row, 2) equalize columns of the 2nd row,... etc. Equalizing columns shall be done right after columns of the same row are identified.

Calling eqHeight from inside a function

Hi, I tried this:

$(window).on('load', function() {
    init();
});

function init() {
    $('.row').eqHeight('.col', {
        equalize_interval: 1000
    });
}

But it's not working. When I call the eqHeight method directly, it works. Any clues for what's going on here?

Documentation update for the newly added "equalize_interval" option

I've added a new equalize_interval option to the eqHeight function in v1.2.7.

By default, the equalizing function is called only on window resize.
If equalize_interval is specified with a number, for example, 500, then the equalizing function is called every 500ms.

Will have to add this feature to README and the live demo page. Open an issue here to track it.

Multiple row resizing

I'm having an issue when there is more than one row. The first row stays the same height as it's tallest div when the page was loaded but the second row still calculates the height when resizing the window. If I just have one row it works perfectly. I created a jsfiddle to show the issue http://jsfiddle.net/ferne97/KHmdr/6/. Thanks, nice plugin by the way.

Adapting eqheight

Hi, there. I try to relaunch my website that loads a lot of feeds. Therefore I've used (very thankfully) the eqheight-script. My website is loaded after every feed has been fetched by php. Now I try to adapt eqheight for a js-solution, that loads the first feeds by a request, than shows the website and loads all the other feeds in background. But now I don't know where to integrate the eqheight script. The way I tried it (without knowing a lot about js) does not work. If I load the functions at the end of my html, it does not work, because the feeds aren't still there. It only works when I resize.

Here' my code:

[CODE]

<!--[if lt IE 9]>

Sie benutzen eine veraltete Software, welche aktuelle Internetseiten ggf. nicht mehr korrekt darstellen kann. Benutzen Sie Mozilla Firefox oder ktualisieren Sie ihren Internet Explorer.

<![endif]-->

<script type="text/javascript"> var feedObj = null; feedObj = new XMLHttpRequest(); var i = 1; window.onload = function() { ``` function beginneLaden() { feedObj.open("GET", "feeds1.php?feedid="+i); feedObj.onreadystatechange = ladeFeeds; feedObj.send(null); $(".main").eqHeight("article", {equalize_interval: 500}); function ladeFeeds() { var fa = false; var anzahl = 18; // Anzahl der Feeds angeben if (feedObj.readyState == 4) { document.getElementById("feed"+i).innerHTML += feedObj.responseText; i++; fa = true; if (i > anzahl) {fa = false; } } if (fa != false) { beginneLaden(); } } } beginneLaden(); ``` $(".main").eqHeight("article", {equalize_interval: 500}); $(window).resize(function(){ equalheight('.main article'); }); } </script>

                   <img src="logos/dlf.jpg" alt="Deutschlandfunk" class="img-rounded"/></a>

[/CODE] .....and so on....

COuld you help be adapting eqheight in the right way. The equalizing function should start after the first feed(s) is/are loaded. Here's the well working URL for the php-based site (before relaunch) [URL]http://nachrichtentisch.de/test.php[/URL]

And here is the only-by-resizing-working solution for the js-based relaunch:
[URL]http://nachrichtentisch.de/test1.php[/URL]

Thansk for helping!!!
Kind regards
Peter

Possible an option to add the calculated height to another child

It's possible to calculate the height for col-xs-6 and set the height by the output container?

$(document).ready(function() {
    $(".row").eqHeight('.module', {this_container: '.output'});
});

<div class="row">
<div class="col-xs-6">
<dic class="output">
Some output
</div>
</div>
<div class="col-xs-6">
<dic class="output">
Another output
</div>
</div>
</div>

Not taking into account padding

I have two columns that I am attempting to make the same height.
Script is working but is not taking into account that one of the columns has different padding.

I am no coder, but I think changing the instances of .height to .outerHeight resolves the issue...

Dynamic resizing within column fails due to static height

see http://jsfiddle.net/ufxbQ/10/

in order to fix this I attempted a min-height solution. This works, except for the box-sizing elements which require .outerHeight() instead of .height(); This will be in no way compatible with IE6. IE7 I'm not completely sure how jquery handle's .css('box-sizing').

The updated fiddle to min-height: http://jsfiddle.net/7wdjA/

It would be nice if after the animation the columns auto equalize but the .resize() event is only available on 'window'.

bootstrap 3 thumbnails

doesn't seem to work for bootstrap 3 thumbnails component

I tried
$(".row").eqHeight(".thumbnail");
and
$(".row").eqHeight();

Impossible to scroll to bottom of page

Hi, and thank you for a great script, that is also easy to implement for someone not familiar with javascript.

One small problem: All my pages contain some internal javascript that will cause column heights to change. So I've set

    option = {
    equalize_interval: 500,
    break_point: null
    };

in the script itself. But when a page is scrolled to the bottom, it will jump back up 50 - 150px (seems to vary with page content) when the script executes. No content gets cut off, but it is quite annoying, and certainly confusing for the user.

A couple of examples here:
http://perberntsen.com/-index.php
http://perberntsen.com/Test/metsa1.php
(This is a work in progress, and most links in the menu are not functional)

I'd be very grateful if you could look into this.

How does it work with a little known grid?

I create some demo pages with a small uknown grid (https://github.com/carlopogus/Responsive-SASS-Grid) and I can not make equal height columns work.
As I am evaluating the new zurb foundation 4, it would nice if I could understand what is going on (but I am totally ignorant of javascript).
It would be nice If you could look into it.

Thanks,

Petros

Small improvement

Hi,
Thank you for the plugin, I am building a responsive website, and needed the plugin to work only on desktop but not mobile.
I have modified the plugin to receive another option - breakpoint. if provided, the breakpoint will become min-width for the plugin to function.
I will create a pull request to show you the code if you wish.
Tomer

Column with dynamically changing content

Hi there,

First, thanks hugely for this very helpful plugin.

I was looking to use it on a page where one of the columns with eqHeight applied toi it would have its content periodically changing via Flexslider 2 ( http://www.woothemes.com/flexslider/ ). It might start with 5 lines of text, then a new slide would come in and it would be 10 lines of text. Flexslider has a callback function that you can make fire after each slide transition completes:

after: function(){}, //Callback: function(slider) - Fires after each slider animation completes

I know flexslider isn't your thing, but do you think something like

<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".flex-container", after: function(slider) { $(".row").eqHeight(".column"); } }); }); </script>

Would do the trick?

Thanks in advance for any advice you are able to provide!

Erik