423,851 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,851 IT Pros & Developers. It's quick & easy.

How to change star rating color on mouseenter, on mouseout, and on onclick

P: 1
When I mouseenter on stars from a li tag/list class, all stars from every list class is showing me stars as mouseentered. I want that to be changed. When I mouseenter on stars from a li tag/list class it should show me orange stars. Means if I mouseenter on 1 star it should show me 1 orange star. if 2, then 2 orange stars.

onmouseout the ratings should show me the rating as server rated count. Change anything in mouseenterrating function and in clearstar function if you need(I mean how a rating system should work on mouseenter and on mouseout you will need to change it that way.). And I need javascript code with ajax for onclick also(Not jQuery).

-----------------------------------------------------------------------------------------------------------------------------------

Here is the code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <?php
  3.  
  4. require "conx.php";
  5.  
  6. $sql = "SELECT * FROM customers ORDER BY id ASC";
  7.  
  8. $query = $conx -> query($sql);
  9.  
  10. $numrows = $query -> num_rows;
  11.  
  12. ?>
  13.  
  14. <!DOCTYPE html>
  15.  
  16. <html>
  17.  
  18. <link rel="stylesheet" href="css/font-awesome.min.css">
  19.  
  20. <link rel="stylesheet" href="style.css">
  21.  
  22. <script src="jquery.min.js"></script>
  23.  
  24. <body>
  25.  
  26. <div class="Insert-Into">
  27.  
  28. <ul>
  29.  
  30. <?php if($numrows > 0): ?>
  31.  
  32. <?php while($row = $query -> fetch_assoc()): ?>
  33.  
  34. <?php $rating = $row["rating"]; ?>
  35.  
  36. <li data-rating=<?php echo "$rating"; ?> data-id=<?php echo $row['id']; ?> class="list">
  37.  
  38. <br/>
  39. <br/>
  40.  
  41. <span class="username"><?php echo $row["username"]; ?></span>
  42.  
  43. <br/>
  44. <br/>
  45.  
  46. <?php
  47.  
  48. $i;
  49.  
  50. $color;
  51.  
  52. for($i = 1; $i <= 5; $i++){
  53.  
  54.     if($i <= $rating){
  55.  
  56.         $color = "color:orange";
  57.  
  58.     }
  59.     else{
  60.  
  61.         $color = "color:#ccc";
  62.  
  63.     }
  64.  
  65.     echo "<i class='fa fa-star' style='$color;' onmouseenter='mouseenterrating($i)' data-rating='$i' onmouseout='clearstar($i)'></i>";
  66. }
  67.  
  68. ?>
  69.  
  70. <br/>
  71. <br/>
  72.  
  73. <b>Description</b>
  74.  
  75. <br/>
  76. <br/>
  77.  
  78. <div class="desc"><?php echo $row["description"]; ?></div>
  79.  
  80. </li>
  81.  
  82. <?php endwhile; ?>
  83.  
  84. <?php endif; ?>
  85.  
  86. </ul>
  87.  
  88. </div>
  89.  
  90. <script>
  91. function mouseenterrating(rating){
  92.  
  93.     var i, j, k, l, m;
  94.  
  95.     var list = document.getElementsByClassName("list");
  96.  
  97.     for(i = 0; i < list.length; i++){
  98.  
  99.         var fa = list[i].getElementsByClassName("fa");
  100.  
  101.             for(j = 0; j < fa.length; j++){
  102.  
  103.                 var value = fa[j].dataset.rating;
  104.  
  105.                     if(value <= rating){
  106.  
  107.                         fa[j].style.color = "orange";
  108.  
  109.                     }
  110.                     else{
  111.  
  112.                         fa[j].style.color = "#ccc";
  113.  
  114.                     }
  115.  
  116.             }
  117.  
  118.  
  119.  
  120.     }
  121.  
  122. }
  123.  
  124. function clearstar(rating){
  125.  
  126.     var fa = document.getElementsByClassName("fa");
  127.  
  128.     var k;
  129.  
  130.     for(k = 0; k < fa.length; k++){
  131.  
  132.         var value = fa[k].dataset.rating;
  133.  
  134.             fa[k].style.color = "#ccc";
  135.  
  136.     }
  137.  
  138. }
  139. </script>
  140.  
  141. </body>
  142.  
  143. </html>
  144.  
  145.  
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3.  
  4. .fa{
  5.     font-size:25px;
  6.    }
  7.  
  8. .fa:hover{
  9.           color:blue; 
  10.          }   
  11.  
  12. li{
  13.   list-style:none;
  14.   padding-left:40px;
  15.   padding-bottom:40px;
  16.   border-bottom:2px solid #ccc;
  17.   width:800px;
  18.  }
  19.  
  20. li:last-child{
  21.              border-bottom:none;
  22.             }
  23.  
  24.  
  25.  
  26.  
Expand|Select|Wrap|Line Numbers
  1.  
  2. <?php
  3.  
  4. $conx = mysqli_connect("localhost", "root", "");
  5.  
  6. if(!$conx){
  7.  
  8.     echo "Not connected with localhost";
  9.  
  10. }
  11.  
  12. $sql = "CREATE DATABASE rating";
  13.  
  14. $query = $conx -> query($sql);
  15.  
  16. $dbselect = $conx -> select_db("rating");
  17.  
  18. if(!$dbselect){
  19.  
  20.     echo "No database selected";
  21.  
  22. }
  23.  
  24. $sql = "CREATE TABLE customers(id INT(255) NOT NULL AUTO_INCREMENT UNIQUE KEY, username VARCHAR(200) NOT NULL, description VARCHAR(1000) NOT NULL, email VARCHAR(200) NOT NULL PRIMARY KEY, rating INT(5) NOT NULL)";
  25.  
  26. $query = $conx -> query($sql);
  27.  
  28. ?>
  29.  
  30.  
Sep 28 '18 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.