I've been having some issues with JQuery and PHP recently. I've been creating a webpage that has a button and a number of times that button has been pressed by anyone ever. Currently, I'm working on using JQuery and PHP to make the button press count updates 4 times a second.
Here is a peek at the code:
index.php:
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(document).ready(function(){
/* This function is for refreshing the total clicks number to make it live */
setInterval(function reload() {
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 250);
});
</script>
<script>
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
reload.php:
<?php
$my_file = 'clicks.txt';
$handle = fopen($my_file, 'r');
$value = fread($handle,filesize($my_file));
echo $value;
?>
In the JQuery section, there is a log to the console, but when I go to the website, nothing appears in the log, so I assume that the JQuery section gets skipped completely for some reason. Although, there are no errors in the console, so that makes the issue harder to identify...
If you want a look at the website, here is the address, but the uptime isn't exactly stellar, so don't be alarmed if you can't access the website.
