Welcome to WebmasterWorld Guest from 34.229.113.106

Forum Moderators: open

Message Too Old, No Replies

Equal Heights not working until window resize

     
12:00 pm on Mar 27, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I'm using the following script so that I can create equal height blocks in a grid:

<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.equalHeights = function() {
this.each(function(){
var sizeTo = 0;
$(this).find('.block').each(function(){
$(this).height('auto')
if ($(this).height() > sizeTo) {
sizeTo = $(this).height();
}
});
$(this).find('.block').height(sizeTo);
});
return this;
};
$(function(){
$('ul.products').equalHeights()
$(window).bind( "resize", function(e) {
$('ul.products').equalHeights()
});
});
});
</script>


The problem is that it doesn't seem to be firing until I resize my window. What it does initially is to load all of the blocks but overlaps them until browser resize.
1:55 pm on Mar 27, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Seems to be working as expected for me:
[jsfiddle.net...]
2:11 pm on Mar 27, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Yeah, it seems to be okay when having text content but when you then add an image it seems to go to the height of the image initially and then when resizing the window, it realises it has to resize to the block and not the image. Mmmmm.
2:20 pm on Mar 27, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Seems to work for me with images as well:
[jsfiddle.net...]

Perhaps you can provide a sample base case that is failing?
2:27 pm on Mar 27, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


It's a site that's currently in development in Wordpress. I'll try to grab a bit of the code and test locally first. I'll update this thread later on. Thanks for your help.
10:10 am on Apr 5, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I managed to fix this by changing the first line of code from

jQuery(document).ready(function($) {


to

jQuery(window).load(function($) {
12:09 pm on Apr 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 0


Images can be a bit funny with javascript.

Calling this on document.ready will work in some browsers, but just give you 0 in others (For example, current Firefox gives you correct size, Chrome gives 0):

$(document).ready(function() {
var img = $('<img>').attr('src', '/images/an_image.png');
$('body:first').append(img);
console.log(img.height());
});

I seem to recall that .load is not 100% reliable in all browsers - but I was experiencing that problem about 3 years ago. It may no longer be an issue.
1:31 pm on Apr 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


The problem is that document ready triggers when the DOM is ready, but before images have loaded. The window "onload" event happens after all images have loaded as well, which is why that works.