CODEWITHSUNDEEP
javascriptjqueryjslint
Gerico
Gerico

Reputation: 5169

jQuery jslint var was used before it was defined

I've been using jslint to try see what it says about my code, and i get lots of flags, but i am working through trying improve it. However i am stuck on the error

maxHeight was used before it was defined

My jQuery:

$.fn.thumbSizr = function () { // begin function
    "use strict";
    return this.each(function () {
        var $this = $(this);
            maxWidth = $(this).parent().width(); // Max width for the image
            minHeight = $(this).parent().height();    // Max height for the image
            ratio = 0;  // Used for aspect ratio
            width = $(this).width();    // Current image width
            height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height < minHeight){
            ratio = minHeight / height; // get ratio for scaling image
            $(this).css("height", minHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + (parseInt( $img.css('width') ) / 2) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + (parseInt( $img.css('height') ) / 2) + 'px'
        };

        $img.css( css );
   });
};

I'm no jQuery pro so this might be ropey but i really wanted to make it as good as possible. Can anyone explain and suggest why i am getting this message and how to avoid it in the future?

Thanks

Upvotes: 0

Views: 456

Answers (1)

Andrew Surzhynskyi
Andrew Surzhynskyi

Reputation: 2776

You are using semicolon instead of comma when declaring multiple variable with single "var"

This part is wrong:

 var $this = $(this);
     maxWidth = $(this).parent().width(); // Max width for the image
     minHeight = $(this).parent().height();    // Max height for the image
     ratio = 0;  // Used for aspect ratio
     width = $(this).width();    // Current image width
     height = $(this).height();  // Current image height

fixed:

 var $this = $(this),
     maxWidth = $(this).parent().width(), // Max width for the image
     minHeight = $(this).parent().height(),    // Max height for the image
     ratio = 0,  // Used for aspect ratio
     width = $(this).width(),    // Current image width
     height = $(this).height();  // Current image height

Upvotes: 2

Related Questions