Question

I’m working on some jQuery to resize images on a page. This block works fine:

var size = 350;
$("img").each(function () {
    if ($(this).height() > $(this).width()) {
        var h = size;
        var w = Math.ceil(($(this).width() / $(this).height()) * size);
    }
    else {
        var w = size;
        var h = Math.ceil(($(this).height() / $(this).width()) * size);
    }
    $(this).css({ "height": h, "width": w });
});

The problem is small images are scaled up. No problem, one more if statement should take care of that!

var size = 350;
$("img").each(function () {
    if ($(this).height() > size || $(this).width() > size) { //Always false
        if ($(this).height() > $(this).width()) {
            var h = size;
            var w = Math.ceil(($(this).width() / $(this).height()) * size);
        }
        else {
            var w = size;
            var h = Math.ceil(($(this).height() / $(this).width()) * size);
        }
        $(this).css({ "height": h, "width": w });
    }
});

Where am I going wrong here?

Answer 1

Your problem might be that you think you’re getting values from a component, while you’re in fact getting value (or not getting any values other than null) from somewhere else.

A quick and dirty approach is to:

alert(thatDarnedValue);

or, if you know how, write it out to the console window, development DIV or whatever you use to debug and actually see what’s in there.

I often get surprised – “this is not supposed to be there”-experience.

This kind of pitfall is often the case when we’re checking for values of graphical components at different stages of readiness. A document might be loaded but not ready etc.