🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.Features:Using the directory-function upgrades the user’s experienceCustomizable trough settings and CSSHighly compatibleHighly customizableUses CSS3 transitions by default

Animation CSS Menus Plugins

Documentation

esKju's jQuery FancyIndex Plugin

What is it?

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.

Features

  • Using the directory-function upgrades the user's experience
  • Customizable trough settings and CSS
  • Highly compatible
  • Highly customizable
  • Uses CSS3 transitions by default

How to use

1. doctype

Make sure you are using valid DOCTYPE. This is required for FancyIndex to look and function correctly.

<!DOCTYPE html> 

2. include files

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" /> 

3. html markup

Create a HTML container.

<-- oh wait... it's created automatically, nothing to do here :) --> <-- just skip this gratuitous step! :) --> 

4. fire plugin using jquery selector

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();  } ); 

Options

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

HTML Attributes

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)

Author & Help

For more information visit the author's page:


You May Also Like