The Adwords Input Progress Bars
- joebert
- Sledgehammer
- Joined: Feb 10, 2004
- Posts: 13455
- Loc: Florida
- Status: Offline
November 5th, 2010, 5:41 pm
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. 
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>
<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>
- <!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>
Strong with this one, the sudo is.
- Anonymous
- Bot
- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
November 5th, 2010, 5:41 pm
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 1 post
- Users browsing this forum: No registered users and 119 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
