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:
<html>
<head>
<title></title>
<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 {
position:absolute;
top:50%;
left:-10px;
height:2em;
margin-top:-1em;
opacity:0;
transition: opacity 1s;
}
#x:hover >button{opacity:1;}
#x>button+button {
left:auto;
right:-10px;
}
#x img {width:100%; height: auto; display:block;}
</style>
</head>
<body>
<div id='x'>
<ul>
<li>SLIDE1</li>
<li>SLIDE2</li>
<li>SLIDE3</li>
<li>SLIDE4<br>sdddz</li>
<li>SLIDE5</li>
<li>SLIDE6<img src="CARA-DEL-EXITO.jpg" height="975" id='y'/><br>dhsghadggdsa</li>
<li>SLIDE7<br>sdddz<br>sdddz<br>sdddz<<br>sdddz<br>sdddz<br>sdddz</li>
<li>SLIDE8</li>
<li>SLIDE9</li>
<li>SLIDE10</li>
</ul>
<button onclick='slide(1);'><</button>
<button onclick='slide(-1);'>></button>
</div>
</body>
<script type="text/javascript">
el=document.getElementById('x');
elUL=el.getElementsByTagName('ul');
elUL=elUL[0];
slides= elUL.getElementsByTagName('li');
slideWidth= slides[0].offsetWidth;
SlideShowWidth= el.clientWidth;
visibleSlides= parseInt(SlideShowWidth/slideWidth);
csss=window.getComputedStyle(slides[0]);
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;
elUL.slw=slideWidth;
elUL.marg=0;
elUL.Vs=visibleSlides;
function slide(co){
precalc=elUL.marg+(co * elUL.slw);
if( precalc <=0 && precalc >= elUL.min){
elUL.marg= precalc;
elUL.style.marginLeft= elUL.marg+'px';
}
}
</script>
</html>
any insights on this would be greatly appreciated
