This is another Rating System and Im sure you can get many awesome rating and voting script at 99Point.info I used animate() function of jQuery to get some stylish effect.
When I create Youtube Style Ratings and Ajax Rating Many readers liked this and I thought I would give some stylish rating systems. This is created with Jquery and PHP. Hope You like it and don’t forget to subscribe with email. Thanks !
Download all files to get this rating system.
Database Structure
Copy this db structure as it is and paste in your mysql window.
|
1 2 3 |
CREATE TABLE IF NOT EXISTS `heat_ratings` ( `rating` int(11) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; |
JQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
$( init ); var num =0; function init() { $('#DoRating').click( function() { // hide curent rating $('#Panel').hide(); num = $("#count").val(); var width = $("#width").val(); // if you have given 5 hearts then show message if(num>5){alert('Maximum Rating ! Please submit now.'); return false;} $('#Heart'+num).animate( { left: width+'px', width: '43px', opacity: 1, height: '40px' } ); $("#saveRating").fadeIn('slow'); num = parseInt(num)+parseInt(1); $("#count").val(num); width = parseInt(width)-parseInt(75); $("#width").val(width); } ); } $(document).ready(function() { $('#saveRating').livequery("click", function(e){ vote = parseInt(num)-parseInt(1); showLoader(); $.post("rating.php?value="+vote,{ }, function(response){ hideLoader(); $('#saveRating').hide(); $('#wrap').html(unescape(response)); }); }); }); //show loading bar function showLoader(){ $('.search-background').fadeIn(200); } //hide loading bar function hideLoader(){ $('.search-background').fadeOut(200); }; function Load() { $("#count").val('1'); $("#width").val('180'); } |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
#Heart1,#Heart2,#Heart3,#Heart4,#Heart5 { margin-top:10px; display:none; float:left; width: 43px; height: 40px; left:-130px; position: relative;opacity:.1; } #wrap { width:400px; height:43px; float:left; padding:5px 4px 0px 4px; } #saveRating{ width:60px; float:left; cursor:pointer; margin:10px 4px 0px 4px; display:none; } #DoRating{ width:60px; cursor:pointer; float:left; } .search-background { display: none; font-size: 13px; font-weight: bold; height:47px; position: absolute; padding-top:20px; padding-left:17px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-align: left; opacity:0.5;filter: alpha(opacity=50) ; text-decoration: none; width:373px; } .search-background { background:#999999; color:#FFFFFF; text-shadow: #fff 0px 0px 20px; } #CurrentRating{ float:left; border:solid #999 1px; padding:5px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-top:5px; margin-left:4px; margin-right:5px; font-weight:bolder; font-family:"Courier New", Courier, monospace; color:#ff0000; } #CurrentRating #note{ font-size:12px; } #CurrentRating span{ font-weight:normal; color:#006699; } |
HTML
|
1 2 3 4 5 6 |
<input id="count" type="hidden" value="1"> <input id="width" type="hidden" value="180"> <br clear="all"><img src="mj.jpg" alt="" width="480"> <div class="search-background"><label><img src="loading.gif" alt=""></label></div> <div id="wrap"><img id="DoRating" title="Click To Show Your Love" src="hearts.png"> <span id="Panel">include_once('rating.php')</span> <img id="Heart1" src="heart.png"> <img id="Heart2" src="heart.png"> <img id="Heart3" src="heart.png"> <img id="Heart4" src="heart.png"> <img id="Heart5" src="heart.png"></div> <img id="saveRating" title="Click To Submit Your Rating" src="a.png"> |
Downloads files to get this latest tutorial.
Comments are closed.