Provide an option to activate on window load instead of document ready.

Same here. Can you reconstruate this issue, folks?

I am having the same issue.

Same issue as well.

Tried changing the module load order so it loaded last, but that didn't help.

Would this module also work so that both columns resize to accommodate something contained with a dynamic height (like an accordion menu)?

Thanks!

I was able to resolve this issue for me by waiting for window load instead of DOM load.

Change line 44 of the module:

Old line: $js .= "$(document).ready(function() {";

New line: $js .= "$(window).load(function() {";

To be more specific my issue was specifically with images. The image reference was passed through the DOM but it was not loading the width/height properly so it was resizing before the image loaded completely.

I did the same thing. And created a patch to apply. It solved the problem for me.
(BTW: i created my first patch ;-) )

You might want to check this out
https://github.com/desandro/imagesloaded

Let's make into the feature request.

#4 fixed my issue as well. I vote to update the module with this.

I believe that the issue comes from images that do not have a height set on them, but changing from document ready to window load did the trick.

If I apply the change/patch proposed in #4/#5 I get an undesired effect: blocks initially show up with different heights and then "animate" to same height. With the default way ($js .= "$(document).ready(function() {";) it works as I expect it to.

So, instead of changing the default of how the module works, perhaps we can make this optional... say by providing a "Enable on window load instead of document ready" checkbox in the module's configuration page.

Alternatively, we could have the allowed format accept another parameter. Something like this perhaps?:

.element-class:100,500,onload

I agree is this the best method. The reason I set it to "needs work" was because its only a conditional fix. I would not recommend using window.load unless you are having image loading issues.

Let's see if 7.x-2.x branch still has this issue...

Yes, the 7.x-2.x branch has this issue too… If images are loaded after the script launch, the heights are all wrong… Seems like a bug for me, not a feature request.
And the same thing happens with responsive themes (content heights change, but equalheights is not re-launched, but it should be to adpat to the new heights)…
I'm working on a patch for that (it's working for the 7.x-1.x branch, but still not for 2.x).

Here's the working patch…
What it does :

• corrected the script to launch it when everything is loaded (with $(document).load())
• added an event listener to $(window).resize(), so if you use a responsive theme, and your content size change, the heights are re-calculated
• bonus : also for responsiveness, added an option to choose the minimum browser width for the script to launch, so on mobile, when your blocks are stacked, the script is not launched, and no useless white space are added.

I'll test this, thank you!

Note that I forgot a console.log(eqClass); I was using to debug… don't forget to remove it (in equalheight.js).

This patch breaks ajax loading (for example, with views pager).

Updated the patch (was breaking things in IE).

Did you reroll against latest dev? I've fixed IE issues.

Here it is against latest dev, and have added an upgrade function to transform the old "classes" to "elClasses" as well.

Thanks.

Still doesn't seem to work with ajax (try views ajax pagination, for example).

I already use the new 2.x version and the update function in #19 kills may elClasses. Although it was well-meant, the module update problem is not part of this issue and therefore it should not be in this patch.

The code in $(window).load(function(){...}) does not get executed after the ajax event.

I modified the patch in #19: Threw away the update hook an put the functionality to trigger equal heights in its own function. Calling $(window).load(equalHeightsTrigger(true)); now works. Not sure why it works and this not:

$(window).load(function() {
  equalHeightsTrigger(true);
});

Tested with FF and Chrome.

Maybe we add two checkboxes to the admin UI to select whether to load on document ready or window onload ... or both. Both should be also possible, because currently it does not look nice the time between the first parts of the site where shown until the equal height go applied. Any performance concerns?

I applied the patch in #23 to 2.0. Works great!

I spoke too soon. What works great is the auto resize and the minimum width feature. Great stuff.

But I too am still having issues with overflow due to images and the patch in #23 is using window.load().

Note that the issue is intermittent and the overflow happens more often in Safari then in Chrome. I'm told it's not happening at all in Firefox.

And since changing the viewport size fixes the problem (since the images are all loaded in by then), I've cheated a bit and hacked equalheights.js to make a call to equalHeightsTrigger() after 1 second. Since the blocks in question are below the fold, it's not a problem that the page shifts a bit.

if ($(window).width() >= eqBrowserMinWidth) {
  setTimeout(function() {
    equalHeightsTrigger(true);
  }, 1000);
}

I don't know how to write a patch but I fixed this issue (been trying to use hacked CSS to fix it). I work at a university and sometimes we have articles with 50 pictures on them (all in one line of course) and this was really mucking things up with layouts. Especially if you reloaded a page with tons of pictures, it would really mess up the page structure. I've been trying to learn how to use jQuery more the 'drupal way' and I came across the "drupal way" to call the jquery 'window.onload function ()' elsewhere.

So if you go into the modules/equalheights folder, and look for "equalheights.js" file. You'll see the code:

(function($) {
	Drupal.behaviors.equalHeightsModule = {
	 attach: function (context, settings) {
	  var eqClass = Drupal.settings.equalHeightsModule;

       if (eqClass) {
	  //var overflow = Drupal.settings.equalHeightsModule.overflow;
	    $.each(eqClass, function(eqClass, setting) {
		  $('.' + setting.elClass).equalHeights(setting.minheight, setting.maxheight).css('overflow', setting.overflow)});
	  } 
	
    }
  }

})(jQuery);

You need to wrap the "If(eqClass)" statement with an window.onload function() , which tells Drupal not to trigger the equal heights settings until the page is completly loaded.

So the fix for this is:

(function($) {
	Drupal.behaviors.equalHeightsModule = {
	 attach: function (context, settings) {
	  var eqClass = Drupal.settings.equalHeightsModule;
	  window.onload = function() {
            if (eqClass) {
	    //var overflow = Drupal.settings.equalHeightsModule.overflow;
	    $.each(eqClass, function(eqClass, setting) {
		  $('.' + setting.elClass).equalHeights(setting.minheight, setting.maxheight).css('overflow', setting.overflow)});
	  } 
	
    }
  }
}
})(jQuery);

I'm not sure how to make that a patch, but it works. If anyone wants to test and patch that would probably be a big help to people having this problem.

Anyway, I hope this helps someone.

-Andy

Patch in #23 greatly improves the behavior in my site.

I still think imagesloaded plugin is a better solution than window.load.

@drush fan, do you have a patch that incorporates imagesloaded? I'll happily try it.

It's another dependency, so I need to rework the module to include it.

Check the latest code in dev. I've added a fix for resize and images (you'll need Libraries API and imagesloaded plugin installed).

The patch in -dev fixed a couple cases on one of my sites. Initial testing looks very good. Thanks.

Creating a release soon.

...sorry, but any chance to backport this to 6.x? I have a couple of sites still lingering in D6.

D6 version doesn't have any of the latest enhancements so it's not likely to happen, especially since I'm planning to move to D8 now. Patches are always welcome, of course.

Ok, thanx for taking the time to reply Natalia ;)

...back to original branch and status then.