Focusify jQuery Plugin Implementation

The simplest implementation. Class of 'infocus' gets applied to the adjacent label element on focus of input. With no options specified, elements that directly preceed the focusify target receive the class name.

$('#fy_form_1').find('.focus-hook').focusify();

In this example, we specify the class name to be applied to a parent element. This allows us get a little fancier with our presentation.

$('#fy_form_2').find('.focus-hook').focusify({parent: '.fy-wrap'});

Below is an example of a much more complex implementation. We use a custom class name, as well as specifying two targets, a parent element, and an adjacent label element. This allows us to visually cue groupings, by applying emphasis on the grouping's heading and the related label. With some clever CSS, we can create some pretty sophisticated effects.

$('#fy_form_3').find('.focus-hook').focusify({
  parent: 'fieldset',
  sibling: 'label',
  classname: 'multi-focus'
});

Multiple Field Grouping

We can also quickly unbind all associated focusify events by applying the 'destroy' method. Click the button below to observe this functionality on the above form.

$('#fy_form_3').find('.focus-hook').focusify('destroy');