Simple JQuery script working on JSFiddle, not on my site

Question

I'm trying to get the original width of an image with JQuery and make some adjustments in the CSS with a condition if an image is wider than 700px.

I used this code to get the width of an image:

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
img.onload = function () {
    var W2 = this.width;
    alert(''+ W2);
}

Fiddle

You can see that an alert box shows the width of the image, in this case 1024. When I copy paste this code, it doesn't work on my website. It simply won't display the alert box. I have JQuery included properly, as other JQuery codes work, it's just this simple piece of JQuery that doesn't do what it's supposed to do.

At the end, this is the code I need for the functionality I'm trying to create:

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
img.onload = function() {
    var imgWidth = this.width;
}
if($imgWidth > 700) {
    $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
}

Why does the alert box show up on JSfiddle but not on my own PC?

Also with the document.ready function, it still won't work. The JQuery is simply not being executed.

Did you remember the document ready function, jsFiddle will add that for you automagically. — adeneo
– adeneo, Commented Jul 23, 2013 at 14:47
$imgWidth is undeclared in your code. and imgWidth is useless in this context. — Mark Schultheiss
– Mark Schultheiss, Commented Jul 23, 2013 at 15:01

Karl Anderson · Accepted Answer · 2013-07-23 14:49:20Z

2

Use the jQuery document ready function like this:

$(document).ready(function(){

});

This is a common "bug" with code that is copied from jsFiddles.

answered Jul 23, 2013 at 14:49

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

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

Comments

adeneo · Accepted Answer · 2013-07-23 15:03:44Z

1

Try it like this:

var img = new Image();
img.onload = function () {
    var W2 = this.width;
    if(W2 > 700) {
        var photoHolder = document.getElementById("photoHolder");
        photoHolder.style.verticalAlign = 'none';
        photoHolder.style.textAlign = 'none';
    }
}
img.src = document.getElementById('imageViewerImg').src;

Also, open the console and check for errors, check that you only have one element with that ID etc.

edited Jul 23, 2013 at 15:03

answered Jul 23, 2013 at 14:57

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

adeneo Over a year ago

@user2611052 - note that this doesn't use jQuery and it sets the source after the load function.

Okazari · Accepted Answer · 2013-07-23 14:49:09Z

0

Use that to be sure that your code will be executed after the html loading.

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

    img.src = $('#imageViewerImg').attr('src');

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

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

answered Jul 23, 2013 at 14:49

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2013-07-23 15:05:01Z

0

your variable $imgWidth is undeclared in your code, and imgWidth will not have scope outside your function.

try:

var img = new Image();
img.src = $('#imageViewerImg').attr('src');
var imgWidth='';
img.onload = function() {
    imgWidth = this.width;
}
if(imgWidth > 700) {
    $("#photoHolder").css({"vertical-align":"none","text-align:":"none"});
}

answered Jul 23, 2013 at 15:05

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Collectives™ on Stack Overflow

Simple JQuery script working on JSFiddle, not on my site

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related