rendered paste body/************************************************************************************************************************************** RatingBar.js By: Tommy Farley wolfpit64@gmail.com Instructions: - Create a SPAN tag anywhere you want to include a Rating Bar and set an ID for it, do not forget to put text inside - Anywhere on the page include the ratingbar.js file - Create a Rating object with the arguments of that ID, the initial rating percentage and what orientation you want - Celebrate! Example: <HTML> <HEAD> <TITLE>Rating Bar Test</TITLE> <SCRIPT LANGUAGE="JavaScript" src="ratingbar.js"></SCRIPT> </HEAD> <BODY> <SPAN ID="rating">Random Text</SPAN> <SCRIPT LANGUAGE="JavaScript"> var RatingBar = new Rating('rating',80,'h'); </SCRIPT> </BODY> </HTML>***************************************************************************************************************************************/// *************************************************** Rating Text Defaults ***********************************************************var RatingTextColor = "#000000";var RatingTextBold = true;/* Rating Image Defaults RatingImageLoc + RatingImageName + <h/v> + <average, good, excellent, bg> + RatingImageExt "/images/siteimages/" + "hrating" + <average, good, excellent, bg> + ".jpg"; "/images/siteimages/hratingaverage.jpg"; Each image must be 1x15 (horizontal) or 30x1 (vertical) slices and are suggested to be solid (but don't necessarily have to be)*/var RatingImageLoc = "/images/siteimages/";var RatingImageName = "rating";var RatingImageExt = ".jpg";function Rating(tagid, percent, orient) { this.Tag = document.getElementById(tagid); this.Orientation = orient; this.ImageLoc = RatingImageLoc; this.ImageName = RatingImageName; this.ImageExt = RatingImageExt; this.TextColor = RatingTextColor; this.TextBold = RatingTextBold; this.Percent = percent this.convertPercent = function() { if(this.Percent >= 80) { return "excellent"; } else if(this.Percent >= 60) { return "good"; } else { return "average"; } return ""; }; this.RefreshRating = function() { this.imgTable = document.createElement('table'); this.imgTable.cellspacing = '0'; this.imgTable.cellpadding = '0'; this.imgTBODY = document.createElement('tbody'); this.imgTR = document.createElement('tr'); this.imgTD = document.createElement('td'); if(this.Orientation == 'h') { this.imgTD.style.height == '15px'; } else if(this.Orientation == 'v') { this.imgTD.style.height == '100px'; } this.imgTD.style.overflow = 'hidden'; this.imgTableBot = document.createElement('table'); this.imgTableBot.cellspacing = '0'; this.imgTableBot.cellpadding = '0'; this.imgTableBot.style.borderCollapse = 'collapse'; this.imgTBODYBot = document.createElement('tbody'); this.imgTRBot = document.createElement('tr'); this.imgTDBot = document.createElement('td'); if(this.Orientation == 'h') { this.imgTDBot.style.height = '15px'; this.imgTDBot.style.width = '100px'; } else if(this.Orientation == 'v') { this.imgTDBot.style.height = '100px'; this.imgTDBot.style.width = '15px'; } this.imgBotLoc = 'url(' + this.ImageLoc + this.Orientation + this.ImageName + 'bg' + this.ImageExt + ')'; this.imgTDBot.style.backgroundImage = this.imgBotLoc; this.imgTDBot.innerHTML = ' '; this.imgTRBot.appendChild(this.imgTDBot); this.imgTBODYBot.appendChild(this.imgTRBot); this.imgTableBot.appendChild(this.imgTBODYBot); if(this.Orientation == 'v') { this.imgTableBot.align = 'center'; } this.imgTD.appendChild(this.imgTableBot); this.imgTableTop = document.createElement('table'); this.imgTableTop.cellspacing = '0'; this.imgTableTop.cellpadding = '0'; this.imgTableTop.style.borderCollapse = 'collapse'; this.imgTBODYTop = document.createElement('tbody'); this.imgTRTop = document.createElement('tr'); this.imgTDTop = document.createElement('td'); if(this.Orientation == 'h') { this.imgTDTop.width = this.Percent + 'px'; this.imgTDTop.height = '15px'; } else if(this.Orientation == 'v') { this.imgTDTop.height = this.Percent + 'px'; this.imgTDTop.width = '15px'; } this.imgTopLoc = 'url(' + this.ImageLoc + this.Orientation + this.ImageName + this.convertPercent() + this.ImageExt + ')'; this.imgTDTop.style.backgroundImage = this.imgTopLoc; this.imgTDTop.innerHTML = ' '; this.imgTRTop.appendChild(this.imgTDTop); this.imgTBODYTop.appendChild(this.imgTRTop); this.imgTableTop.appendChild(this.imgTBODYTop); this.imgTableTop.zIndex = '2'; this.imgTableTop.style.position = 'relative'; if(this.Orientation == 'h') { this.imgTableTop.style.top = '-15px'; } else if(this.Orientation == 'v') { this.imgTableTop.style.top = '-' + (this.Percent + 4) + 'px'; this.imgTableTop.align = 'center'; } this.imgTD.appendChild(this.imgTableTop); this.imgTableText = document.createElement('table'); this.imgTableText.cellspacing = '0'; this.imgTableText.cellpadding = '0'; this.imgTableText.style.borderCollapse = 'collapse'; this.imgTBODYText = document.createElement('tbody'); this.imgTRText = document.createElement('tr'); this.imgTDText = document.createElement('td'); this.imgTDText.style.height = '15px'; if(this.Orientation == 'h') { this.imgTDText.style.width = '100px'; } this.imgTDText.align = 'center'; this.imgTDText.style.fontSize = '11px'; this.imgTDText.style.color = this.TextColor; if(this.TextBold) { this.imgTDText.style.fontWeight = 'bold'; } this.imgTDText.innerHTML = this.Percent + '%'; this.imgTRText.appendChild(this.imgTDText); this.imgTBODYText.appendChild(this.imgTRText); this.imgTableText.appendChild(this.imgTBODYText); this.imgTableText.style.zIndex = '3'; this.imgTableText.style.position = 'relative'; if(this.Orientation == 'h') { this.imgTableText.style.top = '-30px'; } else if(this.Orientation == 'v') { this.imgTableText.style.top = '-' + (68 + this.Percent) + 'px'; } this.imgTD.appendChild(this.imgTableText); this.imgTR.appendChild(this.imgTD); this.imgTBODY.appendChild(this.imgTR); this.imgTable.appendChild(this.imgTBODY); this.Tag.replaceChild(this.imgTable,this.Tag.childNodes[0]); while(this.Tag.childNodes[1]) { this.Tag.removeChild(this.Tag.childNodes[1]); } this.Tag.style.float = 'right'; }; if(this.Tag) { this.RefreshRating(); } this.changeTagID = function(chtagid) { this.Tag = document.getElementById(chtagid); this.RefreshRating(); }; this.setPercent = function(chpercent) { this.Percent = chpercent; this.RefreshRating(); };}