Equal height .js and IMGs?

As part of a content carousel script, I am working on some give a row of sibling elements equal height. My idea was to take the rendered height of the carousel and apply it to each of the slides ( thus all the slides would be the height of the tallest slide). It seems to work as long as I don’t have any IMGs.It seems that unless the height of images is specifically declared ( be it int the HTML or CSS) it is not calculated by the .js EVEN THO IT IS RENDERED TO CONTAIN THE FULL IMAGE.

For example, if all slides have short text, ONE slide has an IMAGE which renders roughly at 300px tall; making it that the tallest slide…and thus the rendered height of the carousel 300px) .I would expect that when I get the clientHeight fro the container it would return 300, but instead it returns only the height as is no image was present… this even tho on screen you can see the container contain the image.

this is the code I am using:

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			#x {overflow:hidden; border:4px solid;   width:960px; margin:0 auto ; position:relative}
			#x>ul { padding:0; margin:0; list-style:none; height:inherit;     transition: margin 1s;  overflow:hidden;}		
			#x>ul>li { width:25%; float:left; height:inherit; color:red; }
			#x>ul>li:nth-child(2n-1){ background:#ccc;}		
			#x>button {
				transition: opacity 1s;
			#x:hover >button{opacity:1;}
			#x>button+button {
		#x img {width:100%;  height: auto; display:block;}

		<div id='x'>
				<li>SLIDE6<img src="CARA-DEL-EXITO.jpg" height="975"  id='y'/><br>dhsghadggdsa</li>
		<button onclick='slide(1);'><</button>
		<button onclick='slide(-1);'>></button>
	<script type="text/javascript">
 	        slides= elUL.getElementsByTagName('li');
		slideWidth= slides[0].offsetWidth;
		SlideShowWidth= el.clientWidth;
		visibleSlides= parseInt(SlideShowWidth/slideWidth);
 		slideWidth=  Number(csss.getPropertyValue('width').replace("px", "")) ;
 		elUL.style.width= (slideWidth * slides.length) + 'px';
 		for(var i=0; i<slides.length; i++) {
			slides[i].style.width = slideWidth +'px';
 		//for(var ii=0; ii<slides.length; ii++) {slides[ii].style.height = el.clientHeight +'px';}
   		elUL.max= ( slides.length * slideWidth)-(visibleSlides* slideWidth);
		elUL.min=elUL.max * -1;
function slide(co){
	 precalc=elUL.marg+(co * elUL.slw);
          if( precalc <=0  && precalc >= elUL.min){
		elUL.marg= precalc;	 
		elUL.style.marginLeft= elUL.marg+'px';


any insights on this would be greatly appreciated

I’ll move you over to the CSS forum for this - they have people who are really good at dealing with presentational issues such as this.

Hi, d_p.

An observation. If I replace the missing image with one from placehold.it, your design scales the image correctly and places the text below it.

PS: I added a doctype, FWIW.

Hi Ray,

I’ve had trouble getting image size in Chrome before and you can’t seem to get their resized size. If you ask for the client Height after the page had rendered (say with clicking a button) then it gives you the correct height but when you try it in the script when the page is loading it doesn’t seem to be able to work it out. Paul would know better about this :slight_smile:

Why can’t you just use display:table-cell instead of float and they will all automatically be the same size.

	#x>ul>li { width:25%; display:table-cell;height:inherit; color:red;background:red }

I’m sure you have a reason why this won’t work for you as I’m sure you would have tried this to start with.

Hi guys… thanks fro chiming in.

Why can’t you just use display:table-cell instead of float and they will all automatically be the same size.

Paul, that was my first thought. But because I was writing this modularly, the # of slides visible could vary AS WELL AS their width. The script counts on a fixed width (potentially set via %) of the LIs to run all the other necessary calcs. So I couldn’t make the LI’s table cells as it would make the dimensions impossible to calculate since tables always add up to 100%.

So I thought I would plot this for the record:

turns out the problem, which as Paul pointed out, was mainly present on webkit was an issue with the images not fully loading before the script ran. I ended up attaching an onload event to each image; I called the equal height script she the last image is loaded and that fixed it!

I so the sake of exercise, I also went with Paul’s approach , except that I used .js to measure the slideshow window and slides, and then set the display mode to table/table cell, which really worked like a charm

Thanks again guys!

Glad you got it working Ray :slight_smile:

Hey, Ray, Would you mind posting the working code? for posterity, of course :shifty: :slight_smile:


I tend to think “code” even when better not to.
It would bug at me delaying page rendering or having the layout readjust.