Plugins

THEMES: <link href=”{{ path to js folder}}/egstar-rating/theme-light/egstar-rating.css” rel=”stylesheet” />
setting default description
Note: All settings are optional, they will just be set to the default if none are passed.
This is where you set how many stars you want visible, example: ‘maxstars’ = 3, you can go as high as you like, but remember your page size.
Allow half ratings like 3.5 or 1.5, if set to false it will only allow hole numbers, example: ‘halfstars’ = true.
Allow the user to edit the rating they submitted, if set to false it will hide the “edit” link.
This is the animation speed in milliseconds when the box resizes after being clicked.
Enter the name of your function that you want to call here. Do not include the parentheses. The name of your callback function, It will default to false if not entered. If you want to use it, your callback would look like something like this: myFunction(){ // your code in here, like an ajax call or something to post the rating. var rating = this.rating; var input = this.input; // This is the dom obj for the input. }
28 This is the width in pixels of the large stars, set this only if you are creating your own theme.
14 This is the width in pixels of the small stars, set this only if you are creating your own theme.
This table was made pretty with tablestyler.com
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Your WebSite</title>
<link href=”{{ path to js folder}}/egstar-rating/theme-light/egstar-rating.css” rel=”stylesheet” />
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ path to js folder}}/egstar-rating/egstar-rating.min.js“></script>
<script type=”text/javascript“>
$(document).ready(function)(){
     $(“.eg-input“).elistars({ maxstars: 8, halfstars: false, allowedit: false, a_speed: 700 });
});
</script>

</head>
<body>
    <input type=”text” class=”.eg-input” />
</body>
</html>
Have any requests or suggestions to make the plugin better? Let me know and I may just add them :)

15 Responses to "jQuery Animated Star Rating Plugin"

"SHARING IS CARING"
  1. Pingback: JQuery – Star Comment Rating | eli geske

  2. Gav says:

    Really cool!! I love how I can change settings and see the ‘live’ changes – amazing – you have a new subscriber to the blog!!! :)

  3. Ed says:

    OK, back in 2009 in one of the comments, you said there were two ways to pass values to php.

    One was through HTML and the other Ajax. I’d like to incorporate this star rater into a WordPress plugin.

    Is there a way, using AJAX to call a PHP function and pass it the data from three star sets to be acted on so I can do something to store it in the WP MYSQL database?

    BTW I’m a newbie so far as javascript and ajax go.

    Thanks

    Ed

  4. eligeske says:

    Hey Ed,

    Let me see what I conjure up. It may take me a couple days I’m still unpacking from a move.

  5. Ed says:

    I appreciate it.

    Where’d you move to? Still in FLA?

    I’m in Apalachicola.

    Ed

  6. Laurent says:

    Hi,
    There is an issue with Firefox. Do you have an idea to fix that?

    Regards.

    Laurent

  7. eligeske says:

    What problem are you running into?

  8. Laurent says:

    When you display de stars miniature you have 3 lignes of stars in Firefox.
    One ligne is good, after you have two lignes of stars: one in grey & one in blue.
    I hope I made myself clear!

    Thanks!

    Laurent

  9. eligeske says:

    Not really…..

    Send me a screenshot in reply to the email I sent you.

  10. Laurent says:

    May you send me your email at this address?

    Thanks.
    Laurent

  11. Vijay says:

    Hi
    Nice plugin.

    I would like to know how to get rate value on a form submit

  12. eligeske says:

    Will you be using PHP?

  13. eligeske says:

    The CSS was updated in the download to use overflow, hidden on the containers which was creating an issue on a certain environment.

  14. Naresh says:

    How to show the control with default rating.

  15. rene says:

    Hi i want to display teh avergae rating when the page loads, is this possible?

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post