• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 524
  • Last Modified:

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

0
yingwho
Asked:
yingwho
  • 2
2 Solutions
 
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
 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now