16 Nov

jQuery stars plugin

I was asked to replicate a “star” effect, where stars appear in various areas around a page and then disappear after a while. I won’t bother linking to the original site as it will be gone shortly, but this is what I came up with:

demo

To use this on your own site, simply download the script, link to it in your page, then add this piece of JavaScript.

$('body').stars();

If you want to use the star image I created, download it to the same directory and tell the plugin where it is:

$('body').stars({
  "i":"stars.png"
});

17 thoughts on “jQuery stars plugin

  1. Hi, Kae!

    Just bought “Jquery 1.3 with PHP” e-book through PacktPub.com and started reading.

    I’m still a beginner in both PHP (even though I’ve written a few applications in it) and JavaScript/jQuery (in this case, completely beginner).

    I’d like to know if there’s a way to make the “Quick Deletes” work with jQuery 1.4 ’cause I can’t get it to work properly here (the rows don’t get deleted).

    Thanks!

    Fabio, writing from Brazil =)

  2. Hi Fabio; yes, I’ve spotted that problem as well.

    The problem is that jQuery 1.3 was okay with JSON such as this: {test:”test”,test2:’test2′}, but that’s technically not accurate.

    jQuery 1.4 is a lot more strict, and insists that double-quotes must be used for both the names and values of parameters, so the above should be {“test”:”test”,”test2″:”test2″}

    I’m hoping to do an updated version of that book next year, after my latest one comes out (in two weeks, I think).

  3. Oh, I see. Thanks for the reply!

    I’ll try to study a little more before asking again! 🙂

    BTW: I’ve also pre-ordered “CMS Design Using PHP and jQuery” from PacktPub. 😀

    Thanks again!

    Fabio, writing again from Brazil!

  4. Fabio, no apology is necessary – the problem was not obvious!

    I hope you enjoy the second book. It’s a bit “heavier” than the first, in that it describes in-depth the building of a CMS. I’d be interested to know what your impressions are!

  5. Thanks, Kae!

    I started with PHP in march, studying at home, but didn’t have much time ’cause I’ve been finishing a bachelor’s degree in advertising.

    I’ve already tried do build a (very) small CMS, but the source code got all messed up. I’m still no good with classes and some functions. 🙁

    I’m already having fun with this book (the way it was written is really easy to understand), so I think I’m going to have a lot of fun with both books (and A LOT to study too!).

    And, as a plus, I get to study and practice english too (at least writing and reading)! 🙂

    Thanks again!

    Fabio

  6. Hey Kae,
    I’m having troubles to use this plugin, it says “$(“body”).stars is not a function”. Can you help me?

    Thanks in advance! And nice plugin!

  7. @Nadia,
    hi – are you running the $(‘body’).stars(); line immediately, or as part of an “onload” event?

    you should make sure the line runs /after/ the HTML has finished loading, to make sure that the entire body element has finished rendering.

  8. Laura, my guess is that you’re viewing in Chrome? I just checked in Chrome and think I see what you’re talking about.

    It looks like this is happening because Chrome is is rounding to the nearest pixel in some of its calculations, while Firefox is doing sub-pixel positioning instead.

  9. No, im viewing in FF10 and opera next. I noticed something similar when i was making solid squares expand while staying in position, which i did by animating its css width/height properties while inversely moving its x/y position so that it would remain in place. It seems to be some strange quirk with browsers.

  10. Hi, thank you for this great script! Is there any possibility to change the number of the stars? I just want to use the script in the head of the page and need more stars 😀
    Thank you! Lara

  11. hello. your plugin seems really nice and easy to reproduce but I have few problems:
    1. number of stars doesn’t change and remains as many images as I have put in html.
    2. stars remain always visible.
    3. they don’t change their positions (i.e. on those places where I put with css).
    so, please help me to resolve the mentioned problems. thank you in advance 🙂

Leave a Reply to Fabio GotoCancel reply