Using CSS Sprites in jQuery Plugin, Spritely?

Question

I've always been terrible with CSS sprites.

I'm attempting to just mess around with the jQuery plugin Spritely but I've been having some trouble just getting a sprite animation to successfully appear.

Here is my barebones HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Mario</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="js/jquery.spritely-0.4.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="mario"></div>
    </div>
</body>
</html>

And my styling:

body {
    background: gray;
}

#wrapper {
    text-align: center;
    margin: 0px auto;
}

#mario {
    background: transparent url(images/sprites/sheets/mario_walk_right.png) 0 0 no-repeat;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1;
}

And finally, the jQuery:

$(document).ready(function() {
    $('#mario').sprite({fps: 8, no_of_frames: 5});
});

Now, I've made sure all of my file paths are correct, so that isn't the problem. But, I'm just faced with a blank page, and no animation. Any ideas?

Thanks!

S L · Accepted Answer · 2011-04-07 05:26:14Z

1

Seems to work with style

#mario {
        background: transparent url('http://www.spritely.net/images/hills-for-docs.jpg') 0 0 no-repeat;

This also seems to work (downloaded from above url)

#mario {
    background: transparent url('hills-for-docs.jpg') 0 0 no-repeat;

edited Apr 7, 2011 at 5:26

answered Apr 7, 2011 at 5:15

S L

14.3k18 gold badges81 silver badges119 bronze badges

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

4 Comments

Qcom Over a year ago

Interesting. I tried, and yes, it does work. It doesn't really make sense considering the path is correct. Also, I forgot quotes around the path url originally, but I tried including them, and still to no avail.

S L Over a year ago

@BOSS you must have some problem with image, i checked into firebug and it is working (it changes background position of image).

Qcom Over a year ago

OK, let me check with a different image. I'd post my image but I don't have access to an FTP server at the moment.

Qcom Over a year ago

Well, it turned out that by just shifting my CSS into the head of my page and into a <style> tag, for some reason it fixed my problem.. I don't understand why that should have an effect on anything, but it fixed the problem.

Collectives™ on Stack Overflow

Using CSS Sprites in jQuery Plugin, Spritely?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related