Using Jquery to apply a class if the height of an image is larger than its width

Question

Using Jquery to apply a class if the height of an image is larger than its width

Can someone assist me with a jQuery question regarding adding classes to images?

I am currently working on a DEMO on codepen.io

The issue I'm facing is that the JavaScript isn't adding a class to the image if the height is greater than the width. Is there anyone who can guide me in resolving this?

Below is the jQuery code I have been testing:


$(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

Answer 1

Answer №1

Instead of using

document.getElementById('.user_posted_image')

, consider using $(".user_posted_image"). This way, you are targeting elements by their class name with a class selector.

The document.getElementById method is specifically for identifiers, but if you have jQuery available, you can utilize the #idSelector instead. Additionally, you can make use of the 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): If you are working with multiple images, it's recommended to use the .each method to handle all elements. The first code example only targets 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');
    }
  })
});

Answer 2

Instead of using

document.getElementById('.user_posted_image')

, consider using $(".user_posted_image"). This way, you are targeting elements by their class name with a class selector.

The document.getElementById method is specifically for identifiers, but if you have jQuery available, you can utilize the #idSelector instead. Additionally, you can make use of the 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): If you are working with multiple images, it's recommended to use the .each method to handle all elements. The first code example only targets 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');
    }
  })
});

Answer 3

Answer №2

If you're looking for a solution like this, check out the following link: 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');
    }
  });
});

Go through all divs with the specified class and apply CSS classes based on image orientation.

NOTE: To ensure proper execution, make sure images are loaded before running the script. Consider using the imagesLoaded plugin.

If you include the imagesLoaded plugin, your code will resemble the following:

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

Remember to include the plugin in your HTML:

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

Answer 4

If you're looking for a solution like this, check out the following link: 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');
    }
  });
});

Go through all divs with the specified class and apply CSS classes based on image orientation.

NOTE: To ensure proper execution, make sure images are loaded before running the script. Consider using the imagesLoaded plugin.

If you include the imagesLoaded plugin, your code will resemble the following:

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

Remember to include the plugin in your HTML:

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

Using Jquery to apply a class if the height of an image is larger than its width

Answer №1

Answer №2

Similar questions

Identifying the empty population of a hasMany property

Tips on Implementing a CSS Variable in a React Component

Middleware functions in Mongoose for pre and post actions are not being triggered when attempting to save

Bcrypt.compare function working in code but not functioning in chai/mocha tests

Insert an item into a convoluted array

The styles order definition in the Material-UI production build may vary from that in development

When the button is clicked in Jquery, the HTML is loaded into one div while simultaneously hiding the other div

Javascript - parsing a string to create a mathematical equation

Removing an entry from the array using AngularJS

What is causing the background image size to adjust when the carousel is toggled?

Discover the process of retrieving an element by its ID when dealing with dynamically generated IDs in AngularJS

Issue encountered while trying to import firebase-functions-test for testing using mocha

When IntelliJ starts Spring boot, resources folder assets are not served

Disabling a specific audio element using its ID

Tips for utilizing XMLHttpRequest to instruct a website to take action

How can I utilize data retrieved from $http.get in Vue.js once the page has finished loading?

Shoot back two victories in ajax

Alan AI does not support installation on React Native

Item template with dynamic content for pagination directive

Issues with Subject.subscribe occurring beyond the constructor