skip to content

CSS and Ajax rating scripts

We need rating scripts for different situations in our webpages. For example we want visitors to rate a wallpaper in a wallpapers site, or a product in a shopping cart. For this we can use one of the rating scripts presented below:

Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

The guys from Masuga Design made this script unobtrusive, configurable( you can set number of stars) and provided the backend too – which use PHP and MySQL. The js part is based on prototype/scrptacolous.

Creating an AJAX Rating Widget

Sadly I did not find a demo for this. The article is more a tutorial that covers all clientside part, and also shows how to implement the rating system using 4 major javascript frameworks ( dojo,mootools,prototype and jquery). For jQuery it has a download archive too. It is good if you want to make your own rating script and don’t know where to start from.

CSS Star rating redux

CSS Star rating redux

This is a CSS only solution. The ajax part or backend is not covered here. The technique is crossbrowser, permits multiple sizes (see demo on their site) and is linked to another two posts that teach you how to create this.

CSS: Star Rater Ajax Version

CSS: Star Rater Ajax Version

Author took previous presented solutions and added the JS and PHP part. As posted on site “not a beginners tutorial – and just follow the steps” is presented in 5 short clear steps.

percentage based Star Rating

percentage based Star Rating

A minimal but complete rating system. This script i scapable to rate in percents, so you’ll have a more accuracy.To adapt it to your design you will need to dig into code and make changes needed.The stars are one sprite image as background, with variable background position.

AJAX Rating Stars

AJAX Rating Stars Demo

Based on prototype,the raw demo of the script shows it’s capabilities , like locking the staring, callbacks,external set, bindings to form elements.

Rabid Ratings v1.22

Rabid Ratings v1.22

This script uses png with transparency,is animated, and has a ‘snap’ configuration that allows you to set steps for rating. Is mootools based, and will send the rating to an url set when you create the instance of the rating class. It also provides a tutorial of theme skinning.

Starbox 0.3

Starbox 0.3

“Starbox allows you to easily create all kinds of rating boxes using just one PNG image.” It uses prototype and for effects scriptaculous.

 jQuery Ajax Rater Plugin

jQuery Ajax Rater Plugin

This can have variable number or sizes of stars – starting from 1 like gmail starring system. Is based on jquery.

Please let me know if you know other rating scripts/techniques.

One Response

2.11.2008

Bookmarked for the near future

thanks


Switch to our mobile site