YUILight Example
Simple Paragraph Example
This example is my take on a jQuery plugin I saw. It basically allows you to 'highlight' elements on your page by simply giving them a class. There are a couple of options, including having the effect on click, or just mouseover. The CSS file is also provided which will allow you to customise the overlay colours too. Other options include changing the speed and opacity of the overlay. As always, view the source for the whole story!
The following paragraph has a class of "yuilight". Click it to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis sem egestas eros interdum aliquam in eget ipsum. Suspendisse rutrum elementum dui vitae condimentum. Donec ultricies, nulla vel auctor semper, turpis tortor dictum risus, at sagittis quam sapien sed orci. Suspendisse ante mauris, pretium eu ultrices ac, consectetur in mi. Quisque convallis fringilla neque, eget convallis neque hendrerit id. Nulla feugiat mollis justo sit amet luctus. Donec ut sapien urna, in pellentesque velit. Sed ornare tincidunt risus at commodo. Sed odio sapien, hendrerit vitae blandit nec, consectetur vel tellus. Nam gravida lectus a neque volutpat semper volutpat nisl varius. Suspendisse rutrum leo ac augue viverra commodo. Nunc adipiscing luctus odio, ac dapibus metus luctus non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis luctus luctus quam, sit amet sollicitudin metus commodo in.
Paragraph Hover Example
The following paragraph has a class of "yuilight ylover", which adds a hover event, rather than a click event. One thing to note here is that I have found some issues when applying this to elements that have child nodes as mousing over these children sometimes calls the mouseout effect.
Donec ut sapien urna, in pellentesque velit. Sed ornare tincidunt risus at commodo. Sed odio sapien, hendrerit vitae blandit nec, consectetur vel tellus. Nam gravida lectus a neque volutpat semper volutpat nisl varius. Suspendisse rutrum leo ac augue viverra commodo. Nunc adipiscing luctus odio, ac dapibus metus luctus non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis luctus luctus quam, sit amet sollicitudin metus commodo in.
Form With Class
Image With Class
The following image is in a paragraph and has a class of "yuilight". Notice that just clicking the image calls YUILight and is the only element affected.
Image In A <p> With Class
The following image is in a paragraph which has a class of "yuilight". Notice this time that clicking the paragraph, or the image highlights the whole paragraph.