Solved

add pause button to timer

Posted on 2014-07-27
4
357 Views
Last Modified: 2014-12-03
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

0
Comment
Question by:designaire
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40223292
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
 

Author Comment

by:designaire
ID: 40223350
Perfect. Thank  you.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40223353
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
 

Author Comment

by:designaire
ID: 40478390
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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question