FlexiRator

The most flexible Rating Widget


Introduction

FlexiRator is the most flexible rating widget ever made!

Developed by Naveed ur Rehman (naveed.ur.rehman@hotmail.com, www.naveedurrehman.com)

Applications

Benefits

Syntax:

<script type="text/javascript" src="http://www.naveedurrehman.com/demo/flexirator/js.php?parameters=...></script>

Parameters:

item
It is the only essential parameter and without this, script will not work. Rating will be noted against this value therefire, try giving some unique value to this parameter.
Example:
my_picture_johnyboy
post_12121212_11_2_2009
Wrong Example:
my_picture    (whats wrong? here, there could be a problem in uniqueness of value)

gallery
This is to select which stars icon gallery you want to use. This should be an integer value. Right now, there are only few stars galleries available. (Default: 0)

Alternate way to use your own icons is to use following parameters:
img_hover        image/icon to display when mouse is on any star (Example: http://www.your-site.com/star_hover.png)
img_nohover   
image/icon to display when mouse leaves star  (Example: similar to img_hover)
img_on            
image/icon to display when star is having status of rated (Example: similar to img_hover)
img_off           
image/icon to display when star is having status of un-rated (Example: similar to img_hover)

stars
Number of stars to display. It should be an integer value in between 3-10. (Default: 5)

freezed
If 1 (true), widget will be just showing current rating and visitor will not be able to input (Default: 0)

tooltip
Tooltip text to display when mouse hover the stars

mouseicon
Can be any standard mouseicon's value: crosshair,text,wait,move,help,default,hand (Default: hand)

text
Text to be displayed next to the widget before any star is clicked and when there is some rating for item. HTML fonts styling can be used. Do not use any quote (single/double). Two blocks can be used:
[rate]:        Current rating of item
[votes]:      Number of votes of item
Example:  <i>Rate:[rate], Votes:[votes]</i>

afterclicktext
Text to be displayed next to the widget after widget has been clicked. HTML fonts styling can be used. Do not use any quote (single/double). Four blocks can be used:
[rate]:              before-click rating of item
[votes]:            before-click number of votes of item
[newrate]:        after-click rating of item
[newvotes]:      after-click number of votes of item
Example:  <i>New Rate:[rate], Votes:[votes]</i>

notratedtext
Text to be displayed next to the widget before any star is clicked and when there is no rating for item. HTML fonts styling can be used. Do not use any quote (single/double).
Example: 
<i>No rating of this item</i>

startextN    (where N=1 to value of 'stars' parameter)
Text to be displayed next to the widget when particular star (N) is hovered.
Example:
say star=5
startext1=Bad
startext2=Poor
startext3=Fine
startext4=Good
startext5=Excellent

starwidthN    (where N=1 to value of 'stars' parameter)
Width of particular star.
Example:
say star=5
starwidth1=15
starwidth2=20
starwidth3=25
starwidth4=30
starwidth5=35

starheightN    (where N=1 to value of 'stars' parameter)
Height of particular star.
Example:
say star=5
starheight1=15
starheight2=20
starheight3=25
starheight4=30
starheight5=35

onclick (Programming)
For calling custom java function on the page when star is clicked. item and thisrate are variables to pass values.
Example:
custom_function_when_click(item,thisrate)

onmouseover (Programming)
For calling custom java function on the page when star is hovered. item and thisrate are variables to pass values.
Example:
custom_function_when_mouseover(item,thisrate)

onmouseout (Programming)
For calling custom java function on the page when mouse moved out of the star. item and thisrate are variables to pass values.
Example:
custom_function_when_mouseout(item,thisrate)

Examples

1. Simplest example

2. Another gallery, with 3 stars

3. Default gallery, with 10 stars and tooltip

4. text and afterclicktext example

5. startextN, starwidthN and starheightN example


Note: The widget is under construction. Feel free to tell me your wish regarding this project - Thanks, Naveed