Solved

add pause button to timer

Posted on 2014-07-27
4
364 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

732 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