Response title
This is preview!
each() not working as expected
in Using jQuery
•
9 years ago
Base on on the height (variable) of the image(s), css property (position/left/top) is being assigned to position it center (vertical & horizontal) within a <div> with in a fixed height.
Class assigned to <div> = .imageContainer
<script>
$( document).ready(function() {
$( ".imageContainer img" ).each(function() {
$('.imageContainer img').css({
position:'absolute',
left: ($('.imageContainer').width() - $('.imageContainer img').outerWidth())/2,
top: ($('.imageContainer').height() - $('.imageContainer img').outerHeight())/2
});
});
});
</script>
HTML Structure:
<ul>
<li>
<div class="imageContainer"> <img alt="ChicagoDanielSilva1" src="images/ChicagoDanielSilva11-180x88.jpg"> </div>
<h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
</li>
<li>
<div class="imageContainer"> <img alt="ChicagoDanielSilva1" src="images/DanielSilvaLABookEvent-142x200.jpg"> </div>
<h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
</li>
<li>
<div class="imageContainer"> <img alt="ChicagoDanielSilva1" src="images/Florida15Grandmothers-143x200.jpg"> </div>
<h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
</li>
</ul>
For the first <div> & <img> the value is perfect, but for the rest, the same value of the position is getting assigned. Rather it should calculate unique value position for each <img> items, as the dimension of the image will vary.
Any suggestion on above will be appreciated... Thanks in Advance..!
1