Solved

add pause button to timer

Posted on 2014-07-27
4
355 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

929 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now