?
Solved

add pause button to timer

Posted on 2014-07-27
4
Medium Priority
?
367 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 2000 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

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

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

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!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month10 days, 5 hours left to enroll

762 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