Conditional statement JQuery

Question

With some help of the people here, I've been able to get the original width of an image with the following code:

var img = new Image();

        img.onload = function () {
            var W2 = this.width;
            alert(W2);
        }

        img.src = document.getElementById('imageViewerImg').src;

Now that I have the width of an image, I need a conditional statement to modify the CSS if an image is wider than 700px.

My code to do this looks like this:

$(document).ready(function(){
        var img = new Image();

        img.onload = function () {
            var W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        if($W2 > 700) {
            $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

But this won't work. I've tried to add an alert box in the conditional statement, so if an image happens to be wider than 700px, it should appear and notify. This alert box won't show up either. Even if I put the alert box outside the if statement and just put in below, it won't work, like this:

$(document).ready(function(){
            var img = new Image();

            img.onload = function () {
                var W2 = this.width;
            }

            img.src = document.getElementById('imageViewerImg').src;

            alert(W2)
        });

Where should I put my if statement in this code to make it work?

Didn't I just answer this -> stackoverflow.com/questions/17813535/… — adeneo
– adeneo, Commented Jul 23, 2013 at 15:21
jsfiddle.net/vXgRm/1 Does this example help? Just made some divs to show getting width and using it in a conditional. — Iron3eagle
– Iron3eagle, Commented Jul 23, 2013 at 15:29

emerson.marini · Accepted Answer · 2013-07-23 15:20:56Z

1

As you're using jQuery, keep everything like this. Don't mix up with regular Javascript DOM manipulation. And your variable needs to be defined in a scope which it's visible across the code.

$(function () {
    var img = new Image();
    var W2 = 0;

    $(img).on("load", function () {
        W2 = $(this).width;
    });

    $(img).attr("src", $("#imageViewerImg").attr("src");

    if (W2 > 700) {
        $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
    }
});

answered Jul 23, 2013 at 15:20

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

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

Comments

Karl Anderson · Accepted Answer · 2013-07-23 15:29:13Z

1

Move your if logic inside of the onload for the image, like this:

$(document).ready(function(){
    var img = new Image();

    img.onload = function () {
        var W2 = this.width;
        if(W2 > 700) {
            $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    }

    img.src = document.getElementById('imageViewerImg').src;
});

Note: JavaScript uses nested scope, so when you defined W2 inside of image.onload it was not available where you originally had the if logic.

edited Jul 23, 2013 at 15:29

answered Jul 23, 2013 at 15:20

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

2 Comments

user2611052 Over a year ago

This won't work. I've added an alert box in the if statement, but it won't show up. I keep having the same problem.

Karl Anderson Over a year ago

Removed $ in front of W2, answer updated. You do not need to reference W2 as a jQuery wrapped set, because it is not one.

marteljn · Accepted Answer · 2013-07-23 15:23:28Z

0

You have a scoping problem:

 $(document).ready(function(){
        var img = new Image();
        var W2;
        img.onload = function () {
            W2 = this.width;
        }

        img.src = document.getElementById('imageViewerImg').src;

        alert(W2);

        if($W2 > 700) {
          $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    });

You need to define W2 where your if statement can access it.

Or

Better yet, you could place your if statement in the onload event handler:

$(document).ready(function(){
    var img = new Image();

    img.onload = function () {
        var W2 = this.width;
        if($W2 > 700) {
          $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
        }
    }

    img.src = document.getElementById('imageViewerImg').src;
});

edited Jul 23, 2013 at 15:23

answered Jul 23, 2013 at 15:17

marteljn

6,5263 gold badges32 silver badges44 bronze badges

4 Comments

user2611052 Over a year ago

I don't really know what a scoping problem is, but when I copy and paste your code, the alert box shows a message 'undefined' and the result I need doesn't appear, I think you're showing the problem to me. Could you help me with solving the scoping problem?

marteljn Over a year ago

If you define W2 inside the onload event handler the outer context cant access it. I edited my answer, place your code in the onload event handler.

marteljn Over a year ago

@user2611052 Im not sure what you are trying to do so I am not surprised it doesn't work. You need to understand the scoping problem you have with your code as well as the order of operations issue you have expecting the 'onload' event handler to execute where you have it placed.

Iron3eagle Over a year ago

All variables have scope. The scope is the region of the program for which the variable is declared. JavaScript has two levels of scope, global and local. A global variable is one that is defined everywhere in your script, as well as, by extension, everywhere in the document containing the script. All predefined variables and objects are global in scope, as are implicitly declared variabled and variables that are defined outside of functions. A local variable is one that is local to a function. In other words, it only exists within the function for the duration of the function.

ron tornambe · Accepted Answer · 2013-07-23 15:26:51Z

0

Since you are using jQuery, you can employ the width() function without needing to define a new Image. For example:

<img src="http://bunkerhill.com/images/bh_commander.jpg" alt="Battle Cry"/>
$(function() {
    var w2=$("img").width();
    alert(w2);
    if (parseInt(w2)>700) {
       //do something
    }
});

jsfiddle

answered Jul 23, 2013 at 15:26

ron tornambe

10.8k8 gold badges38 silver badges61 bronze badges

2 Comments

user2611052 Over a year ago

I've added your code, and yes, it works on JSfiddle, but when I put it on my website, inside the document ready function, the alert box shows the message '0'.

ron tornambe Over a year ago

How are you referencing the image? Within the <body> tag?

Collectives™ on Stack Overflow

Conditional statement JQuery

4 Answers 4

Comments

2 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related