CODEWITHSUNDEEP
javascriptjquerycss
user4082764
user4082764

Reputation:

Jquery addClass if image height greater than the width

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');
  }
});

Upvotes: 1

Views: 6246

Answers (2)

Walter Chapilliquen - wZVanG
Walter Chapilliquen - wZVanG

Reputation: 12004

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');
    }
  })
});

Upvotes: 3

Bram Vanroy
Bram Vanroy

Reputation: 28465

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 comments, 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.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>

Upvotes: 2

Related Questions