Search code examples
javascriptjqueryhoverjsfiddlespritely

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


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

Solution

  • 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.