New Ajax Star Rating System in Tag Cloud Style using JQuery and PHP
New tutorial in Rating System series is here for you. It is a stylish and animated rating system I created many Ajax based Rating and Voting systems over 99Points.info. You can get
Youtube Style Ratings and Ajax Rating In this rating system i used tag cloud technique, where top times rated star will be show bigger than others. So when you want to give a rate to any image or post, Click on your desired star number from 1-5 and then this star will go to bigger and bigger on each click. This is an awesome and unique rating system. Hope you like. You can get facebook style comment script, facebook style extracting url data, youtube style share button, facebook style profile edit, Ajax search tutorial, Dynamic dropdown using jQuery and Ajax and many others.
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 4 5 6 7 8 9 10 11 12 13 14 |
CREATE TABLE IF NOT EXISTS `star_rating` ( `1_rate` int(11) DEFAULT NULL, `2_rate` int(11) DEFAULT NULL, `3_rate` int(11) DEFAULT NULL, `4_rate` int(11) DEFAULT NULL, `5_rate` int(11) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; -- -- Dumping data for table `star_rating` -- INSERT INTO `star_rating` (`1_rate`, `2_rate`, `3_rate`, `4_rate`, `5_rate`) VALUES (1, 1, 1, 1, 1); |
|
1 2 3 4 5 |
CREATE TABLE IF NOT EXISTS `polling_ip` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userip` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; |
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 |
$(document).ready(function() { $('.star img').livequery("click", function(e){ var pid = $(this).parent().attr("id"); var width = $(this).width(); showLoader(pid,width); $.post("voting.php?value="+pid,{ }, function(response){ $("#"+pid).html('<img src="1.png" width="'+unescape(response)+'" />'); $.post("show_rating.php",{ }, function(result){ $(".show_rate").hide(); $(".show_rate").html(unescape(result)); }); }); }); $('.star img').livequery("mouseenter", function(e){ var pid = $(this).parent().attr("id"); // show rating of this star in total hideOther(); $(".show_rate").show(); $("#rating_"+pid).fadeIn(); var width = $(this).width(); $("#"+pid).html('<img src="hover.png" width="'+width+'" />'); }).livequery("mouseleave", function(e){ var pid = $(this).parent().attr("id"); var width = $(this).width(); $(".show_rate").hide(); $("#rating_"+pid).hide(); $("#"+pid).html('<img src="1.png" width="'+width+'" />'); }); //show loading bar function showLoader(pid,width){ $("#"+pid).html('<img src="load.gif" width="'+width+'" />'); } function hideOther() { $("#rating_1").hide(); $("#rating_2").hide(); $("#rating_3").hide(); $("#rating_4").hide(); $("#rating_5").hide(); } }); |
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 |
.star img { bottom: 0; cursor:pointer; } table td{ vertical-align:middle; height:80px; } .show_rate{ background-color:#669933; height:17px; padding:8px; text-align:center; width:40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display:none; border-radius: 10px; margin-top:5px; color:#FFFFFF; text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee; filter: dropshadow(color=#e5e5ee,offX=0,offY=1); font-family:"Courier New", Courier, monospace; font-size:18px; } .show_rate span{ display:none;} |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table border="0"> <tbody> <tr> <td> <div id="1" class="star"><img src="1.png" alt="" width="<?php echo $rating[0]?>" /></div> </td> <td> <div id="2" class="star"><img src="1.png" alt="" width="<?php echo $rating[1]?>" /></div> </td> <td> <div id="3" class="star"><img src="1.png" alt="" width="<?php echo $rating[2]?>" /></div> </td> <td> <div id="4" class="star"><img src="1.png" alt="" width="<?php echo $rating[3]?>" /></div> </td> <td> <div id="5" class="star"><img src="1.png" alt="" width="<?php echo $rating[4]?>" /></div> </td> <td width="100"> <div class="show_rate"><!--?php include_once('show_rating.php');?--></div> </td> </tr> </tbody> </table> |
Downloads files to get this latest tutorial.
Recommended WordPress Themes Store
