html - How to make formatted text not shift a bit when chaning -


i made little jquery/javascript timer page because bored. works great except when numbers changing; there's discernible "jump" on page.

i don't have slightest idea how make count smoothly can me out? can viewed here: 

<!doctype html> <html>     <head>         <link href='http://fonts.googleapis.com/css?family=montserrat:400,700' rel='stylesheet' type='text/css'>         <style>             header{                 font-family: 'montserrat', sans-serif;                 font-size: 60px;                 color: white;                 text-shadow: 3px 3px 3px #000000;                 background-color: #4169e1;                   /*position: absolute;*/                 width: 110%;                 padding-top: 55px;                 padding-bottom: 55px;                 margin-top: -10px;                 margin-bottom: 0px;                 margin-left: -5%;                 text-align: center;             }             #text{                 color: #000000;                 font-family: 'montserrat', sans-serif;                 font-size: 120px;                 margin-top: 55px;                 text-align: center;             }             #title{                 color: #000000;                 font-family: 'montserrat', sans-serif;                 font-size: 60px;                 margin-top: 25px;                 text-align: center;             }             .buttons{                 color: #000000;                 font-family: 'montserrat', sans-serif;                 font-size: 48px;                 margin-top: 25px;                 text-align: center;             }             #start{                 padding: 15px;                 font-size: 48px;                 border: 2px solid;                 border-radius: 10px;                 border-color: #000000;                 color: #ffffff;                 text-shadow: 3px 3px 3px #000000;                 background-color: #4169e1;               }             #stop{                 padding: 15px;                 font-size: 48px;                 border: 2px solid;                 border-radius: 10px;                 border-color: #000000;                 color: #ffffff;                 text-shadow: 3px 3px 3px #000000;                 background-color: #4169e1;               }             #reset{                 padding: 15px;                 font-size: 48px;                 border: 2px solid;                 border-color: #000000;                 border-radius: 10px;                 color: #ffffff;                 text-shadow: 3px 3px 3px #000000;                 background-color: #4169e1;                }         </style>         <script src="jquery.js"></script>     </head>     <body>         <header>             jquery timer         </header>          <div class="buttons">             <button id="start">start</button>             &nbsp&nbsp             <button id="stop">stop</button>         </div>         <div id="text">00:00:00</div>         <div class="buttons">             <button id ="reset">reset</button>         </div>         <script>                 function formatsecondsastime(secs) {                   var hr  = math.floor(secs / 3600);                   var min = math.floor((secs - (hr * 3600))/60);                   var sec = math.floor(secs - (hr * 3600) -  (min * 60));                    if (hr < 10)   { hr    = "0" + hr; }                   if (min < 10) { min = "0" + min; }                   if (sec < 10)  { sec  = "0" + sec; }                   if (hr)            { hr   = "00"; }                    return hr + ':' + min + ':' + sec;                 }             var num = 0;             var stopflag = 0;             function counting(){                 settimeout(function(){                     if(stopflag < 1){                         num++;                         $("#text").html(formatsecondsastime(num));                         counting();                     }                 }, 1000);             };              $("#start").click(function(){                 stopflag = 0;                 counting();              });              $("#stop").click(function(){                 stopflag = 5;              });              $("#reset").click(function(){                 stopflag = 5;                 num = 0;                 $("#text").html("00:00:00");             })         </script>     </body> </html>


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more