PHP, MySQL with jQuery Polling System - 01
.jpg)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VOTE</title>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<script type="text/javascript">
$(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);
};
});
</script>
</head>
<div align="center" style="margin-top:60px;">
<br /> <br />
<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>
<!-- TESTING here ### login -->
<div align="right" style=" margin-right:20px;"><a href="login.php"><img src="caa.png" width="60px" height="60px"/></a></div>
<!-- #### -->
<br clear="all" /><br clear="all" />
<div id="options">
<input type="radio" name="user_rating" value="good" /> PHP<br />
<br />
<input type="radio" name="user_rating" value="bad" /> MySQL<br />
<br />
<input type="radio" name="user_rating" value="average" /> jQueary <br />
<br />
<input value="Vote" type="button" id="Send">
<font size="2px">Thank You for your vote. <br /> <br />
This site is ONLY for information only. Please don't get serious analysis <br />by looking voting diagrams. Copyright @ 2014
Tutorial countdown: <div id="countbox1"></div><script type="text/javascript">
var CDown = function() {
this.state=0;// if initialized
this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
this.interval=null;// setInterval object
}
CDown.prototype = {
init: function(){
this.state=1;
var self=this;
this.interval=window.setInterval(function(){self.tick();}, 1000);
},
add: function(date,id){
this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
expire: function(idxs){
for(var x in idxs) {
this.display(this.counts[idxs[x]], "Now!");
this.counts.splice(idxs[x], 1);
}
},
format: function(r){
var out="";
if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+", ";}
if(r.h != 0){out += r.h +" "+((r.h==1)?"hour":"hours")+", ";}
out += r.m +" "+((r.m==1)?"min":"mins")+", ";
out += r.s +" "+((r.s==1)?"sec":"secs")+", ";
return out.substr(0,out.length-2);
},
math: function(work){
var y=w=d=h=m=s=ms=0;
ms=(""+((work%1000)+1000)).substr(1,3);
work=Math.floor(work/1000);//kill the "milliseconds" so just secs
y=Math.floor(work/31536000);//years (no leapyear support)
w=Math.floor(work/604800);//weeks
d=Math.floor(work/86400);//days
work=work%86400;
h=Math.floor(work/3600);//hours
work=work%3600;
m=Math.floor(work/60);//minutes
work=work%60;
s=Math.floor(work);//seconds
return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
},
tick: function(){
var now=(new Date()).getTime(),
expired=[],cnt=0,amount=0;
if(this.counts)
for(var idx=0,n=this.counts.length; idx<n; ++idx){
cnt=this.counts[idx];
amount=cnt.d.getTime()-now;//calc milliseconds between dates
// if time is already past
if(amount<0){
expired.push(idx);
}
// date is still good
else{
this.display(cnt, this.format(this.math(amount)));
}
}
// deal with any expired
if(expired.length>0) this.expire(expired);
// if no active counts, stop updating
if(this.counts.length==0) window.clearTimeout(this.interval);
},
display: function(cnt,msg){
document.getElementById(cnt.id).innerHTML=msg;
}
};
window.onload=function(){
var cdown = new CDown();
cdown.add(new Date(2015,1,8,14,8,20), "countbox1");
};
</script></font>
</div>
</div>
</div>
<body>
</body>
</html>
Post a Comment