height of the container

there is a function that gets the height of all the divs and assigns the tallest height to all the 3 to make it look same height.
it works in all browsers except in safari and chrome. these 2 browsers calculate the height wrongly omitting the height of the elements inside the contents.
ball 1 and ball 2 div needs to be at the bottom clearly visible separate.
pl suggest. the problem is due to images inside the div. and its very tricky.
<!DOCTYPE html>
<html>
<head>
  <style>
  div { border:1px solid blue }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
        $(document).ready(function() { 
            var height=0;
            $('.ruby').each(function(){
             if($(this).height() > height)
                height = $(this).height();
             });
             alert(height);
             $('.ruby').css({height:height});
       });
  </script>
</head>
<body>
  <div class="ruby">ffafaf</div>
  <div class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height;
  <img src="http://www.football-shirts.co.uk/images/0809/euro2008ball.jpg" border="0" alt="">
  </div>
  <div class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height S
  <img src="http://www.footy-boots.com/wp-content/uploads/2007/12/adidas-african-cup-match-ball-wawa-aba.jpg" border="0" alt="">
  </div>
  <div class="ball">ball 1 ball 2</div>
</body>
</html>

Open in new window

yingwhoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Try offsetHeight instead

<!DOCTYPE html>
<html>
<head>
  <style>
  div { border:1px solid blue }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
        $(document).ready(function() { 
            var height=0;
            $('.ruby').each(function(){
             if($(this).height() > height)
                height = $(this)[0].offsetHeight;
             });
             alert(height);
             $('.ruby').css({height:height});
       });
       
  </script>
</head>
<body>
  <div class="ruby">ffafaf</div>
  <div class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height;
  <img src="http://www.football-shirts.co.uk/images/0809/euro2008ball.jpg" border="0" alt="">
  </div>
  <div id="test" class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height S
  <img src="http://www.footy-boots.com/wp-content/uploads/2007/12/adidas-african-cup-match-ball-wawa-aba.jpg" border="0" alt="">
  </div>
  <div class="ball">ball 1 ball 2</div>
</body>
</html>

Open in new window

0
yingwhoAuthor Commented:
offsetheight gives value 0 and wrong small value in some places. is there any other way to resolve this?
0
remorinaCommented:
Safari and Chrome have a problem knowing the correct dimension before the images are done loading hence the document.ready doesn't work well for them

Try using  $(window).load instead of $(document).ready and see if it works
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Terry_focusCommented:
Here you go I think I've cracked it.

remorina is right, in Safari and Chrome the JavaScript and CSS both load simultaneously and make it impossible to get height/width info until later.

See below for a fix and recursive function to get max height of all objects contained
<!DOCTYPE html>
<html>
<head>
  <style>
  div { border:1px solid blue }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
		$(document).ready(function() {
			//If it is safari or chrome we must wait for the CSS to be ready
			if (jQuery.browser.safari && document.readyState != "complete"){
				//console.info('ready...');
				setTimeout( arguments.callee, 100 );
				return;
			} 
			//Get the max Height
			var height = maxHeight($(".ruby"));
			alert(height);
			$('.ruby').css({height:height});
		});
		//Recursive function to find the heightest object
		function maxHeight($sel){
			//Height of tallest object
			var h = 0;
			//Heighest of internal objects
			var innerH = 0;
			//Foreach of the objects
			$sel.each(function(){
				//If there is children, get the height
				if($("*",this).length>0){
				innerH=Math.max(maxHeight($("*",this),innerH));
				}
				//Find the biggest of the object, it's inner objects and the current max
				h=Math.max($(this).outerHeight(),innerH,h);
				innerH = 0;
			});
			//Return maximum
			return h;
		}
  </script>
</head>
<body>
  <div class="ruby">ffafaf</div>
  <div class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height;
  		<img src="http://www.football-shirts.co.uk/images/0809/euro2008ball.jpg" border="0" alt="">
  </div>
  <div class="ruby"> Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height Sample paragraph to test height S
  		<img src="http://www.footy-boots.com/wp-content/uploads/2007/12/adidas-african-cup-match-ball-wawa-aba.jpg" border="0" alt="">
  </div>
  <div class="ball">ball 1 ball 2</div>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.