buttons not aligning at the center

[piano0011]

Hey guys!

I have the following code as part of my countdown timer and placed a div class around it, shouldn't it align both the heading and buttons as well because for some reason, my buttons are not in the center when set to the following:

<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>


   <center><b><span id="time" ...></span></center></b>

<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="start" onclick="stop()">Stop</button>
</div>
</body>
</html>


CSS code:

div.timer {
  margin: 15% auto;
 
}

do I have to do a # buttons {}? I tried that and it didn't work as well... At the moment, my page looks like this:

[Barand]

The "auto" margins position the div itself, not the contents of the div. If you want the buttons centred then use text-align attribute.

<div class="timer">
    <h1>Welcome to Timertrone.</h1>
    <br></br> 
    <button name="start" onclick="startTimer()">Start</button>
    <button name="stop" onclick="stop()">Stop</button>
</div>

 

    div.timer {
        
        text-align: center;
        margin: 15% auto;
 
    }

 

[piano0011]

Thanks! 

Edited July 18, 2018 by piano0011

[piano0011]

I forgot to add that when i add a form attribute of <form> before the span id of time, then for some reason, the timer doesn't work... i am trying to add a form so that i can output the time of the user

[Barand]

You seem to be regressing on this problem. A while ago you have a form with a timer that submitted to a database update.

[piano0011]

I did but that was a countup timer and i have found a countdown timer but for this particular one, it doesn't seem to work when i put a form tag. I think it could be the span element?

Edited July 18, 2018 by piano0011

[cyberRobot]

4 hours ago, piano0011 said:

I forgot to add that when i add a form attribute of <form> before the span id of time, then for some reason, the timer doesn't work...

The code is likely built to navigate that page with specific tags within a specific order. What does your code look like? Preferably the code that's specific to the problem. I'm not sure how much code there is.

4 hours ago, piano0011 said:

i am trying to add a form so that i can output the time of the user

You can output the time without adding a form. JavaScript has the ability to edit any part of your HTML page.

Edited July 18, 2018 by cyberRobot
fixed typo

[piano0011]

Thanks for the reply.. the code is as follows. I am trying to have a form so that i can update it into the database. But the timer doesn't work with the following code..

div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form>

   <center><b><span id="time" ...></span></center></b>

<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="start" onclick="stop()">Stop</button>
</form
</div>
</body>
</html>


CSS code:

div.timer {
  margin: 15% auto;
 
}

Edited July 18, 2018 by piano0011

[maxxd]

This is not the code that cyberRobot was talking about. I have to assume there's a startTimer() and stop() function somewhere? If not, then figuring out why this isn't working just got a lot easier...

Also, you've got an empty h1 element and you don't have the '>' at the end of your </form> tag.

Edited July 19, 2018 by maxxd

[cyberRobot]

13 hours ago, piano0011 said:

But the timer doesn't work with the following code..

The button to start your timer is using the "submit" type. With that button type and how your code is set up, the page reloads whenever the Start button is clicked. The timer works if you change the button code to the following:

<button type="button" name="start" onclick="startTimer()">Start</button>

 

13 hours ago, piano0011 said:

I am trying to have a form so that i can update it into the database.

Yeah, that would be a reason for using a form. Does that mean you are trying to record the interactions with both the Start and Stop buttons? If so, you could pass the information to PHP using AJAX. That way the page wouldn't need to reload every time a button is pressed.

[cyberRobot]

1 hour ago, maxxd said:

This is not the code that cyberRobot was talking about. I have to assume there's a startTimer() and stop() function somewhere?

FYI, the full code can be found here:

 

[piano0011]

My apologies.. This is the whole code:

 

<?php

$timer = 60;


?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML = "<b>Time Left:  </b>" + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stop() {
     	clearInterval('time');
     	alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	  
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>

<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>


   <span class="timer_display" id="time" ...></span>



<input type="test" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>





</div>
</div>
</body>
</html>

 

[piano0011]

Thanks for explaining about the buttons..I am trying to get the input of the timer, only when the user stops the time. Then, I can do some if statements to compare what time the user has finished and to give him or her points....

[piano0011]

I changed the button type to button instead of submit and it does work. The only problem now is that I can't get my alert to display the message to the user when adding the form tag. It should say the following:

 

 

However, after adding the form tag here:

<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form>

   <span class="timer_display" id="time" ...></span>



<input type="test" id="input">
<h1 id="buttons"></h1>
<button type="button" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>

</form>



</div>
</div>
</body>
</html>

I get the following image: 

Thanks!

Edited July 19, 2018 by piano0011

[cyberRobot]

I'm not sure why, but JavaScript seems to be having a difficult time with the function being named "stop". It worked with your older code, but when the <form> tag is moved to encompass the <span class="timer_display"> tag, JavaScript no longer recognizes "stop" as a function. I'm guessing that "stop" is reserved word in JavaScript and is likely causing weird problems like this.

When I change the function name to "stopTimer", remember to change the function call in the <button> tag also, the script magically works again.

Side note: you'll want to look into JavaScript's clearTimeout() feature. More information, including an example, can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout

Edited July 19, 2018 by cyberRobot
fixed typo

[piano0011]

Thanks and I really appreciate your kind assistance everyone...... can't wait to get my piano website up and running

[piano0011]

I tried using stopTimer for my button and also changed the function to stopTimer. It almost work but the time does display in the input box but only momentarily. I tried to echo it into the php but it says undefined index

<?php

$timer = 60;
$result = $_POST['timer'];
echo $result;

?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML =  + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stopTimer() {
     
     	alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	  
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>
<form>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form action="" method="POST">

  <b>Time Left:  </b> <span class="timer_display" id="time"> ...</span>



<input type="text" name="timer" id="input">
<h1 id="buttons"></h1>
<button type="button" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stopTimer()">Stop</button>

</form>



</div>
</div>
</body>
</html>

 

 

[piano0011]

I think I forgot to change the stop button type to button as well. When I changed both buttons type to buttons, then it does work but I am not sure why my isset function is always showing as error? I am trying to add another button for the user to submit it for the timer result to be processed but it is showing as undefined index:

 

<?php

if (!isset($_POST['submit'])) {
   header ("Location: update.php?countdown2=error");
} else {

$timer = 60;
$result = $_POST['timer'];
echo $result;

}
?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML =  + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stopTimer() {
     
     alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	  
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>
<form>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form action="" method="POST">

  <b>Time Left:  </b> <span class="timer_display" id="time"> ...</span>



<input type="text" name="timer" id="input">
<h1 id="buttons"></h1>
<button type="button" name="start" onclick="startTimer()">Start</button>
<button type="button" name="stop" onclick="stopTimer()">Stop</button>
<button type="submit" name="submit" >Submit</button>

</form>



</div>
</div>
</body>
</html>

Edited July 20, 2018 by piano0011

[maxxd]

You're checking to make sure $_POST['submit'] is set, but not checking $_POST['timer'] before you attempt to assign its value to $result. As to the stop() function issue, that's weird - there's a jQuery stop() function but you're not using jQuery. I'm not aware of a stop() function in JavaScript itself, but that doesn't mean it doesn't exist. Either way, naming the function stopTimer() is more descriptive and probably a better idea anyway.

[Barand]

Did you try the script I posted yesterday. You have so many current threads about this same page problem you may have missed it.

 

[piano0011]

ok.... that explains it because if the value of the timer is not checked or input in the form, there will always be an error... I think...

 

My apologies Barand, I can't believe I posted in different places.. I must have overlooked! In your code, can I add a submit buttons and a form tag ? I will try to see if that will process the variables in php with a form tag.. You guys should make some video tutorials as some people may be more of a visual learner.... but thanks!

Edited July 20, 2018 by piano0011

[piano0011]

Barand, why did you use a form name="form1" because I can't see this in any of the functions? Apologies... I see it..

Edited July 20, 2018 by piano0011

[Barand]

The answer to the why questions is so javascript could submit the form for you.

document.form1.submit()

 

[piano0011]

I might have asked this before but should I be storing the value: 00:00:00 as time or timestamp? I guess timestamp is for date where you have the days as well but for time, it is just time? and I don't have to explode and remove the : to store it I guess?

[Barand]

Why don't you check what the mysql manual says about it?