YUI Plugin: Lighter - Documentation


Simple Use Case: YAHOO.plugin.Lighter

Markup (lighter container element):
<div class="hotarea1 yui-cms-selector">
  <div class="yui-cms-item">
      Hot item #1
  <div class="yui-cms-item">
      Hot item #2

YAHOO.plugin.Lighter.add( 'hotarea1' );
The Ligther Manager explore the areas with className "hotarea1" and highlight the items with className "yui-cms-item" on mouseover event.

Singleton: YAHOO.plugin.Lighter

YAHOO.plugin.Lighter.add(str className, obj config);

(1) className: className of the area (don't matter if the markup exist or no, the lighter is based on the "event-driven technique" to monitoring the hot areas).
(2) Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list.


YAHOO.plugin.Lighter.add( "myhotareas", {
    persistent: false,
    onSelect: function ( element, area ) {
        alert ( 'Highlighting the element inside the area...');
    onReset: function ( area ) {
        alert ( 'Removing the highlighting from all the elements inside this area.' );

Leave the selected area highlighted:

Use the attribute "persistent" in the configuration to leave the last selected area highlighted when the mouse go out of this area.

Use the CSS rules to customize your lighter expirience:

#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item {
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  margin: 5px;
  padding: 5px;
#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item.selected {
  border: 1px solid #333333;
  background-color: #cccccc;

The lighter add a new className "selected" to the item (yui-cms-item) when the mouse is over the element.

Key Interesting Moments in Lighter

Events Fires Arguments
onSelect ...on mouseover a highlightable item element [0] element: item DOM ref, [1] parent: area DOM ref
onReset ...when the lighter reset all items inside an area [0] parent: area DOM ref

Key Lighter Configuration Options

Option (type) Default Description
className (s) null The className of the explorable areas

Lighter DOM Structure

classname: yui-cms-selector
classname: yui-cms-item
content fo the element 1
classname: yui-cms-item
content fo the element 2


- Use the same className for several areas inside the document
- Use the onSelect and onReset events to create your our functionalities
- Use the CSS rules to create different behaviors for the same className

See the API Docs at full screen in a new window:


No Comment yet

Bubbling for YUI 3.x

Dispatcher (gallery-dispatcher)
The Dispatcher satisfies a very common need of developers using the YUI library: dynamic execution of Ajax response content. (new)

Node Accordion (gallery-node-accordion)
The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies. (new)

Event Binder (gallery-event-binder)
Binding user actions until a particular YUI instance become ready, and the listeners defined before flushing those events through a queue. This will help to catch some early user interactions due the on-demand nature of YUI 3. (new)

Preload (gallery-preload)
Port of Stoyan Stefanov's JavaScript preload() function. It also has built-in support for Timer Idle to preload files only when the user is idle to avoid any overhead during the initial loading process. (new)

Parent Window Utility (gallery-parent-window)
This utility provides a set of functionalities to interact with the parent window. (new)

- See more modules by Caridy.

Bubbling Library is free open source software under the BSD License

(c) 2006 - 2010 Caridy Patino. All Rights Reserved.

This is one of my side projects, if you need something, just ask!