Hey everyone,
i got a list of logos, which have to be centered, so far so good. While accessing the page i've noticed that the pictures got an ugly jump while being positioned. So i've decided to set a div above those logos, drop opacity from 1 to 0 and finally remove it, so that their are clickable again.
Works very nice in Firefox, Opera, etc. But NOT within IE.
I switched over to the fullversion of jQuery. The debugger output looks like that:
if ( set ) {
style[ name ] = value;
}
Here is the code i use and the html:
jQuery(window).load(function() {
jQuery(".img_center").each(function(){
var $li = jQuery(this), $img = $li.find('img');
$img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
});
jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
jQuery(this).remove();
});
});
Html:
<li class="img_center">
<div class="overlay_pic"></div>
<a href="">
<img src="image/logos/countryclassics.jpg" border="0" alt="" />
</a>
</li>
<li style="margin:0;" class="img_center">
<div class="overlay_pic"></div>
<a href="">
<img src="image/logos/donna.jpg" border="0" alt="" />
</a>
</li>
css:
.overlay_pic{
width:inherit;
height:inherit;
background:white;
opacity:1;
position:absolute;
}
any ideas? :/
Edit: Ok, positioning is the source of that error. The calculation of the padding-top value jumps between correct value and bullshit bingo.
li height (half) normally -> 80, but sometimes just 8. Which results in padding-top -13px.
so, new calculation function for the win?!
Edit3: Ok, f*** off dynamic calculation...
SOLUTION
jQuery(window).load(function() {
var li = "80";
jQuery(".img_center").each(function(){
var $li = jQuery(this), $img = $li.find('img');
$img.css('padding-top', (li) - ($img.height() / 2));
});
jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
jQuery(this).remove();
});
});
I set the height static, without calculation. Thank god it's not a full dynamic ul li box...