jquery CSS doesn't work in webkit

Question

I'm trying to apply some css to an image tag if the image is portrait, but for some reason .css() doesn't work in webkit. Basically the image tag doesn't get the 'style' property. Here's my code:

$(document).ready(function () {

    $('.listing .item .thumb img').each(function () {

          var _img = $(this);
          var _imgWidth = _img.outerWidth();
          var _imgHeight = _img.outerHeight();

          if (_imgHeight > _imgWidth) {
               _img.css('top', '-40%');
          }
    });
});

<div class="listing about">
    <div class="item">
        <a href="#" class="thumb">
            <img src="../_uploads/siteassets/images/thumb-carousel-2.jpg" />
            <span class="frame"></span>
        </a>
        <span class="snippet">
            <a href="#" class="title">Name Surname</a>
            <span class="date">Role in the company</span>
            <p class="description">Lorem ipsum dolor sit amet...</p>
        </span>
    </div>
</div>

I've tried to use .attr() instead of .css() but nothing. It doesn't work!

Any idea why?

top attrubute will work only when element have attrribute position with values absolute, relative or static. Also, I'm not sure top accepts percentage values. — servik
– servik, Commented Oct 25, 2011 at 11:30
the image is absolute positioned and yes it accept percentage, it works in all other browsers except webkit. — Mauro74
– Mauro74, Commented Oct 25, 2011 at 11:32

thirtydot · Accepted Answer · 2011-10-25 11:36:15Z

4

When .ready() is fired, the images probably don't have their dimensions set.

0 > 0 is false, so the top property is never set.

Use $(window).load(); instead, or this plugin.

answered Oct 25, 2011 at 11:36

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mauro74 Over a year ago

Thanks, it works! Still I don't get why using .ready() it works in all others browsers...Anyway thanks for your help! :)

Elliot Nelson Over a year ago

If you explicitly set width and height attributes on your images (which I would recommend), your first version should work as well. Sometimes there are reasons you can't or don't want to do that, but I thought I'd mention it.

keyser · Accepted Answer · 2012-10-27 22:56:41Z

0

Webkit doesn't interpret the offset left or top beacuse the default position is none, add position relative. Gecko of mozilla interprete the offset when have position relative or not.

    <div style="position: relative; left: 10px;"></div>
    <script>
         alert($('div').offset().left);
    </script>

edited Oct 27, 2012 at 22:56

keyser

19.3k16 gold badges62 silver badges103 bronze badges

answered Jan 24, 2012 at 12:49

WHK

1

Collectives™ on Stack Overflow

jquery CSS doesn't work in webkit

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related