There''s a great article on AListApart about this, from a few years
back. Has a great Kevin Cornell illustration, too.
Basically, you want to make your page in (rendered) HTML precisely the
way non-scripted clients will see it. Then, when you load the page in
a scripted browser, you do all the following changes in the DOM to
support your effect. That way, you''re using JavaScript to set up the
effect that only JavaScript can appreciate. It''s a neat way to avoid
presenting a page that a person (or bot) cannot enjoy.
In a nutshell, you rewrite the DOM to wrap each empty input field with
a DIV position:relative, and move the label inside that DIV as a
position:absolute child with sufficient z-index to appear above the
input. Any non-empty fields get the same structural change, but their
labels are hidden at page load so they don''t cover the filled input.
Next, you observe a click on the label to hide the label itself (and
the natural browser behavior will bubble through to focus the input).
Finally, you observe a blur on the input, and if the value is
different than the default (nothing) you restore the label. Otherwise,
it just remains hidden.
Walter
On Apr 29, 2011, at 1:42 PM, Fearless Fool wrote:
> [I originally posted this on the jquery forum, but I realize that
I''ll
> have to figure out the right syntax for form_for anyway, so it makes
> sense to cross-post here...]
>
> I''d like to be able to render forms, augmented by unobtrusive
> javascript
> that behave as follows:
>
> When javascript is enabled, the label appears inside the text field
> and
> vanishes on focus. The JQuery infield plugin by Doug Neiner
> (http://fuelyourcoding.com/scripts/infield/) is a good example of
> this.
>
> But when javascript is NOT enabled, the label appears on the outside,
> and not cleverly repositioned on the inside where it looks terrible.
> (Perhaps that''s just a matter of different CSS styling?)
>
> Pointers welcome TIA.
>
> - ff
>
> --
> Posted via http://www.ruby-forum.com/.
>
> --
> You received this message because you are subscribed to the Google
> Groups "Ruby on Rails: Talk" group.
> To post to this group, send email to rubyonrails-
> talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
> .
> For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
> .
>
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.