As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.

$(document).ready(function() {
    var image = $('.work-each img');
        if (image.width() < 500) {
            $('.work-text').addClass('work-text-small');
        }
});

This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.

Example of HTML (for each)

<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>

Thanks, R

As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.

$(document).ready(function() {
    var image = $('.work-each img');
        if (image.width() < 500) {
            $('.work-text').addClass('work-text-small');
        }
});

This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.

Example of HTML (for each)

<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>

Thanks, R

• javascript
• jquery
• image

• Post relevant HTML please – A. Wolff Commented Jan 13, 2013 at 16:12
• If you try to console.log the width you're getting it's probably zero, as the image has'nt loaded when you try to get the width. You'll have to wait until the image is loaded before you get the size of the image. Try something like this FIDDLE – adeneo Commented Jan 13, 2013 at 16:13
• @rdck - The sample HTML sucks, if the image has no source, how do you expect it to have a width ? – adeneo Commented Jan 13, 2013 at 16:17
• It does have a width, obviously, I was just posting the HTML structure. JEEZ. – John the Painter Commented Jan 13, 2013 at 16:19
• 1 add the class on server at same time, no jQuery needed and css would be be immediate on page load – charlietfl Commented Jan 13, 2013 at 16:33

2 Answers 2

Use load instead, when DOM is ready only img tag is defined but the image isn't loaded yet. Its size es when it's fully loaded

$(window).load(function () {
    var image = $('.work-each img');
    if (image.width() < 500) {
        $('.work-text').addClass('work-text-small');
    }
});

However as @rdck pointed if there are more images with class=".work-each img" code won't work so in that case you go trough each image and apply the class

$(window).load(function () {
    var image = $('.work-each img');
    image.each(function () {
        var that = $(this);
        if (that.width() < 500) {
            that.next('div.work-text').addClass('work-text-small');
        }
    })

});

If you get dimensions using server code and set class accordingly, there would be no need to wait for image to load and css would immediately take effect as soon as html exists