add pause button to timer

I have a timer with a that makes a circle while it's running. It has a stop button but I would rather have a pause button. Right now when you hit the start buttons it starts from 0. I want it to just pause. I can't seem to figure it out because I don't have that much Jquery experience. The code should work if you paste it in an html page. The length would come from php code but I have that working ok and I have var length=20. I just need the pause button. Thanks...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="keywords" content="css3, jquery, pie, graph, chart, timer" />
<meta name="description" content="CSS3 pie graph timer with jquery" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <style>
			.timer {
				position:relative;
				font-size: 200px;
				width:1em;
				height:1em;
				float: left;
			}
			.timer > .percent {
				position: absolute;
				top: 1.05em;
				left: 0;
				width: 3.33em;
				font-size: 0.3em;
				text-align:center;
				padding-top:50px;
			}
			.timer > #slice {
				position:absolute;
				width:1em;
				height:1em;
				clip:rect(0px,1em,1em,0.5em);
			}
			.timer > #slice.gt50 {
				clip:rect(auto, auto, auto, auto);
			}
			.timer > #slice > .pie {
				border: 0.1em solid #5E3695;
				position:absolute;
				width:0.8em; /* 1 - (2 * border width) */
				height:0.8em; /* 1 - (2 * border width) */
				clip:rect(0em,0.5em,1em,0em);
				-moz-border-radius:0.5em;
				-webkit-border-radius:0.5em; 
				border-radius:0.5em; 
			}
			.timer > #slice > .pie.fill {
				-moz-transform:rotate(180deg) !important;
				-webkit-transform:rotate(180deg) !important;
				-o-transform:rotate(180deg) !important;
				transform:rotate(180deg) !important;
			}
			.timer.fill > .percent {
				display: none;				
			}
			.timer.fill > #slice > .pie {
				border: transparent;
				background-color: #5E3695;
				width:1em;
				height:1em;
			}			
			.percentColor{
				color: #5E3695;
			}
		</style>


<script type="text/javascript">

			var length =20
			var timer;
			var timerCurrent;
			var timerFinish;
			var timerSeconds;
			function drawTimer(percent){
				
				$('div.timer').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
				var deg = 360/100*percent;
				$('#slice .pie').css({
					'-moz-transform':'rotate('+deg+'deg)',
					'-webkit-transform':'rotate('+deg+'deg)',
					'-o-transform':'rotate('+deg+'deg)',
					'transform':'rotate('+deg+'deg)'
				});
				$('.percent').html(Math.round(percent)+'%');
			}

			function stopWatch(){
				var seconds = (timerFinish-(new Date().getTime()))/1000;
				if(seconds <= 0){
					drawTimer(100);
					clearInterval(timer);
				}else{
					var percent = 100-((seconds/timerSeconds)*100);
					drawTimer(percent);
				}
			}
            $(document).ready(function(){
				$('input[type=button]#watch').click(function(e){
					e.preventDefault();
					if($('input[type=button]#watch').val() == 'Start'){
						$('input[type=button]#watch').val('Stop');
						timerSeconds = $('input[type=text]#watch').val();
						timerSeconds =length;
						timerCurrent = 0;
						timerFinish = new Date().getTime()+(timerSeconds*1000);
						timer = setInterval('stopWatch()',50);
					}else{
					$('input[type=button]#watch').val('Start');
					clearInterval(timer);
					}
				});
				$('input[type=button]#watch').click();
			});
		</script>
</head>

<body>
	<input type="button" id="watch" value="Start" /> count down from seconds
	<div class="timer percentColor"></div>
</body>
</html>

Open in new window

designaireAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
How's this work for you?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="keywords" content="css3, jquery, pie, graph, chart, timer" />
<meta name="description" content="CSS3 pie graph timer with jquery" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <style>
			.timer {
				position:relative;
				font-size: 200px;
				width:1em;
				height:1em;
				float: left;
			}
			.timer > .percent {
				position: absolute;
				top: 1.05em;
				left: 0;
				width: 3.33em;
				font-size: 0.3em;
				text-align:center;
				padding-top:50px;
			}
			.timer > #slice {
				position:absolute;
				width:1em;
				height:1em;
				clip:rect(0px,1em,1em,0.5em);
			}
			.timer > #slice.gt50 {
				clip:rect(auto, auto, auto, auto);
			}
			.timer > #slice > .pie {
				border: 0.1em solid #5E3695;
				position:absolute;
				width:0.8em; /* 1 - (2 * border width) */
				height:0.8em; /* 1 - (2 * border width) */
				clip:rect(0em,0.5em,1em,0em);
				-moz-border-radius:0.5em;
				-webkit-border-radius:0.5em; 
				border-radius:0.5em; 
			}
			.timer > #slice > .pie.fill {
				-moz-transform:rotate(180deg) !important;
				-webkit-transform:rotate(180deg) !important;
				-o-transform:rotate(180deg) !important;
				transform:rotate(180deg) !important;
			}
			.timer.fill > .percent {
				display: none;				
			}
			.timer.fill > #slice > .pie {
				border: transparent;
				background-color: #5E3695;
				width:1em;
				height:1em;
			}			
			.percentColor{
				color: #5E3695;
			}
		</style>


<script type="text/javascript">
			var timerSeconds =20
			var timer;
			var percent=0
				
			function drawTimer(percent){
				
				$('div.timer').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
				var deg = 360/100*percent;
				$('#slice .pie').css({
					'-moz-transform':'rotate('+deg+'deg)',
					'-webkit-transform':'rotate('+deg+'deg)',
					'-o-transform':'rotate('+deg+'deg)',
					'transform':'rotate('+deg+'deg)'
				});
				$('.percent').html(Math.round(percent)+'%');
			}

			function stopWatch(){
				
				if(percent >= 100){
					drawTimer(100);
					clearInterval(timer);
				}else{
					percent += (timerSeconds/100)
					drawTimer(percent);
				}
			}
            $(document).ready(function(){
				$('input[type=button]#watch').click(function(e){
					e.preventDefault();
					clearInterval(timer)
					if($('input[type=button]#watch').val() == 'Start'){
						$('input[type=button]#watch').val('Pause');
						timer = setInterval('stopWatch()',50);
					}else{
					$('input[type=button]#watch').val('Start');
					clearInterval(timer);
					}
				});

				$('input[type=button]#watch').click();

			});
		</script>
</head>

<body>
	<input type="button" id="watch" value="Start" /> count down from seconds
	<div class="timer percentColor"></div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
designaireAuthor Commented:
Perfect. Thank  you.
0
GaryCommented:
Actually it's not perfect, my timings are completely off
Here's the fixed script

<script>
var timerSeconds = 20
var timer;
var percent = 0
var percentIncrease = 360 / (timerSeconds * 20)
var totaltime = 0

    function drawTimer(percent) {
        $('div.timer').html('<div id="slice"' + (percent > 180 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 180 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = percent;
        $('#slice .pie').css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
        });
    }

    function stopWatch() {
        if (percent >= 360) {
            clearInterval(timer);
            drawTimer(360);

        } else {
            percent += percentIncrease

            drawTimer(percent);
        }
    }
$(document).ready(function () {
    $('input[type=button]#watch').click(function (e) {
        e.preventDefault();
        clearInterval(timer)
        if ($('input[type=button]#watch').val() == 'Start') {
            $('input[type=button]#watch').val('Pause');
            timer = setInterval('stopWatch()', 50);
        } else {
            $('input[type=button]#watch').val('Start');
            clearInterval(timer);
        }
    });


    $('input[type=button]#watch').click();


});
< /script>

Open in new window

0
designaireAuthor Commented:
Gary,

You wrote or fixed this code for me. Now I'm trying to send a page to Ajax when it is done but it seems to hang up if the cache is cleared in chrome. Can you find another solution to how I can send it to Ajax?

http://squareonemeditation.com/webapp/meditatetest.php

function drawTimer(percent){
		
		$('div.timer').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
		var deg = 360/100*percent;
		$('#slice .pie').css({
			'-moz-transform':'rotate('+deg+'deg)',
			'-webkit-transform':'rotate('+deg+'deg)',
			'-o-transform':'rotate('+deg+'deg)',
			'transform':'rotate('+deg+'deg)'
		});
		$('.percent').html(Math.round(percent)+'%');
	}
	
	$(stopWatch = function() { 
	
		if(percent >=100){
			drawTimer(100);
			clearInterval(timer);
							
					$.ajax({
						url: "postmeditate.php",
						type : "POST",
						data: { length: length, userid: userid},
					})
					.success(function (response){
						location.href = "tracking.php";
						location.href = "tracking.php";
						location.href = "tracking.php";     							
					})
					.error(function (e){
					});
			
		}else{
			percent += (timerSeconds/minutes)
			drawTimer(percent);
			counter++;
		}

});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.