code works in js fiddle but not in dreamweaver or on server

Question

http://jsfiddle.net/reveries/9Dt7n/ http://www.reveriesrefined.com/test/

When you hove over the door, it's supposed to animate... and in jsfiddle it works brilliantly, but once I put this code on my website, it stops working. You will still see the image, but when you hover over it, there's no animation. I'm wondering if maybe js fiddle has some hidden code that i'm not including??

jQuery (w/srpitely)

var iFrames = 23,
iFps = 24,
bRewind = false,
iStartFrame = -1,
bAnimating = false,
stopAndRewind = function(oAnim) {
    iStartFrame = ~iStartFrame ? -1 : iFrames - 2;
    bRewind = !bRewind;
    bAnimating = false;
    oAnim.spStop();
};
$("#door").on("mouseenter mouseleave", function() {
var iCurFrame = iStartFrame;
if ($._spritely.instances && $._spritely.instances[$(this).prop("id")])
{
    if (bAnimating)
    {
        iCurFrame = $(this).spGet("current_frame");
        stopAndRewind($(this));
    }
    $(this).destroy();
}
bAnimating = true;
$(this).sprite({
    fps: iFps,
    no_of_frames: iFrames,
    start_at_frame: iCurFrame,
    rewind: bRewind,
    on_frame: (function() {
        var o = {},
            i = 1;
        if (!bRewind)
        {
            i = iFrames - 2;
        }
        o[i] = stopAndRewind;
        return o;
    })()
});
});

T.J. Crowder · Accepted Answer · 2012-12-03T23:27:31.203

1

Completely Changed Answer:

On your website, you have invalid characters in the /test/javascript/open_close.js file. So nothing in that file will work, because the parser chokes on them.

The end of the file is:

});â€‹

});

Note the invalid characters.

If you copied-and-pasted from jsFiddle, that's probably where they came from. jsFiddle's editor fields have these weird characters in them, I don't know why. I've noticed it several times in the past.

Original answer before actually looking at website (having missed the link):

You have jsFiddle set to include your code in an onload handler, so it happens very late in the page load cycle, once all the DOM elements are there (and images have downloaded, etc.). (This is jsFiddle's default, I couldn't tell you why, you're not the first to fall afoul of it.) If your own page has the script just inline, and in particular if the script tag is above the elements its working with, that's the problem.

edited Dec 03 '12 at 23:27

answered Dec 03 '12 at 23:17

T.J. Crowder

1,031,962
187
1,923
1,875

so should I include: $(document).ready(function () { code...etc... – user1868086 Dec 03 '12 at 23:20
1

@user1868086: A lot of people do. I personally believe the only valid use case for `ready` is libraries. If you control where the `script` element goes, just put it at the bottom of the page, just before the closing `
` tag. Then it will have access to all of the elements defined above it (which is to say, all of them). That's what the [YUI folks recommend](http://developer.yahoo.com/performance/rules.html), and the developers behind [Google Closure](http://groups.google.com/group/closure-library-discuss/browse_thread/thread/1beecbb5d6afcb41).
– T.J. Crowder Dec 03 '12 at 23:22
1

@T.J.Crowder: I think you must be looking at the wrong thing. All the relevant ` – ruakh Dec 03 '12 at 23:23
1

@ruakh: Ah, I didn't even really see the link to his site, so I was working on theory. Thanks. – T.J. Crowder Dec 03 '12 at 23:25
yep, ruakh is right, all the – user1868086 Dec 03 '12 at 23:29
1

@user1868086: Look and the updated answer (or at ruakh's). Your `open_close.js` file is messed up. – T.J. Crowder Dec 03 '12 at 23:29
I just checked, and the open_close.js file is fine, there aren't any illegal characters in it. – user1868086 Dec 03 '12 at 23:32
1

@user1868086: But there are. At the very end. Depending on your text-editor, they might look invisible; you might try going to the very end of the file and hitting "backspace" and "delete" a few times, then retyping the last few JavaScript characters. – ruakh Dec 03 '12 at 23:35
1

@user1868086: No, it isn't. It has the invalid characters I mention above (they may be invisible in your editor), and Chrome's console clearly shows errors caused by them, as does Firebug's. – T.J. Crowder Dec 03 '12 at 23:35
haha it was invisible in my scrpt editor from my website, but you were right!!! thanks it's working now. – user1868086 Dec 03 '12 at 23:36

score 1 · Answer 2 · answered Dec 03 '12 at 23:22

1

I'm not sure if this is the problem, but Firefox's Error Console reports that you have some garbage characters at the end of open_close.js.

answered Dec 03 '12 at 23:22

ruakh

175,680
26
273
307

code works in js fiddle but not in dreamweaver or on server

2 Answers2