jquery.focus-follow
A responsive indicator that follows your focus, while hovering over your elements (for example your image gallery). The elements can have different dimensions and have a different border-radius. Everything gets recalculated on the fly, so you can use it within your responsive websites.
Dependencies
In order to use jquery.focus-follow you have to include the jQuery library.
Installation
Include the script after jQuery:
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.focus-follow.js"></script>
Usage
followFocus method
Select your elements that should take advantage of the focus-follow feature and call the followFocus() method
$("img").followFocus();
Options
| option | type | default | description |
|---|---|---|---|
| color | string | "orange" | color of the focus indicator. |
| opacity | float | 1.0 | opacity of the focus indicator (range: 0.0 - 1.0). |
| speed | int | 400 | duration in milliseconds that takes until the focus indicator moves from the last hovered element to the new one. |
| margin | int | 2 | margin of the focus indicator |
| margin_horizontal | int | 2 | horizontal margin of the focus indicator |
| margin_vertical | int | 2 | vertical margin of the focus indicator |
| border_radius | int | auto | border radius of the focus indicator. (If this option is not in use, the plugin will automaticly detect the border radius of the elements and use these) |
| wrapper | string | - | id or class of a wrapper container that typically surrounds the elements. If you leave this wrapper the focus indicator will disappear. |
| timeout | int | 200 | time in milliseconds after the focus indicator will completly be faded out if no other element will be hovered during this timeout or you leave a specified wrapper. |
| z-index | int | -1 | If you have other z-index elements, you can push the focus indicator into the right layer. |
Demo
Check out the demo
Author
contact: [email protected]
Licence
The MIT License (MIT)
Copyright (c) 2013 Matthias Klan
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
