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:[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/
