CODEWITHSUNDEEP
jquery
user2611052
user2611052

Reputation: 39

Conditional statement JQuery

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?

Upvotes: 0

Views: 532

Answers (4)

Karl Anderson
Karl Anderson

Reputation: 34834

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.

Upvotes: 1

ron tornambe
ron tornambe

Reputation: 10780

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

Upvotes: 0

marteljn
marteljn

Reputation: 6526

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;
});

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

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"});
    }
});

Upvotes: 1

Related Questions