StarRating v.1.01

Graphix 2 Tallied Votes 418 Views Share

This script can be used for star ratings on for example forum or music sites. The scriptinformation is included within the script.

~G

<script type="text/javascript">
/*
-------------
-STAR RATING-
-------------

==========================
=== Script information ===

--- Functions ---

The following script has five functions:

createStarRating(ratingName) - This function creates the starrating, please note that you need to enter the name that you use
to retrieve to value (1,2,3,4,5) of the starrating. This must be in a form in order to be able to retrieve the value using
for example a PHP form handling script

changeStars(starId) - This function is activated by the onmouseover event and changes the source of the 5 star images depending on
what star the mouse is

fadeStars(starId2) - This function sets all the stars not selected (the StarOutSrc) and is activated by the onmouseout event

selectStars(starId3) - This function sets the star sources depending on which star has been clicked. It also set the selectedStarRating[x]
to true so that fadeStars() and changeStars() will not be activated onmouseout/onmouseover

strlen(string) - This function returns the length of a string

--- How to use this script ---

This script needs to be implemented inside a form to be used, 
you are able to give the name that you want by filling in the name. 

Example of the usage of this script (please note that the < is replaced with [ 
and the > with ], THIS IS ONLY BECAUSE ELSE THE SCRIPT WILL BE INTERRUPTED, 
the script will not work if you also add the [] instead of <>):

<form action="" method="post" name="myForm">
<embed src="musicVideo001.mpeg" />
[script type="text/javascript"]
createStarRating("musicVideo001Rating");
[/script]
</form>

--- Variables ---

The following you are able to change:

starOutSrc - This contains the source of the image where your starOn is located on the server/your computer
starOnSrc - This contains the source of the image where your starOut is located on the server/your computer

=== Script information ===
==========================


================
=== Warranty ===

You are allowed to adapt this script to your own likings, 
but do not at all times remove this warranty and the script explaination.

Created by Symbol Webdesign
Visit us at: http://www.symbolwebdesign.nl
Contact: info@symbolwebdesign.nl

Or you can PM at DaniWeb (username: Graphix)

=== Warranty ===
================

*/
var starRatingAmount = 0;
var selectedStarRating = new Array;
var StarOutSrc = "images/star2.jpg";
var StarOnSrc = "images/star1.jpg";
function createStarRating(ratingName) {
document.write("<div id='starRatingNo" + starRatingAmount + "'>");
document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-0' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-1' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-2' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-3' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
document.write("<img src='" + StarOutSrc + "' alt='RatingStar' id='StarRating" + starRatingAmount + "-4' onmouseover='changeStars(this.id)' onmouseout='fadeStars(this.id)' onclick='selectStars(this.id)' />");
document.write("<input type='hidden' name='" + ratingName + "' id='StarRating" + starRatingAmount + "' value='' />");
document.write("</div>");
selectedStarRating[starRatingAmount] = false;
starRatingAmount++;
}

function changeStars(starId) {
if (navigator.appName != "Microsoft Internet Explorer") {
var starNumber = starId.substr(-1, 1); // Which star is hovered
} else {
var starLength = strlen(starId);
var startSubstr = starLength - 1;
var starNumber = starId.substr(startSubstr, 1);
}
var starRating = starId.replace("-" + starNumber, "");
var starRatingNumber = starRating.replace("StarRating", "");
if (selectedStarRating[starRatingNumber] == false) {
for (var x=0;x<=4;x++) {
document.getElementById(starRating + "-" + x).src = StarOutSrc;
}
for (i=0;i<=starNumber;i++) {
document.getElementById("StarRating" + starRatingNumber + "-" + i).src = StarOnSrc;
}
}
}

function fadeStars(starId2) {
if (navigator.appName != "Microsoft Internet Explorer") {
var starNumber2 = starId2.substr(-1, 1); // Which star is hovered
} else {
var starLength2 = strlen(starId2);
var startSubstr2 = starLength2 - 1;
var starNumber2 = starId2.substr(startSubstr2, 1);
}
var starRating2 = starId2.replace("-" + starNumber2, "");
starRatingNumber2 = starRating2.replace("StarRating", "");
if (selectedStarRating[starRatingNumber2] == false) {
for (d=0;d<=4;d++) {
document.getElementById(starRating2 + "-" + d).src = StarOutSrc;
}
}
}

function selectStars(starId3) {
if (navigator.appName != "Microsoft Internet Explorer") {
var starNumber3 = starId3.substr(-1, 1); // Which star is hovered
} else {
var starLength3 = strlen(starId3);
var startSubstr3 = starLength3 - 1;
var starNumber3 = starId3.substr(startSubstr3, 1);
}
var starRating3 = starId3.replace("-" + starNumber3, "");
var starRatingNumber3 = starRating3.replace("StarRating", "");
for (g=0;g<=starNumber3;g++) {
document.getElementById("StarRating" + starRatingNumber3 + "-" + g).src = StarOnSrc;
}
selectedStarRating[starRatingNumber3] = true;
document.getElementById(starRating3).value = parseInt(starNumber3) + 1;
}

// Due to the fact that IE doesn't support negative starting at the substr() method, I need to add this :(

function strlen (string) {
    // Get string length  
    // 
    // version: 909.322
    // discuss at: http://phpjs.org/functions/strlen
    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Sakimori
    // +      input by: Kirk Strobeck
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Onno Marsman
    // +    revised by: Brett Zamir (http://brett-zamir.me)
    // %        note 1: May look like overkill, but in order to be truly faithful to handling all Unicode
    // %        note 1: characters and to this function in PHP which does not count the number of bytes
    // %        note 1: but counts the number of characters, something like this is really necessary.
    // *     example 1: strlen('Kevin van Zonneveld');
    // *     returns 1: 19
    // *     example 2: strlen('A\ud87e\udc04Z');
    // *     returns 2: 3
    var str = string+'';
    var i = 0, chr = '', lgth = 0;

    var getWholeChar = function (str, i) {
        var code = str.charCodeAt(i);
        var next = '', prev = '';
        if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
            if (str.length <= (i+1))  {
                throw 'High surrogate without following low surrogate';
            }
            next = str.charCodeAt(i+1);
            if (0xDC00 > next || next > 0xDFFF) {
                throw 'High surrogate without following low surrogate';
            }
            return str.charAt(i)+str.charAt(i+1);
        } else if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
            if (i === 0) {
                throw 'Low surrogate without preceding high surrogate';
            }
            prev = str.charCodeAt(i-1);
            if (0xD800 > prev || prev > 0xDBFF) { //(could change last hex to 0xDB7F to treat high private surrogates as single characters)
                throw 'Low surrogate without preceding high surrogate';
            }
            return false; // We can pass over low surrogates now as the second component in a pair which we have already processed
        }
        return str.charAt(i);
    };

    for (i=0, lgth=0; i < str.length; i++) {
        if ((chr = getWholeChar(str, i)) === false) {
            continue;
        } // Adapt this line at the top of any loop, passing in the whole string and the current iteration and returning a variable to represent the individual character; purpose is to treat the first part of a surrogate pair as the whole character and then ignore the second part
        lgth++;
    }
    return lgth;
}
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.