Jump to content

buttons not aligning at the center


piano0011

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

Link to comment
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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
 
}
Link to comment
Share on other sites

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.

Link to comment
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.

Link to comment
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>

 

Link to comment
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....

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
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

 

 

Link to comment
Share on other sites

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

Link to comment
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.

Link to comment
Share on other sites

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!

Link to comment
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?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.