I have one question about jquery addClass image.

I am trying this think in this DEMO from codepen.io

So the problem is the javascript is not adding class from the image if image height greater than the width. Anyone can help me in this regard ?

This is my test jquery code:

$(document).ready(function() {
  var img = document.getElementById('.user_posted_image');
  //or however you get a handle to the IMG
  var width = img.clientWidth;
  var height = img.clientHeight;

  if(width < height){
     $('img').addClass('portrait');
  }
});

I have one question about jquery addClass image.

I am trying this think in this DEMO from codepen.io

So the problem is the javascript is not adding class from the image if image height greater than the width. Anyone can help me in this regard ?

This is my test jquery code:

$(document).ready(function() {
  var img = document.getElementById('.user_posted_image');
  //or however you get a handle to the IMG
  var width = img.clientWidth;
  var height = img.clientHeight;

  if(width < height){
     $('img').addClass('portrait');
  }
});

• javascript
• jquery
• css

• 2 Why are you passing a class selector to getElementById? – Ram Commented Jun 27, 2015 at 15:50
• images are not loaded fully when document ready is fired. You can not use a class name with getElementById – epascarello Commented Jun 27, 2015 at 15:50
• Also $('img').addClass('portrait') will add the class to ALL images on that page. If you want to make your img var into a jquery object, it's $(img) (without quotes) – Jan Commented Jun 27, 2015 at 15:51

2 Answers 2

Use $(".user_posted_image") instead of document.getElementById('.user_posted_image'). You are trying to get an item by .classSelector.

document.getElementById it is just for identifiers, But if you have the jQuery library, you can use #idSelector instead. Also, you can take advantage of jQuery.width() and jQuery.height() methods.

$(document).ready(function() {
  var img = $('#user_posted_image');//jQuery id selector

  var width = img.width(); //jQuery width method
  var height = img.height(); //jQuery height method

  if(width < height){
     img.addClass('portrait');
  }
});

<img id="user_posted_image" src="image.png" width="100" height="150" />

Edit (Demo CodePen): You are using multiple images, you should use the .each method to refer to all elements, in the first code only works in one element.

$(document).ready(function() {
  var imgs = $('.imgpreview');//jQuery class selector
  imgs.each(function(){
    var img = $(this);
    var width = img.width(); //jQuery width method
    var height = img.height(); //jQuery height method
    if(width < height){
       img.addClass('portrait');
    }else{
       img.addClass('landscape');
    }
  })
});

Guessing you want something like this: http://codepen.io/BramVanroy/pen/MwrJMx

$(document).ready(function() {
  var img = $('.user_posted_image');
  img.each(function() {
    var $this = $(this),
        width = $this.children("img").width(),
        height = $this.children("img").height();
    if (width < height) {
      $this.addClass('portrait');
    } else {
      $this.addClass('landscape');
    }
  });
});

Iterate over all the divs with the designated class. If the image that's inside has a width that's smaller than its height: add class portrait. Else: add class landscape.

NOTE: as has been pointed out in the ments, you'll need to wait for the images to load to succesfully run this script. I have succesfully used the imagesLoaded plugin in the past.

Including the imagesLoaded plugin, it will look like this:

$(document).ready(function() {
  $(".chated-poeople").imagesLoaded(function() {
    var img = $('.user_posted_image');
    img.each(function() {
      var $this = $(this),
        width = $this.children("img").width(),
        height = $this.children("img").height();
      if (width < height) {
        $this.addClass('portrait');
      } else {
        $this.addClass('landscape');
      }
    });
  });
});

Don't forget to add the plugin in your HTML:

<script src="//cdnjs.cloudflare./ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>