[jQuery] Re: My first plugin, overlabel

[Karl Swedberg]

Hi Michael,

I'm guessing that the advantage has to do with semantic HTML and  
graceful degradation. Semantically, the label for an input belongs in  
a <label> element. When JavaScript is not enabled, the user will have  
a label next to the input, and won't have to select "userid" or  
"password" inside the input and delete it before typing his or her  
own info.


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Apr 1, 2007, at 6:08 AM, Michael E. Carluen wrote:


Hi Scott:

I am curious as to what might be the advantage of using your overlabel
plugin versus a much shorter script like the one below?

-Michael

<style>
        .login_labels{color: #eee;}
        .login_fields{color: #000;}
</style>

<script type="text/javascript">
$(function(){
$('#userid_field').focus(function() {
        $(this).attr({ class: 'login_fields'}).val(''); });
$('#password_field').focus(function() {
        $(this).attr({ class: 'login_fields', type: 'password'}).val('');
}); });
</script> 

<input type="text" name="user_id" id="userid_field"  
class="login_labels"
value="userid"> <input name="password" id="password_field"
class="login_labels" value="password">



-----Original Message-----
From: [EMAIL PROTECTED] [mailto:discuss- 
[EMAIL PROTECTED] On
Behalf Of Scott Sauyet
Sent: Saturday, March 31, 2007 1:55 PM
To: jQuery Discussion
Subject: [jQuery] My first plugin, overlabel

Hi Folks,

I'm fairly new to JQuery.  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.  The technique is at

     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.  I'm looking for advice as to  
whether
this is done in the best way possible.  A demo page is at

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

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

     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.  I'm
especially bothered by the number of times I am switching between DOM
objects and their JQuery counterparts.  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:

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

And it would be called like this:

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


I'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,

   -- Scott Sauyet


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/