- Joined
- Sep 28, 2018
- Messages
- 1
- Reaction score
- 0
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:
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:
Code:
<?php
require "conx.php";
$sql = "SELECT * FROM customers ORDER BY id ASC";
$query = $conx -> query($sql);
$numrows = $query -> num_rows;
?>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<body>
<div class="Insert-Into">
<ul>
<?php if($numrows > 0): ?>
<?php while($row = $query -> fetch_assoc()): ?>
<?php $rating = $row["rating"]; ?>
<li data-rating=<?php echo "$rating"; ?> data-id=<?php echo $row['id']; ?> class="list">
<br/>
<br/>
<span class="username"><?php echo $row["username"]; ?></span>
<br/>
<br/>
<?php
$i;
$color;
for($i = 1; $i <= 5; $i++){
if($i <= $rating){
$color = "color:orange";
}
else{
$color = "color:#ccc";
}
echo "<i class='fa fa-star' style='$color;' onmouseenter='mouseenterrating($i)' data-rating='$i' onmouseout='clearstar($i)'></i>";
}
?>
<br/>
<br/>
<b>Description</b>
<br/>
<br/>
<div class="desc"><?php echo $row["description"]; ?></div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<script>
function mouseenterrating(rating){
var i, j, k, l, m;
var list = document.getElementsByClassName("list");
for(i = 0; i < list.length; i++){
var fa = list[i].getElementsByClassName("fa");
for(j = 0; j < fa.length; j++){
var value = fa[j].dataset.rating;
if(value <= rating){
fa[j].style.color = "orange";
}
else{
fa[j].style.color = "#ccc";
}
}
}
}
function clearstar(rating){
var fa = document.getElementsByClassName("fa");
var k;
for(k = 0; k < fa.length; k++){
var value = fa[k].dataset.rating;
fa[k].style.color = "#ccc";
}
}
</script>
</body>
</html>
Code:
.fa{
font-size:25px;
}
.fa:hover{
color:blue;
}
li{
list-style:none;
padding-left:40px;
padding-bottom:40px;
border-bottom:2px solid #ccc;
width:800px;
}
li:last-child{
border-bottom:none;
}
Code:
<?php
$conx = mysqli_connect("localhost", "root", "");
if(!$conx){
echo "Not connected with localhost";
}
$sql = "CREATE DATABASE rating";
$query = $conx -> query($sql);
$dbselect = $conx -> select_db("rating");
if(!$dbselect){
echo "No database selected";
}
$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)";
$query = $conx -> query($sql);
?>