» » » » » » 55points ... best Ajax Polling/Voting System

55points uses JQuery, Ajax, PHP and MySQL to program : Super Ajax Polling/Voting System
Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.I always tries to provide the users of 55Points.info some common but useful scripts which makes their effort succeeded. So after some voting system tutorials like

Database Structure

Copy this db structure as it is and paste in your mysql window.
CREATE TABLE IF NOT EXISTS `polling` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `liked` int(11) NOT NULL,
  `dislike` int(11) NOT NULL,
  `average` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `polling`
--
 
INSERT INTO `polling` (`id`, `liked`, `dislike`, `average`) VALUES
(1, 1, 1, 1);
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 ;
 
--
-- Dumping data for table `polling_ip`
--

JQuery Code

// <![CDATA[ 
$(document).ready(function() {
 
 $('.totalstatsbutton').livequery("mouseenter", function(e){
  $('.tooltip3').show();
  $('.totalstats').fadeIn(200);
 }).livequery("mouseleave", function(e){
  $('.tooltip3').hide();
  $('.totalstats').fadeOut(200);
 });
});
 
$(document).ready(function(){ 
 
 $('#Send').click(function(){
 
        var vote = $("input[@name='radio_name']:checked").val();
  showLoader();
  $.post("voting.php?value="+vote,{
  }, function(response){
   hideLoader();
   $('#wrap').html(unescape(response));    
  });
 }); 
 
 //show loading bar
 function showLoader(){
  $('.search-background').fadeIn(200);
 }
 //hide loading bar
 function hideLoader(){
  $('.search-background').fadeOut(200);
 };
 
});
CSS
/* CSS Document */
button {
 -moz-background-clip:border;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 -moz-border-radius-bottomleft:3px;
 -moz-border-radius-bottomright:3px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-topright:3px;
 background:#F6F6F6 none repeat scroll 0 0;
 border:1px solid #CCCCCC;
 cursor:pointer;
 float:left; margin-left:10px;
 height:2.0833em;
 overflow:visible;
 padding:0 0.5em;
 vertical-align:middle;
 white-space:nowrap;
}
#wrap{
 border:solid #e5eecc 1px; width:200px; background:#e5eecc;
 -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);
}
.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
.tooltip2{ height:13px;display: none;width:140px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=20)}
.tooltip3{ height:13px;display: none;width:270px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
 
#poll_quiz{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#fff}
#poll_quiz label{ width:150px; border:solid #669933 1px; padding:5px; background-color:#669933;}

#options{ text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; padding:6px;}

.totalstats{
  display: none;
  font-size: 0.8em;
  height:17px;
  padding:7px;
  -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;
  text-decoration: none;
  width:60px;
  background-color:#333333;
  color:#FFFFFF;
  text-shadow: #fff 0px 0px 20px;
 }
 
.totalstatsbutton{ width:180px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0; height:40px; cursor:auto}
.totalstatsbutton .greenBar{background-color:#AADA37;  height:5px; margin-bottom:3px; height:6px;}  
.totalstatsbutton .redbar{background-color:#CF362F;  height:5px; margin-bottom:3px;height:6px;}  
.totalstatsbutton .bluebar{background-color:#0099CC;  height:5px; margin-bottom:3px;height:6px;} 

 
#poll_result{ text-align:center; padding-top:12px; vertical-align:bottom}
#poll_result label{ float:left;font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; width:49px;}
#poll_result div{ float:left}
#poll_result .greenBar2{background-color:#AADA37;  width:20px; margin-left:40px; height:6px;} 
#poll_result .redbar2{background-color:#CF362F;  width:20px; margin-left:26px;height:6px;}  
#poll_result .bluebar2{background-color:#0099CC;  width:20px; margin-left:26px;height:6px;} 

#voting_result{ border:solid #666666 1px; height:120px; margin-top:19px;-moz-border-radius: 6px; 
  -webkit-border-radius: 6px; width:500px; margin-left:12px; display:none
  }
 
#Send{ border:#CC0000 solid 1px;width:60px; background:#CC0000; color:#FFFFFF; cursor:pointer; padding:4px 12px 4px 12px; margin:10px 8px 6px 6px;}

.search-background {
  display: none;
  font-size: 13px;
  font-weight: bold;
  height:100px;
  position: absolute;
  padding-top:80px;
  -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: center;
  opacity:0.5;filter: alpha(opacity=50) ;
  text-decoration: none;
  width:200px;
 }
 
.search-background {
   background:#999999;
  color:#FFFFFF;
  text-shadow: #fff 0px 0px 20px;
 }
 
search-background label{ 
 
 border:solid #66FF00 1px;
}

HTML

<div id="poll_quiz"><label>Vote about 99Points.info</label></div>
 
 <div id="wrap">
  <div class="search-background">
   <label><img src="loading.gif" alt="" /></label>
  </div>
 
  <div align="left" style="height:0px; margin-bottom:8px;">
   <div class="tooltip3">
    <?php include ('update_tooltip.php')?>
   </div>
  </div>
 
  <br clear="all" />
 
  <div id="update_count">
   <?php include ('update_box.php')?>
  </div>
 
  <br clear="all" />
  <div id="options">
   <input type="radio" name="user_rating" checked="checked" value="good" /> Good
   <br />
   <input type="radio" name="user_rating" value="bad" /> Not Good
   <br />
   <input type="radio" name="user_rating" value="average" /> Average
   <br />
   <input value="Send" type="button" id="Send">
 
  </div>
 </div>
55points uses JQuery, Ajax, PHP and MySQL to program : Super Ajax Polling/Voting System


About bihax bihaxe

Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design. In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
«
Next
Newer Post
»
Previous
Older Post

1 comment:

Yassine Qoraiche said...

Thank Youuuuuu Very Match !! , Nice Site :D