views:

225

answers:

1

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...

A: 
Pointy
Thanks for that advice. The error occurs at line 4618 within jQuery.I had a look up on that local variables, and noticed that opacity at the end of the list is undefined.But its set to 1 by css, and later to 0 by jQuery... Nothing found like NaN :/
vertic4l
You can have a look here -> http://vertic4l.com/przTest/
vertic4l
OK I've edited the answer - the problem is that the image height is apparently larger than the `<li>` height, so you're trying to set negative padding and that's not allowed.
Pointy
Ah ya, i noticed that -13px too, but didnt knew that it could be the source of all evil. But how do i get around ? :/And i cant really see any -13px padding across all those logos...
vertic4l
edited again - just make sure the value isn't less than zero.
Pointy
The li is 160x160px, every img has 150px width, and max. height 150px, most of those are under 150px...?!You mean, i just should check up with an reg-ex if the value is negative and toggle it to positive?!
vertic4l
Amazing! thanks a lot Pointy, although this means, that the one logo which initiates the problem won't be set centered within the li.The right value for the 8th logo would be padding-top:59px;I don't really understand how it comes out with -13px, but than sets the value to 59px. like in ff or opera it does...
vertic4l
Nah, for real, Math.max isnt the best solution. I've noticed that most of all value are correct. When the error occurs the li.height is suddenly 8 instead of 80, which would be correct.I think the function height just fucks up everything.
vertic4l