CODEWITHSUNDEEP
javascriptjqueryhtmlcss
arled
arled

Reputation: 2690

Five star rating functionality

How can I achieve a five star rating functionality using css.

I have some html: 

<span class="rate-this-stars">
  <h5>Rate this page</h5>
  <ol class="rate-this-stars-list">
    <li class="star" value="5"></li>
    <li class="star" value="4"></li>
    <li class="star" value="3"></li>
    <li class="star" value="2"></li>
    <li class="star" value="1"></li>
  </ol>
</span>

And some additional css which gives me this:

Rate this Page

I then have a css hover state which swaps the grey star with a pink star:

span.stars ol li:hover {
  background-image: url(../images/starHover.png);
}

Output:

Rate this page with only one star

So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.

I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.

My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

Upvotes: 2

Views: 27877

Answers (7)

Paul
Paul

Reputation: 467

           <html>
            <script src="https://jsuites.net/v5/jsuites.js"></script>
            <script src="https://jsuites.net/v5/jsuites.webcomponents.js"></script>
            <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
            
            <jsuites-rating value="4" tooltip="Ugly, Bad, Average, Good, Outstanding"></jsuites-rating>
            
            <div id='console'></div>
            
            <script>
            document.querySelector('jsuites-rating').addEventListener('onchange', function(e) {
                document.getElementById('console').innerHTML = 'New value: ' + this.value;
            });
            </script>
            </html>

enter image description here

I’ve been using this component for my projects: Here's the link if you want to check it out https://jsuites.net/docs/rating

Upvotes: 0

Zamicol
Zamicol

Reputation: 5064

I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:

https://github.com/zamicol/rating

Upvotes: 0

Igor Simic
Igor Simic

Reputation: 540

here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result. The trick is in css on hover! On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one. In your example it will look something like this

.rate-this-stars-list:hover .star{
   color: orange;
}

and then all stars after selected one:

.rate-this-stars-list .star:hover ~ .star{
  color: #ddd;
}

but, you can find full working 5 stars rating example with Angular implementation on this link:

https://floyk.com/en/post/angular-star-rating-example

Upvotes: 1

user3909765
user3909765

Reputation: 21

<style>
.star {
    font-size: x-large;
    width: 50px;
    display: inline-block;
    color: gray;
}
.star:last-child {
    margin-right: 0;
}
.star:before {
    content:'\2605';
}
.star.on {
    color: red;
}
.star.half:after {
    content:'\2605';
    color: red;
    position: absolute;
    margin-left: -20px;
    width: 10px;
    overflow: hidden;
}
</style>
<div class="stars"> 
<?php 
    $enable = 5.5;  //enter how many stars to enable
    $max_stars = 6; //enter maximum no.of stars
    $star_rate = is_int($enable) ? 1 : 0;
    for ($i = 1; $i <= $max_stars; $i++){ ?>
    <?php if(round($enable) == $i && !$star_rate) { ?>
            <span class="<?php echo 'star half'; ?>"></span>
    <?php } elseif(round($enable) >= $i) { ?>
            <span class="<?php echo 'star on'; ?>"></span>
    <?php } else { ?>
        <span class="<?php echo 'star'; ?>"></span>
    <?php } 
    }?>
</div>

Upvotes: 0

cracker
cracker

Reputation: 4906

I Got This

Javascript to get the ratings

$(document).ready(function() {
    $("form#ratingForm").submit(function(e) 
    {
        e.preventDefault(); // prevent the default click action from being performed
        if ($("#ratingForm :radio:checked").length == 0) {
            $('#status').html("nothing checked");
            return false;
        } else {
            $('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
        }
    });
});

DEMO1

Using Css DEMO2

Upvotes: 5

Ashima
Ashima

Reputation: 4834

use mouseover event to programmatically select the rest

mouseover: function () {
  var sel = this.value:
  var options = $('ol li');

  for (var i = 1; i < sel; i++) {
     options[i].css('background-image', 'url(../images/starHover.png)')
   }
}

Upvotes: 1

DanielX2010
DanielX2010

Reputation: 1908

One option for doing that is using CSS Sprite + JS. The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.

If you want something simpler, just have 6 separate images and change the background image according to the mouse position.

To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.

An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):

http://codepen.io/anon/pen/rkhcJ

HTML

<div id="container">
  <div id="1" class="star">1</div>
  <div id="2" class="star"></div>
  <div id="3" class="star"></div>
  <div id="4" class="star"></div>
  <div id="5" class="star"></div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS:

.star{
  float:left;
  height: 100%;
  width: 20%;
}

#container{
  background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
  width: 226px;
  height: 50px;
  background-color: #c34;
  background
}

JS

$("#1").mouseover(function(){
  $("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
  $("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
  $("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
  $("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
  $("#container").css('background-position', '0px -190px');
});

$(".star").mouseout(function(){
  $("#container").css('background-position', '0px 0px');
});

Upvotes: 0

Related Questions