jQuery function is not using the variables

Question

I have found a code here on stackoverflow to check if the picture was portrait or landscape oriented, and add css width and height formatting.

After getting it to work (hence the $LSC everywhere), I found that it immediately jumps to "else", and outputs only that result. (all images get width auto and height 100%)

My question is, what should I change in the code to make it work and really compare width and height?

var $LSC = jQuery.noConflict();

$LSC(document).ready(function(){

    $LSC(".pg-cat-image").each(function(){    
        var real_width = $LSC(this).width();
        var real_height = $LSC(this).height();
        var parentwidth = $LSC(this).parent().width();
        var parentheight = $LSC(this).parent().height();

        var ratioParent = parentwidth / parentheight;
        var ratio = real_width / real_height;    

        if (ratioParent < ratio) {        
            $LSC(this).css({'width' : '100%', 'height' : 'auto'});
        }else{
            $LSC(this).css({'width' : 'auto', 'height' : '100%'});
        }
    });

});

At the very least have you checked that ratio and ratioParent are what you expect them to be? — David Thomas
– David Thomas, Commented Mar 4, 2015 at 12:07
Added breakpoint, came up with Uncaught ReferenceError: real_width is not defined. Added user333216's change, and it looks like it needed to wait after the load event. Also used Stian's change to the code, for a cleaner code, now it works perfectly (even for squares :) ) — Gregdawn
– Gregdawn, Commented Mar 4, 2015 at 16:45

Stian Martinsen · Accepted Answer · 2015-03-04 12:06:02Z

2

I don't understand why you're involving the parent container. Can't you just compare the image's width with it's height?

var $LSC = jQuery.noConflict();

$LSC(document).ready(function(){

    $LSC(".pg-cat-image").each(function(){    
        var real_width = $LSC(this).width();
        var real_height = $LSC(this).height();  

        if (real_width > real_height) {        
            // The image is landscape
        } else if (real_width < real_height) {
            // The image is portrait
        } else {
            // The image is square
        }
    });
});

answered Mar 4, 2015 at 12:06

Stian Martinsen

6545 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iamalismith · Accepted Answer · 2015-03-04 12:02:15Z

It's possible your jQuery code is running before the images have loaded, so the widths and heights calculated for the image may be coming out as 0. As the parent element is likely a block level element it will have a width, and this would explain why the calculation always ends up in the "else" section.

You could try wrapping the whole thing in $(window).load(function() {}); instead of document ready, this will wait until the whole page including images has loaded. http://api.jquery.com/load-event/

$(window).load(function() {
    // this will fire after the entire page is loaded, including images
});

So....

$LSC(window).load(function(){

    $LSC(".pg-cat-image").each(function(){    
        var real_width = $LSC(this).width();
        var real_height = $LSC(this).height();
        var parentwidth = $LSC(this).parent().width();
        var parentheight = $LSC(this).parent().height();

        var ratioParent = parentwidth / parentheight;
        var ratio = real_width / real_height;    

        if (ratioParent < ratio) {        
            $LSC(this).css({'width' : '100%', 'height' : 'auto'});
        }else{
            $LSC(this).css({'width' : 'auto', 'height' : '100%'});
        }
    });

});

Collectives™ on Stack Overflow

jQuery function is not using the variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related