The Adwords Input Progress Bars

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

While using Adwords today I noticed there are little gray progress bars beside text inputs that show you a graphical representation of how much space you have left to type. I thought this was pretty cool, so I whipped up a quick example of one way to do it without any Javascript libraries or anything. :D

HTML Code: [ Select ]
<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">//<![CDATA[
window.onload = function()
{
   var inputs = document.getElementsByTagName('input');
   for(var i = 0; i < inputs.length; i++)
   {
      if(inputs[i].type != 'text'){continue;}
      inputs[i].onfocus = inputs[i].onkeyup = function()
      {
         if(this.value.length >= this.size){this.value = this.value.substr(0, this.size);}
         this.style.borderRight = '#ccc ' + Math.min(50, Math.floor((this.value.length / this.size) * 50)) + 'px solid';
      }
      inputs[i].onblur = function()
      {
         this.style.borderRight = '0';
      }
   }
}
   //]]>
   </script>
   <style type="text/css">
   .pbar {width:150px; display:block; border:#999 1px solid; margin:10px 0 0 0;}
   .pbar > input {border:0; width:100px;}
   </style>
</head>
<body>
   <div id="content">
      <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
      <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
      <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
      <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
      <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
   </div>
</body>
</html>
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script type="text/javascript">//<![CDATA[
  5. window.onload = function()
  6. {
  7.    var inputs = document.getElementsByTagName('input');
  8.    for(var i = 0; i < inputs.length; i++)
  9.    {
  10.       if(inputs[i].type != 'text'){continue;}
  11.       inputs[i].onfocus = inputs[i].onkeyup = function()
  12.       {
  13.          if(this.value.length >= this.size){this.value = this.value.substr(0, this.size);}
  14.          this.style.borderRight = '#ccc ' + Math.min(50, Math.floor((this.value.length / this.size) * 50)) + 'px solid';
  15.       }
  16.       inputs[i].onblur = function()
  17.       {
  18.          this.style.borderRight = '0';
  19.       }
  20.    }
  21. }
  22.    //]]>
  23.    </script>
  24.    <style type="text/css">
  25.    .pbar {width:150px; display:block; border:#999 1px solid; margin:10px 0 0 0;}
  26.    .pbar > input {border:0; width:100px;}
  27.    </style>
  28. </head>
  29. <body>
  30.    <div id="content">
  31.       <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
  32.       <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
  33.       <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
  34.       <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
  35.       <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
  36.    </div>
  37. </body>
  38. </html>
  39.  

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 93 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.