jQuery in XPages #2 – Labelify.js

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.


Edit box with a "in-line" label

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..

Adding fields to the XPages from a pre-defined data source
Adding fields to the XPages from a pre-defined data source

Here’s the steps:

  1. Add the xLabelify.js  script library to you database
  2. Add the xLabelify.js Javascript library to your XPage as a Resource

    Adding the xLabelify.js Resource to your XPage
    Adding the xLabelify.js Resource to your XPage
  3. Add the xLabel.css  to your database
  4. Add the xLabel.css as a resource to your XPage as a Resource
  5. Add the following code to the Client side JavaScript portion of the onClientLoad event of your XPage
$("input").labelify({ text: "label", labelledClass: "labelHighlight"  });
Adding the xLabelify code to the onClientLoad XPage event
Adding the xLabelify code to the onClientLoad XPage event

And that gives us the desired outcome:

Labelify your XPage
Labelify your XPage

Breaking it down

Click here to view the How does it work article

Thanks

Thanks to David Leedy once again for hosting the demonstration

Advertisements

3 thoughts on “jQuery in XPages #2 – Labelify.js

  1. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s