Jump to content
piano0011

buttons not aligning at the center

Recommended Posts

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:

image.thumb.png.986b4243154224afa5470d824a14ab80.png

Share this post


Link to post
Share on other sites

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;
 
    }

 

Capture.PNG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites
Posted (edited)
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 by cyberRobot
fixed typo

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites
Posted (edited)

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 by maxxd

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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:

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites
Posted (edited)

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:

 

image.thumb.png.0b693fa7e6dea46426f442e76647fe10.png

 

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!

image.thumb.png.89d8b62041e7c85bd7900ec600929ba6.png

Edited by piano0011

Share this post


Link to post
Share on other sites
Posted (edited)

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 by cyberRobot
fixed typo

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

image.thumb.png.8bfbe0710c143644e2e64cb0d4067b12.png

 

 

Share this post


Link to post
Share on other sites
Posted (edited)

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>

image.thumb.png.dffac4a4c1b23e6d4f6c5364566cf125.png

Edited by piano0011

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites

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

document.form1.submit()

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.