Stopping html canvas working on back button

AdamHull12 · February 25, 2015

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

Sign In

Stopping html canvas working on back button

Recommended Posts

AdamHull12

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information