My first plugin, overlabel

On 3/31/07, Scott Sauyet < listssauyet.com">listssauyet.com> wrote:

Hi Folks,

I&#39;m fairly new to JQuery.&nbsp; I recently needed a technique I had seen
recently on A List Apart to combine labels and text input boxes into a
single control in order to save space.&nbsp; The technique is at

&nbsp; &nbsp;  http://alistapart.com/articles/makingcompactformsmoreaccessible

The Javascript there looked like a lot for what was done, so I tried to
simplify it into a JQuery plug-in.&nbsp; I'm looking for advice as to whether
this is done in the best way possible.&nbsp; A demo page is at

   ;  http://scott.sauyet.com/Javascript/Demo/Overlabel/

and I've posted a blurb about it on my blog:

&nbsp; &nbsp;  http://tinyurl.com/2vx4n8

The code is fairly simple and much simpler than the original (see the
original article or the commented out code in the demo page), but I'm
wondering if there are further simplifications that should be made. ; I9;m
especially bothered by the number of times I am switching between DOM
objects and their JQuery counterparts. &nbsp;It seems somehow counterintutive
that I should need to do so as many times as I do.

Any advice would be appreciated.

This is the plug-in code:

&nbsp; &nbsp;  jQuery.fn.overlabel = function() {
 &nbsp; &nbsp;   ;  this.each(function(index) {
 &nbsp; &nbsp;   ; &nbsp; &nbsp;  var label = $(this); var field;
&nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp; var id = this.htmlFor || label.attr('for&#39;);
 ; &nbsp; &nbsp; &nbsp; &nbsp;   ; if (id && (field = document.getElementById(id))) {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;  var control = $(field);
  ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;  label.addClass (&quot;overlabel-apply";);
 &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; if (field.value !== '') {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; label.css("text-indent";, "-1000px");
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp;  }
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;  control.focus (function () {label.css("text-indent&quot;,
 &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp; "-1000px");}).blur(function () {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; if (this.value === '') {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; label.css ("text-indent&quot;, "0px&quot;);
&nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  }
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;  });
   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; label.click(function() {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; var label = $(this); var field;
&nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  var id = this.htmlFor || label.attr('for&#39;);
 ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp; if (id && (field = document.getElementById(id))) {
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; field.focus();
   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;  });
&nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; }
 &nbsp; &nbsp;   ;  });
   ;  }

And it would be called like this:

&nbsp; &nbsp;  $(document).ready(function() {
 &nbsp; &nbsp;   ;  $("label.overlabel").overlabel();
 &nbsp; &nbsp; });


I9;m also wondering what the thought is on just how much plug-ins should
stand on their own.  This right now is dependent upon rules being
defined in the CSS for the label (position: absolute, top, left,
z-index) and for a common ancestor of the label and the input box
(position:relative or absolute).  ;I could do all this in the plug-in, of
course, but that limits flexibility on the CSS side. ; Is there any
established wisdom about this in the JQuery community?

Thanks for any insight you can offer,

&nbsp;  -- Scott Sauyet


_______________________________________________
jQuery mailing list
discussjquery.com">discussjquery.com
http://jquery.com/discuss/