www.webdeveloper.com
Results 1 to 8 of 8

Thread: JavaScript Star Rating System

  1. #1
    Join Date
    Feb 2007
    Posts
    9

    JavaScript Star Rating System

    I'm basically trying to make a star rating system similar to Windows Media Player or iTunes...

    My thought are to start off with a string of gray star outlines in HTML:
    ☆☆☆☆☆
    onMouseOver, they become filled stars in such a way that if I roll over say the 3rd star, stars 1,2 and 3 become filled:
    ✭✭✭☆☆
    and then onMouseOut, they return to their previous state:
    ☆☆☆☆☆ -but if you click on a star, they stay filled and become black:
    ✭✭✭☆☆

    Basically, whenever you scroll over a star:
    1. all stars become gray
    2. the star you're on and all stars below it become filled and all stars above it become outlines


    The approach I had in mind would basically involve writing functions and calling them on onMouseOver, onMouseOut and onClick events for each star and my dilemma is my lack of extensive javaScript knowledge.

    -How would I label the stars so that I can refer to them in functions?
    ex)
    Code:
    function clickStar3(){
       `star1`.color='black';
       `star2`.color='black';
       `star3`.color='black';
       `star4`.color='gray';
       `star5`.color='gray';}
    -With that kind of approach, how would I write functions to change the actual printout for the different stars?
    ex)
    Code:
    function clickStar3(){
       `star1`='&#9733';
       `star2`='&#9733';
       `star3`='&#9733';
       `star4`='&#9734';
       `star5`='&#9734';}
    I really appreciate your input...
    Thanks in advance!

  2. #2
    Join Date
    Feb 2007
    Posts
    9
    OK, so I made a little progress...
    Here is the the HTML code for the stars where 'style2' is defined as a gray font:
    Code:
    <div align="center" class="style2" onmouseover="this.style.cursor='default';">
      <span id="s1" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
      <span id="s2" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
      <span id="s3" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
      <span id="s4" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
      <span id="s5" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
    </div>
    And here are the javaScript functions:
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }

    Code:
    function overStar(starID){
      var starNo = starID.charAt(1);
      for(var i=1; i<=starNo; i++){
        document.getElementById('s'+i).style.color="red";
      }
    }
    function outStar(starID){
      var starNo = starID.charAt(1);
      for(var i=1; i<=starNo; i++){
        document.getElementById('s'+i).style.color="#666666";
      }
    }
    Let's take it one step at a time- in the code I posted, the stars become red on mouseover and return back to gray on mouseout- the first thing I want to know how to do is change the stars from '☆' (&#9734) to '★' (&#9733) instead of changing the colors...
    Last edited by j-kizzle; 02-22-2007 at 08:46 PM.

  3. #3
    Join Date
    Feb 2007
    Posts
    9
    OK guys, I figured it out...
    Here is the HTML (style2's color is '#666666'):
    Code:
    <div align="center" class="style2" onmouseover="this.style.cursor='default';">
      <span id="s1" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
      <span id="s2" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
      <span id="s3" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
      <span id="s4" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
      <span id="s5" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
    </div>
    And here's the JavaScript- BTW, 'document.MyReview.rating' is a hidden field in a form I have on the page called 'MyReview':
    Code:
    var color1 = "#faf4a3";
    var color2 = "#f1ec5b";
    var color3 = "#e1e558";
    var color4 = "#c5c32b";
    var color5 = "#978d00";
    
    function overStar(starID){
      var starNo = starID.charAt(1);
      for(var i=1; i<=5; i++){
        document.getElementById('s'+i).style.color="#666666";
        if(i<=starNo) document.getElementById('s'+i).innerHTML="★";
        if(i>starNo) document.getElementById('s'+i).innerHTML="☆";
      }
    }
    
    function outStar(starID){
      var starNo = starID.charAt(1);
      var rating = document.MyReview.rating.value;
      for(var i=1; i<=5; i++){
        col = "color"+i;
        if(i<=rating){
          document.getElementById('s'+i).innerHTML="★";
          document.getElementById('s'+i).style.color=eval(col);
        }
        if(i>rating) document.getElementById('s'+i).innerHTML="☆";
      }
    }
    
    function starSelection(starID){
      var starNo = starID.charAt(1);
      document.MyReview.rating.value = starNo;
      for(var i=6; i>0; i--){
        col = "color"+i;
        if(i<=starNo){
          document.getElementById('s'+i).innerHTML="★";
          document.getElementById('s'+i).style.color=eval(col);
        }
        if(i>rating) document.getElementById('s'+i).innerHTML="☆";
      }
    }
    Last edited by j-kizzle; 02-22-2007 at 09:51 PM.

  4. #4
    Join Date
    May 2007
    Posts
    4

    Thumbs up

    j-kizzle, thanks for sharing this. I'm going to modify it to work with multiple star rating bars thingies.

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by geetar251
    j-kizzle, thanks for sharing this. I'm going to modify it to work with multiple star rating bars thingies.
    What you need is a solution that doesn't use any global variables or eval or innerHTML or require you to write onmouseover or onmouseout or onclick, and requires the creation of only one span for each rating. Also it should be configurable for number of stars displayed and their colour, and should not be hard-coded to address a particular form element. Link

  6. #6
    Join Date
    Jun 2009
    Posts
    4

    Star Rating System

    I believe the following system at the link below meets most of your objectives for a quality and simple to use star rating system. The only think it does not do is allow different colour stars. It is very easy to embed into HTML, forms, etc. and you also can output the results easily.

    I've looked at the code and it does not look too difficult to change the graphics for the stars. LINK.

    Thanks

  7. #7
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    There is already a star rating system that you can use for free... it's open source too.

    They use "sprites" for the images.

    I used it on a page I did a while ago for contact lenses...

    I can't remember where I got it, but I think this is it:
    http://masugadesign.com/the-lab/scri...ar-rating-bar/

    I used it here:
    http://www.contact-lenses.org (It's a WordPress site.)

  8. #8
    Join Date
    Feb 2011
    Posts
    1
    I've upgraded it. Please create a file vote.php for your mysql stuf...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    	<head>
    		<title>Star rating system</title>
    		<script type="text/javascript" language="javascript">
    <!--
    function start(i) {
      document.getElementById('starbox'+i).innerHTML="<div onmouseout='start("+i+");'><span id='s1"+i+"' onclick='starSelection(this.id);'onmouseout='outStar(this.id);'onmouseover='overStar(this.id);'>★</span><span id='s2"+i+"' onclick='starSelection(this.id);'onmouseout='outStar(this.id);'onmouseover='overStar(this.id);'>☆</span><span id='s3"+i+"' onclick='starSelection(this.id);'onmouseout='outStar(this.id);'onmouseover='overStar(this.id);'>☆</span><span id='s4"+i+"' onclick='starSelection(this.id);'onmouseout='outStar(this.id);'onmouseover='overStar(this.id);'>☆</span><span id='s5"+i+"' onclick='starSelection(this.id);'onmouseout='outStar(this.id);'onmouseover='overStar(this.id);'>☆</span></div>";
    }
    
    function overStar(starID){
      var starNo = starID.charAt(1);
      var starSe = starID.charAt(2);
      for(var i=1; i<=5; i++){
        document.getElementById('s'+i+''+starSe).style.color="#660000";
        if(i<=starNo) document.getElementById('s'+i+''+starSe).innerHTML="★";
        if(i>starNo) document.getElementById('s'+i+''+starSe).innerHTML="☆";
      }
    }
    
    function outStar(starID){
      var starNo = starID.charAt(1);
      var starSe = starID.charAt(2);
      var rating = document.MyReview.rating.value;
      for(var i=1; i<=5; i++){
        col = "color"+i;
        if(i<=rating){
          document.getElementById('s'+i+''+starSe).innerHTML="★";
          document.getElementById('s'+i+''+starSe).style.color=eval(col);
        }
        if(i>rating) document.getElementById('s'+i+''+starSe).innerHTML="☆";
      }
    }
    
    function starSelection(starID){
      var starNo = starID.charAt(1);
      var starSe = starID.charAt(2);
      var uitvoer = "";
      for (var i=0; i<starNo; i++) {
        uitvoer=uitvoer+"<span>★</span>";
      }
      for (var i=starNo; i<5; i++) {
        uitvoer=uitvoer+"<span>☆</span>";
      }	
      document.getElementById('starbox'+starSe).innerHTML=uitvoer;
      
      document.getElementById('php').innerHTML="<" + "?" + " include('vote.php?no=" + starNo + "&se=" + starSe + "'); " + "?" + ">";
    
    }
    -->
    		</script>
    	</head>
    	<body onload="start(1); start(2); start(3);">
    		Song 1: <div align="center" onmouseover="this.style.cursor='default';" style="color: #660000; font-size: 25pt;" id="starbox1">
    		</div>
    		Song 2: <div align="center" onmouseover="this.style.cursor='default';" style="color: #660000; font-size: 25pt;" id="starbox2">
    		</div>
    		Song 3: <div align="center" onmouseover="this.style.cursor='default';" style="color: #660000; font-size: 25pt;" id="starbox3">
    		</div>
    		<div id="php"></div>
    	</body> 
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles