Overlabel with Prototype

July 30th, 2008 by Carlos Barros

Some time ago I was searching for some overlabel script to use in a project and found a great script, created by Mike Brittain (here), and since then I’ve used this script in all my projects. But last week I was working in a project that uses Prototype library and I wondered if there was an overlabel plugin for prototype. After some time googling about the subject, I only came up with a JQuery plugin (here), that is a port of Mike Brittain script to JQuery library. So, as I didn’t find what I was looking for, I decided to make my own port and created a prototype plugin. This took me less than 15 minutes to get a working version of it.

This is the resulting code:

var overLabelPlugin = {
 overlabel: function (obj)
 {
  var  field;
 
  obj = $(obj);
 
  // check for attribute
  if(!obj.readAttribute('for') ||
   !(field = $(obj.readAttribute('for'))))
    return false;
 
  // apply overlabel style
  obj.className = 'overlabel-apply';
  if(field.value != '')
   $$('label[for='+$(field).readAttribute('id')+']').invoke('hide');
 
  // setup event handlers
  field.onfocus = function ()
  {
   $$('label[for='+$(this).readAttribute('id')+']').invoke('hide');
  }
 
  field.onblur = function ()
  {
   if($(this).value === '')
    $$('label[for='+$(this).readAttribute('id')+']').invoke('show');
  }
 
  obj.onclick = function ()
  {
   $($(this).readAttribute('for')).focus();
  }
 }
}
 
Event.observe(window,'load',function ()
{
 Element.addMethods(overLabelPlugin);
});

The only change I made to the original technique was the usage of hide() and show() instead of text-ident:-1000px; to hide/show overlabels.

To activate overlabel, you can do something like:

<html>
 <head>
  <title>Overlabel with Prototype</title>
  <style rel="stylesheet" type="text/css">
  label.overlabel-apply {
    position:absolute;
    top:3px;
    left:5px;
    z-index:1;
    color:#999;
    font-family:verdana serif sans-serif;
    font-size:10pt;
  }
  div.overlabel_container {
    position:relative;
  }
  </stype>
  <script src="prototype.js" type="text/javascript"></script>
  <script src="overlabel.js" type="text/javascript"></script>
  <script type="text/javascript">
  Event.observe(window,'load',function ()
  {
   $$('.overlabel').invoke('overlabel');
  });>
 
  </script>
 </head>
 <body>
  <div class="overlabel_container">
   <label class="overlabel" for="uname">Username</label>
   <input id="uname" name="uname" type="text" />
  </div>
 </body>
</html>

I’m by no means a Prototype expert, so if there’s some better way to do this, please let me know.

In javascript | 4 Comments