Geek Answers Handbook

Help needed in a 5 star rating - jQuery

I am trying to create a star rating system. The code that I have now does the following:

Select the stars when the mouse hovers over it, but return to the previous state when the mouse was removed.

I want to add the following functions to it: When I click on a star, the number of stars that I clicked should remain highlighted even after removing the mouse from the stars.

Can anyone help me with this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>AJAX 5 Star Rating</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> // This is the first thing we add ------------------------------------------ $(document).ready(function() { $('.rate_widget').each(function(i) { var widget = this; var out_data = { widget_id : $(widget).attr('id'), fetch: 1 }; $.post( 'ratings.php', out_data, function(INFO) { $(widget).data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); $('.ratings_stars').hover( // Handles the mouseover function() { $(this).prevAll().andSelf().addClass('ratings_over'); $(this).nextAll().removeClass('ratings_vote'); }, // Handles the mouseout function() { $(this).prevAll().andSelf().removeClass('ratings_over'); // can't use 'this' because it wont contain the updated data set_votes($(this).parent()); } ); // This actually records the vote $('.ratings_stars').bind('click', function() { var star = this; var widget = $(this).parent(); var clicked_data = { clicked_on : $(star).attr('class'), widget_id : $(star).parent().attr('id') }; $.post( 'ratings.php', clicked_data, function(INFO) { widget.data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); }); function set_votes(widget) { var avg = $(widget).data('fsr').whole_avg; var votes = $(widget).data('fsr').number_votes; var exact = $(widget).data('fsr').dec_avg; window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes); $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } // END FIRST THING </script> <style> .rate_widget { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 180px; height: 32px; } .ratings_stars { background: url('star_empty.png') no-repeat; float: left; height: 28px; padding: 2px; width: 32px; } .ratings_vote { background: url('star_full.png') no-repeat; } .ratings_over { background: url('star_highlight.png') no-repeat; } .total_votes { background: #eaeaea; top: 58px; left: 0; padding: 5px; position: absolute; } .event_choice { font: 10px verdana, sans-serif; margin: 0 auto 40px auto; width: 180px; } h1 { text-align: center; width: 400px; margin: 20px auto; } </style> </head> <body> <h1> Rate the event! </h1> <div class='event_choice'> Rate: Raiders of the Lost Ark <div id="r1" class="rate_widget"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="total_votes">vote data</div> </div> </div> <div class='event_choice'> Rate: The Hunt for Red October <div id="r2" class="rate_widget"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="total_votes">vote data</div> </div> </div> </body> </html>
+4
source share
1 answer

I found great CSS just a way to make freezes . Saving stars highlighted will still require some javascript, but much less.

The general idea is that you have a background image (star) for ul with a set length (in your case, 5 times the image width, 5 stars) and repeat the image along the x axis ( background: url(star.gif) repeat-x; ). Each <a> has a different width (20%, 40%, 60%, 80%, 100%, for 5 stars) and is placed in a different z-index.

This updates the author’s idea that is a little closer to your use case:

HTML:

 <div class='rate_widget'> <ul> <li><a href='#' class='one-star'>1</a></li> <li><a href='#' class='two-stars'>2</a></li> <li><a href='#' class='three-stars'>3</a></li> <li><a href='#' class='four-stars'>4</a></li> <li><a href='#' class='five-stars'>5</a></li> </ul> </div>

CSS

 .rate_widget ul{ background: url(star_empty.png) repeat-x; } .rate_widget a:hover{ background: url(star_highlight.png) repeat-x; } .rate_widget a:active, .rate_widget a:focus, .rate_widget a.checked{ background: url(star_full.png) repeat-x; } .rate_widget ul{ position:relative; width:125px; /*5 times the width of your star*/ height:25px; /*height of your star*/ overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .rate_widget li{ display: inline; } .rate_widget a{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; /*height of your star*/ line-height:25px; /*height of your star*/ outline:none; overflow:hidden; border: none; } .rate_widget a.one-star{ width:20%; z-index:6; } .rate_widget a.two-stars{ width:40%; z-index:5; } .rate_widget a.three-stars{ width:60%; z-index:4; } .rate_widget a.four-stars{ width:80%; z-index:3; } .rate_widget a.five-stars{ width:100%; z-index:2; } .rate_widget a.checked{ z-index:1; }

JavaScript:

 $('.rate_widget a').click(function(){ // make sure the chosen star stays selected var star = $(this); star.closest('ul').find('.checked').removeClass('checked'); star.addClass('checked'); //whatever else you want to do when something gets clicked });

And here is the fiddle to see this in action: http://www.jsfiddle.net/BHaTu/

+2
source

More articles:


All Articles