Javascript Only Works with alert, why?

Question

The statement I'm concerned about in the following statement is fancybox = 1; That needs to happen if my maxWidth for any of the temporary images I create is over 480.

A little background on the html this interacts with: I have a link wrapped around an image.
The image is a resized version, and the link's href is to the original, unsized image.
There is a series of these link wrapped images
A div, addon-large-image, wraps the whole thing.

For some reason, this code works if I have 'alert(m);' included. I correctly end up in side my final if statement (in this case I do have images wider then 480) and the last alert I get is "Triggered". However, if I comment out 'alert(m);', and change nothing else, 'alert("Triggered");' fails to fire, showing me that I have not, in fact, entered my last conditional.

Any thoughts on what I'm doing wrong here? I have a programming background in Java, but I'm relatively new to Jquery in any heavy sense, so I'm guessing I have a syntax problem of some sort that 'alert(m);' is sort of incidentally fixing.

'tallest' is irrelevant in the scope of my problem, it does what it's supposed to correctly, is used elsewhere, and existed before I implemented maxWidth.

    var tallest = 0;
    var tempImg = new Image();
    var tempSrc = "";
    var maxWidth = 0;

    // Finds the tallest image in the set.
    $("#addon-large-image img").each(function () {
        var n = $(this).attr("height");
        if (tallest < n) {
            tallest = n;
        }

        tempSrc = $(this).parent().attr("href");
        $(tempImg).attr("src", tempSrc);

        var m = $(tempImg).attr("width");

        alert(m);

        if (maxWidth < m) {
            maxWidth = m;
        }
    });

    if (maxWidth > 480) {
        fancybox = 1;
        alert("Triggered");
    }

score 1 · Answer 1 · answered Jan 14 '10 at 19:32

1

Looks like something isn't fully loaded in your script yet. Try running this in a jQuery document.ready and see if it works.

answered Jan 14 '10 at 19:32

nickytonline

6,855
6
42
76

It works with the alert, because by the time you close the alert, your object is fully loaded. – nickytonline Jan 14 '10 at 19:32
2

@Jacob: I just looked at your code again. My guess is maxWidth === 0 which is what you initialized it to. if (maxWidth > 480) { fancybox = 1; alert("Triggered"); } never enters because the foreach starts to run, but it is not complete by the time you check if (maxWidth > 480) . I would put that bit of code with your last alert into the function in the for each and only call it once your on the last element. – nickytonline Jan 14 '10 at 19:39
Ahh, you all are right that the object isn't creating correctly. It also explains why the first alert I get is 0, and all the following ones are widths. I added a count and moved my Triggered if inside the loop, so it only executes on the final run through, but I still have the same problem where my images aren't generated fast enough to get their widths correctly unless the alert is included. Is there a way to ensure that width is only pulled after the image is completely generated? – Jacob Jan 14 '10 at 19:46
@Jacob - This post might help you with your image issues http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript – nickytonline Jan 14 '10 at 20:13

score 0 · Answer 2 · answered Jun 28 '16 at 04:50

Did you use Ajax Request ?

if YES then put you code that didnt work at the end of

AjaxObject.onreadystatechange = function () {
       if (AjaxObject.readyState == 4) {
           .
           .
           .
           .
           .

      // PUT HERE
        }
   }

then if No

use this :

function testName()
{
$(document).ready(function(){
    var tallest = 0;
    var tempImg = new Image();
    var tempSrc = "";
    var maxWidth = 0;

    // Finds the tallest image in the set.
    $("#addon-large-image img").each(function () {
        var n = $(this).attr("height");
        if (tallest < n) {
            tallest = n;
        }

        tempSrc = $(this).parent().attr("href");
        $(tempImg).attr("src", tempSrc);

        var m = $(tempImg).attr("width");

        alert(m);

        if (maxWidth < m) {
            maxWidth = m;
        }
    });
});
return true;
}

hope helps you buddy

Javascript Only Works with alert, why?

2 Answers2