jquery works in console, but not in linked js file

Question

I am using a jQuery script to add a class (portrait or landscape) depending on their dimensions. Then I am using jQuery to center the image vertically. The script works perfectly when I past it into the console, but not when I link it in the document head. Here is the code I have:

jQuery( document ).ready(
    function() {
        jQuery(".imgResize").each( function () {
            var $this = jQuery(this);
            if ( $this.width() > $this.height() ) {
                $this.addClass("landscape");
            } else if ( $this.width() < $this.height() ) {
                $this.addClass("portrait");
            } else {
        }
        var $h = $this.height();
        $this.css('margin-top', + $h / -2 + "px");
    });
});

What would cause this issue?

If you are writing `Console.log` and try to run into `IE` then it will not work. `IE` not support `Console` — Amit, Oct 14 '13 at 06:04
that is the problem... when you run the script the images may not be loaded — Arun P Johny, Oct 14 '13 at 06:07
@SnakeEyes I'm not using console.log, bro. I'm just pasting the code into Chrome's console from devtools — jordan, Oct 14 '13 at 06:08
There might be a problem that your Script is running before the loading of image or dom. That's why it is happening. — Shivam Chopra, Oct 14 '13 at 06:08
@ArunPJohny Why would the images not be loaded? I'm using .ready on the document — jordan, Oct 14 '13 at 06:09
"Doesn't work" is too vague. What does happen? Are any errors reported in the JS console? Does the function run at all (add a breakpoint or console.log to test)? — Quentin, Oct 14 '13 at 06:12
see http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin — Arun P Johny, Oct 14 '13 at 06:12
can you put the html along with this code in some snippet like gist and share it with us, it'll be easier to help you then, Otherwise we all will keep guessing — Brij Raj Singh - MSFT, Oct 14 '13 at 06:13
@ArunPJohny Thank you for your answer! It worked for me. I noticed your answer was deleted. If you repost it I will mark it correct and upvote. Thank you for your answer! — jordan, Oct 14 '13 at 06:13

Arun P Johny · Accepted Answer · 2013-10-14T06:15:50.933

You need to wait for the images to be loaded

jQuery(document).ready(function () {
    jQuery(".imgResize").on('load', function () {
        var $this = jQuery(this);
        if ($this.width() > $this.height()) {
            $this.addClass("landscape");
        } else if ($this.width() < $this.height()) {
            $this.addClass("portrait");
        } else {

        }
        var $h = $this.height();
        $this.css('margin-top', +$h / -2 + "px");
    });
});

score 0 · Answer 2 · answered Oct 14 '13 at 06:19

Actually In your case, your jQuery Script is running before loading of the image. So, if you want to run your script on after loading the image.

Then you need to use jQuery Load

Solution

jQuery( document ).ready(
    function() {
        jQuery(".imgResize").on('load', function () {
            var $this = jQuery(this);
            if ( $this.width() > $this.height() ) {
                $this.addClass("landscape");
            } else if ( $this.width() < $this.height() ) {
                $this.addClass("portrait");
            } else {
        }
        var $h = $this.height();
        $this.css('margin-top', + $h / -2 + "px");
    });
});

jquery works in console, but not in linked js file

2 Answers2

Linked