Hi,
I am struggling to get a htmnl 5 canavas not to work after the back button is pressed in the browser.
I have stopped back button being allowed but it stops me using javascript to use go back which i need.
The code is as follows.
<?php
require('globals.php');
if ($ir['wof_spins'] > 0) {
error("You have span the wheel this hour"); //this does not work on page back
}
?>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<script type='text/javascript' src="js/jquery.transit.min.js"></script>
<style type='text/css'>
.wheel-wrap {
position: relative;
width: 550px;
height: 550px;
overflow: hidden;
margin: 0 auto;
z-index: 1;
}
.marker {
top: 10px;
left: 247px;
z-index: 1;
position: absolute;
}
.wheel {
top: 90px;
left: 74px;
width: 550px;
z-index: 1;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
window.WHEELOFFORTUNE = {
cache: {},
init: function () {
console.log('controller init...');
var _this = this;
this.cache.wheel = $('.wheel');
this.cache.wheelMarker = $('.marker');
this.cache.wheelSpinBtn = $('.wheel');
//mapping is backwards as wheel spins clockwise //1=win
this.cache.wheelMapping = [400, 120, 80, 750, 150, 300, 60, 175, 500, 125, 75, 1000, 120, 200, 90, 600, 100, 250].reverse();
this.cache.wheelSpinBtn.on('click touchstart', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
//reset wheel
this.resetSpin();
//setup prize events
this.prizeEvents();
},
spin: function () {
console.log('spinning wheel');
var _this = this;
// reset wheel
this.resetSpin();
//disable spin button while in progress
this.cache.wheelSpinBtn.addClass('disabled');
/*
Wheel has 10 sections.
Each section is 360/10 = 36deg.
*/
var deg = 1500 + Math.round(Math.random() * 1500),
duration = 6000; //optimal 6 secs
_this.cache.wheelPos = deg;
//transition queuing
//ff bug with easeOutBack
this.cache.wheel.transition({
rotate: '0deg'
}, 0)
.transition({
rotate: deg + 'deg'
}, duration, 'easeOutCubic');
//move marker
_this.cache.wheelMarker.transition({
rotate: '-20deg'
}, 0, 'snap');
//just before wheel finish
setTimeout(function () {
//reset marker
_this.cache.wheelMarker.transition({
rotate: '0deg'
}, 300, 'easeOutQuad');
}, duration - 500);
//wheel finish
setTimeout(function () {
// did it win??!?!?!
var spin = _this.cache.wheelPos,
degrees = spin % 360,
percent = (degrees / 360) * 100,
segment = Math.ceil((percent / 6)), //divided by number of segments
win = _this.cache.wheelMapping[segment - 1]; //zero based array
console.log('spin = ' + spin);
console.log('degrees = ' + degrees);
console.log('percent = ' + percent);
console.log('segment = ' + segment);
console.log('win = ' + win);
//display dialog with slight delay to realise win or not.
setTimeout(function () {
$.ajax({
url: 'spinwheel.php',
type: 'post',
data: {"win":win},
success: function(data) {
if(!alert('You have won 짜'+win)) document.location = 'http://samuraiassault.com/loggedin.php';
}
});
}, 700);
//re-enable wheel spin
_this.cache.wheelSpinBtn.removeClass('disabled');
}, duration);
},
resetSpin: function () {
this.cache.wheel.transition({
rotate: '0deg'
}, 0);
this.cache.wheelPos = 0;
}
}
window.WHEELOFFORTUNE.init();
});//]]>
</script>
</head>
<body>
<!-- By http://jquery4u.com / Sam Deering -->
<h3><u>Wheel Of Fortune</u></h3><hr/>
<table><tr>
<td class="contentcontent" width="100%">
<div class="wheel-wrap">
<img class="wheel" src="images/wheel.jpg" />
<img class="marker" src="images/marker.png" />
</div>
</tr>
</td>
</table><hr/><?php echo $goback; ?><hr/>
</body>
</html>
thanks for you help in advance