html - How to center a DIV created by Javascript? -


here code counter (modified www.w3schools.com code).

i'm struggling horizontally center output. have tried wrap in div , use following techniques center div, no success, pointers appreciated:

  1. using css style outside div text-align: center;
  2. using css style outside div margin-left: auto; & margin-right:auto;
  3. using javascript set margin property of output horizontally align;
<!doctype html> <html> <head>     <style>         .bigger {             text-align: center;             font-size: 1.35em;         }         .counter_p {             text-align: center;             font-size: 6em;             padding: 0px 0px 0px 0px;             line-height: 1em;         }         .counter_label {             font-size: 0.2em;             line-height: 1em;         }          }     </style> </head> <body>     <div class="counter_p" id="counter"></div>     <script>         function pad(str, max) {             return str.length < max ? pad("0" + str, max) : str;         }          // set date we're counting down         var countdowndate = new date("sep 1, 2017 15:37:25").gettime();          // update count down every 1 second         var x = setinterval(function() {              // todays date , time             var = new date().gettime();              // find distance between count down date             var distance = countdowndate - now;              // time calculations days, hours, minutes , seconds             var days = pad(string(math.floor(distance / (1000 * 60 * 60 * 24))),2);             var hours = pad(string(math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);              var minutes = pad(string(math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);             var seconds = pad(string(math.floor((distance % (1000 * 60)) / 1000)),2);               // attempt @ horizontally centering output             document.getelementbyid('counter').style.margin = '0 auto';              // output result in element id="counter"             document.getelementbyid("counter").innerhtml =                 "<div style='text-align:center'>"                 +   "<table border='0'>"                 +       "<tr>"                 +           "<td>"                 +               "<div>"+ days + "</div>"                 +               "<div class='counter_label'>days</div>"                 +           "</td>"                 +           "<td class='bigger'>|</td>"                 +           "<td>"                 +               "<div>" + hours + "</div>"                 +               "<div class='counter_label'>hours</div>"                 +           "</td>"                 +           "<td class='bigger'>|</td>"                 +           "<td>"                 +               "<div>" + minutes + "</div>"                 +               "<div class='counter_label' >mins</div>"                 +           "</td>"                 +           "<td class='bigger'>|</td>"                 +           "<td>"                 +               "<div>" + seconds + "</div>"                 +               "<div class='counter_label'>secs</div>"                 +           "</td>"                 +           "<td>"                 +       "</tr>"                 +   "</table>"                 +"</div>";               // if count down over, write text             if (distance < 0) {                 clearinterval(x);                 document.getelementbyid("counter").innerhtml = "countdown complete";             }         }, 1000);     </script> </body> </html>

creating container div hold countdown text works in case (using css flexbox justify-content set "center") - flexbox works correctly on window resize:

<!doctype html>      <html>      <head>      <style>          .bigger {        text-align: center;        font-size: 1.35em;      }      .counter_p {        text-align: center;        font-size: 6em;        padding:0px 0px 0px 0px;        line-height:1em;        }      .counter_label {          font-size:0.2em;          line-height:1em;      }      .container {        display: flex;        justify-content: center;      }        }      </style>      </head>      <body>      <div class="container">          <div class="counter_p" id="counter"></div>      </div>      <script>          function pad (str, max) {            return str.length < max ? pad("0" + str, max) : str;          }        // set date we're counting down      var countdowndate = new date("sep 1, 2017 15:37:25").gettime();        // update count down every 1 second      var x = setinterval(function() {            // todays date , time          var = new date().gettime();            // find distance between count down date          var distance = countdowndate - now;            // time calculations days, hours, minutes , seconds          var days = pad(string(math.floor(distance / (1000 * 60 * 60 * 24))),2);          var hours = pad(string(math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);            var minutes = pad(string(math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);          var seconds = pad(string(math.floor((distance % (1000 * 60)) / 1000)),2);            // output result in element id="counter"        document.getelementbyid("counter").innerhtml = "<div style='text-align:center'><table border='0'><tr><td><div>"+ days + "</div><div  class='counter_label' >days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>hours</div></td><td class='bigger'>|</td><td><div>"          + minutes + "</div><div class='counter_label' >mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>secs</div></td><td></tr></table></div>";                // if count down over, write text           if (distance < 0) {              clearinterval(x);        document.getelementbyid("counter").innerhtml = "countdown complete";          }      }, 1000);      </script>        </body>      </html>

note: css flexbox not supported in older browsers, see css flexible box layout module


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more