jQuery get height & width.

Question

$(document).ready(function() {
var pic = $(".pic");

// need to remove these in of case img-element has set width and height
$(".pic").each(function() {
    var $this = $(this);
    $this.removeAttr("width"); 
    $this.removeAttr("height");

    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<100){
    $(this).css("display","none");
    }
    });

 });

Solved thanks to the kind people here at stackoverflow. As I said I've added an if function to check if the width is under 100px. For some reason it hides everything. Anyone know why?

Answer 1

You're using pic when you should be using $(this):

$(".pic").each(function() {
    var $this = $(this);
    $this.removeAttr("width"); 
    $this.removeAttr("height");

    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    alert(pic_real_width);
     });

You should also watch for images that are resized with CSS.

Instead of

    $this.removeAttr("width"); 
    $this.removeAttr("height");

try

$this.css({width: 'auto', height: 'auto'});

Answer 2

Try this:

$(document).ready(function() {
    $(".pic").each(function() {
     var pic = $( this );
     pic.removeAttr("width"); 
     pic.removeAttr("height");

     var pic_real_width = pic.width();
     var pic_real_height = pic.height();
     alert(pic_real_width);
    });
});