Bubbling Library > Examples

Plugin Lighter - Example - Extending the CSS functionalities (YAHOO.plugin.Lighter)

These examples will show you how to use the lighter plugin to highlighting areas within the document when the mouse goes into each area.

As you can see in the source code, this plugin don't need initialization process, working over the markup extending the CSS functionalities.

In this case, we use a simple CSS rule to modify the background, and add 15 pixel of left padding to each element in the list.

Here we have a more complex example, using the opacity (40%) as a default status, and when the mouse over the element, the area will become visible (opacity 100%), background gray and border black.

Lastest Releases

YAHOO.plugin.WizardManager
YUI plugin to management wizard controls. (new)

Hot Components

YAHOO.plugin.Dispatcher
YUI plugin to management dynamic areas within the document (loading remote contents with scripts tags inside).

Comming Soon

YAHOO.plugin.Dispatcher
The new dispatcher will support cross-domains capabilities using the most common techniques (both: proxy and iframe). (update comming soon)

Lastest Releases

YAHOO.plugin.Lighter
YUI plugin to highlighting areas within the document when the mouse goes into each area. (new)

 
 

In this case, the only diference is that we use another container to display the same class of elements (selector2), and the four elements are in the same row. As you can see, the lighter allow to use the same type for diferent areas, and you can customize each area using the container ID/CLASS.

Example:
#yourcontainer .yourselector.yui-cms-selector .yui-cms-item.selected {}
#othercontainer .yourselector.yui-cms-selector .yui-cms-item.selected {}

Lastest Releases

YAHOO.plugin.WizardManager
YUI plugin to management wizard controls. (new)

YAHOO.plugin.Lighter
YUI plugin to highlighting areas within the document when the mouse goes into each area. (new)

Hot Components

YAHOO.plugin.Dispatcher
YUI plugin to management dynamic areas within the document (loading remote contents with scripts tags inside).

YAHOO.widget.TooltipManager
YUI-CMS widget to apply tooltips to the whole document, including dynamic areas.

Comming Soon

YAHOO.plugin.Dispatcher
The new dispatcher will support cross-domains capabilities using the most common techniques (both: proxy and iframe). (update comming soon)

YAHOO.widget.TooltipManager
The new tooltip manager will support dynamic tips (fetching the information remotely using ajax). (update comming soon)

Comming Soon

YAHOO.plugin.Dispatcher
The new dispatcher will support cross-domains capabilities using the most common techniques (both: proxy and iframe). (update comming soon)

YAHOO.widget.TooltipManager
The new tooltip manager will support dynamic tips (fetching the information remotely using ajax). (update comming soon)