This week’s article is about the visually effective jQuery plugin – labelify.js
Labelify.js
In the simplest terms we want to make our form look like the “label” is inside the field – here’s an example I am sure many of you are familiar with. The general concept is that instead of having the label adjacent to the field, the “Compose new Tweet” is inside the field itself and disappears once you click in the field.
The demonstration
The demonstration can be found here – (demonstration)
The download
The sample jQuery in Xpages database (containing examples from all the articles) can be downloaded here – (download sample database)
How do we add Labelify to our XPages?
This effect works on an XPage where the labels and fields are generated by dragging and dropping the fields from a data source. How this works will be broken down later..
Here’s the steps:
- Add the xLabelify.js script library to you database
- Add the xLabelify.js Javascript library to your XPage as a Resource
Adding the xLabelify.js Resource to your XPage - Add the xLabel.css to your database
- Add the xLabel.css as a resource to your XPage as a Resource
- Add the following code to the Client side JavaScript portion of the onClientLoad event of your XPage
$("input").labelify({ text: "label", labelledClass: "labelHighlight" });
And that gives us the desired outcome:
Breaking it down
Click here to view the How does it work article
Thanks
Thanks to David Leedy once again for hosting the demonstration
Xomino 
Point on accessibility – I know that adding the title attribute to an input field is usually recommended for accessibility, but I would wonder if having form fields without proper label tags is considered accessible? My initial guess says no, it isn’t. So for all of the devs in the government sector especially, this kind of thing may be an issue depending how much you care.
Anyone know more about this? I’m off to do a little digging.
Alan,
the labels are still on the form just hidden with the stylesheet. So a screen reader might not find them….I dunno. Can you set a style to show them for screen reader agent?
MArky
Well, from what I am reading, I get conflicting information. One site says you can hide labels using display:none for example and they will still be available to screen readers because they are within the form tag; while another site says using display:none (or visibility:hidden) will also hide them from screen readers and you should use the css clip property or absolute position them way off the visible screen to hide them. I know OneUI, jQueryUI do the positioning thing for sure, and I think Dojo does as well (at least for the claro and tundra themes)
So, hard to truly know. I think out of the sites I viewed, this one seems like the best reference since it is the Yahoo accessibility team:
http://yaccessibilityblog.com/library/form-labels-visible-and-hidden.html
If anyone else has some thoughts, please share