OKHover is a jQuery plugin that makes it easy to reproduce the tiled background effect seen on the OKFocus website. It uses HTML5 data attributes and is designed to be simple yet highly customizable.
The only real technical requirement besides jQuery itself, is declaring the HTML5 doctype for your web application. This is achieved by making sure the first line of your HTML is <!doctype html>. This ensures that using data attributes will be considered valid markup by browsers.
For a simple example, consider this snippet of code:
<ul>
<li data-okimage='http://example.com/path/to/an/image.gif'>
<a href='#'>I'm a link</a>
</li>
</ul>The above will have no visible effect. To achieve the hovering effect, you'll have to include this javascript after including the OKHover source.
$(function(){
$('li').okhover();
}):When you hover on an <li>, you'll now see the okhover effect in action. The data attribute data-image is a reference to the image that will appear tiled in the background.
The following options are available to you:
| option | description | default |
|---|---|---|
| fadeIn | A boolean that controls if the background image will fade in | false |
| fadeOut | A boolean that controls if the background image will fade out | false |
| fadeInDuration | A number that controls how long the fade-in will be (in milliseconds) | 400 milliseconds |
| z-index | A number that controls the z-index of the background div | -1 |
| el | If you would like to the effect to appear somewhere else (any DOM element that supports the background-image property) | null |
Here's an example with a lot of options:
$(function(){
$('div').okhover({
fadeIn: true,
fadeOut: true,
fadeInDuration: 2000,
zIndex: 420,
el: 'a'
});
});OKFocus tests JavaScript with Jasmine. Run tests:
$ bundle install
$ rake jasmine