I'm using a slideshow on my website with jquery cycle. all my slides contain a div named "cartouche_bottom_inside", and I need to adapt each of this divs to the height of my window. my slides are generated via php, so basicaly if have this kind of structure :
<div id="slideshow">
<div class="slide">
<div class="cartouche_bottom_inside">
/* my content */
</div>
</div>
<div class="slide">
<div class="cartouche_bottom_inside">
/* my content */
</div>
</div>
<div class="cartouche_bottom_inside">
/* my content */
</div>
</div>
<div class="slide">
<div class="cartouche_bottom_inside">
/* my content */
</div>
</div>
</div>
with this jquery code I can change the "cartouche_bottom_inside" divs height, depending of various custom variables.
function margin_bottom_cartouche(){
var cartouche_bottom_inside_H = $(".cartouche_bottom_content").height();
var margin_bottom_cartouche_add = windowH - cartouche_bottom_inside_H - cartouche_top_visible_H;
if (cartouche_bottom_inside_H < windowH) {
$(".cartouche_bottom_content").css("height",cartouche_bottom_inside_H + margin_bottom_cartouche_add -cartouche_top_visible_H);
}
}
It works, but 1st, in my if statement, $(".cartouche_bottom_content").height() gets me the sum of all my "cartouche_bottom_inside" divs.
and then it applies the $(".cartouche_bottom_content").height to all my divs (depending of the tallest ".cartouche_bottom_content" div.
What I'm trying to do is :
1st : to check each divs height first
2nd : then check for each divs if the height is smaller to my window height.
3rd : then apply the height to each div independently.
Which means I'll have different heights for all my ".cartouche_bottom_content" divs.
in fact I'm trying to find a way to have a foreach statement, like in php for example...
can anybody help me with this ?
thanks a lot for your time,
If I'm understanding you correctly, you're trying to have it so that each div is set to the view height of the window. In that case and if you're comfortable supporting only modern browsers, you can look into the CSS unit VH and VW for View Height and View Width respectively to set the width and height of your divs.
As for your current JS, I'm not too sure what you're trying to accomplish with your code, if you are trying to set each div to the window height, you wouldn't need to do all those complicated measurements and just set height to client height?