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

Join the conversation

Browse

Activity

Important Information