Nowadays almost every "fresh" page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library. Licensed under MIT and GPL licenses.
- Using the directory-function upgrades the user's experience
- Customizable trough settings and CSS
- Highly compatible
- Highly customizable
- Uses CSS3 transitions by default
Make sure you are using valid DOCTYPE. This is required for FancyIndex to look and function correctly.
<!DOCTYPE html>
Loading jQuery from CDN (Content Delivery Network) is recommended. Include all FancyIndex JavaScript and CSS files in addition.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/eskju.jquery.fancyindex.js"></script>
<link rel="stylesheet" href="css/eskju.jquery.fancyindex.css" />
Create a HTML container.
<-- oh wait... it's created automatically, nothing to do here :) -->
<-- just skip this gratuitous step! :) -->
If you are not familiar with jQuery, please, read this tutorial for beginners. Sample examples:
$( document ).ready( function( )
{
// instead of "body" use your desired containing element
// "body" fetchs all information
$( "body" ).FancyIndex();
} );
Easy plugin, easy life. Configure things just to taste :)
$( document ).ready( function( )
{
$( "body" ).FancyIndex( {
your: "option",
will: "be",
the: "best"
});
} );
| Option | Type | Default | Description |
|---|---|---|---|
| hideWhenInactive | boolean | true | Hide index if unwanted |
| focusInitally | boolean | true | Focus index on load |
| focusOnResize | boolean | true | Focus index on window resize |
| focusOnScroll | boolean | true | Focus index on scroll |
| focusOnHover | boolean | true | Focus index on hover |
| focusTimeout | int | 1000 | Time before setting index inactive |
| firstOnly | boolean | false | Highlight the first match only |
| forceLastActive | boolean | true | Highlight the last headline (even if not visible) |
| scrollOnClick | boolean | true | Scroll to desired section once clicked |
| scrollToDuration | int | 1000 | Scroll duration |
| maxPrioritizedItems | int | 3 | Number of prioritized items (important for CSS) |
| flipPosition | boolean | false | Pulls index to left screen border |
Customize single HTML objects
| Option | Type | Default | Description |
|---|---|---|---|
| data-fancyindex-hide | boolean | false | Hide this HTML item in index |
| data-fancyindex-title | string | Custom title in index (use HTML content if empty) |
For more information visit the author's page:
- http://www.cwdesigns.de esKju's Playground
- http://www.cwdesigns.de/eskju-jquery-lazyimage.html esKju's LazyImage Project Page
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent