jQuery Animated Star Rating Plugin

Plugins

jQuery Animated Star Rating Plugin

TAGs: jquery rollover plugin jquery stars plugins rating plugin rating plugins 15 Comment

Posted By: eligeske on October 7, 2011 in 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.
maxstars:		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.
halfstars:		Allow half ratings like 3.5 or 1.5, if set to false it will only allow hole numbers, example: ‘halfstars’ = true.
allowedit:		Allow the user to edit the rating they submitted, if set to false it will hide the “edit” link.
a_speed:		This is the animation speed in milliseconds when the box resizes after being clicked.
callback: 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. }
starwidth: 28	This is the width in pixels of the large stars, set this only if you are creating your own theme.
smstarwidth: 14	This is the width in pixels of the small stars, set this only if you are creating your own theme.
Generate It!

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"

Pingback: JQuery – Star Comment Rating | eli geske
October 9, 2011

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!!!
October 19, 2011

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
October 19, 2011

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.
October 19, 2011

Ed says:

I appreciate it.

Where’d you move to? Still in FLA?

I’m in Apalachicola.

Ed
November 4, 2011

Laurent says:

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

Regards.

Laurent
November 4, 2011

eligeske says:

What problem are you running into?
November 4, 2011

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
November 4, 2011

eligeske says:

Not really…..

Send me a screenshot in reply to the email I sent you.
November 4, 2011

Laurent says:

May you send me your email at this address?

Thanks.
Laurent
November 11, 2011

Vijay says:

Hi
Nice plugin.

I would like to know how to get rate value on a form submit
November 11, 2011

eligeske says:

Will you be using PHP?
November 14, 2011

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.
December 27, 2011

Naresh says:

How to show the control with default rating.
December 27, 2011

rene says:

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

Plugins