creating plugins

Though I do not want to reinvent the wheel, it piques my interest to improve known mechanics. Just take a look - feedback welcome ;)

running around

Everyday life: Coffee, forms, microsites, daffy functions. To realize my own ideas I started to create this page. I hope you enjoy it.

solving problems

Doesn't it excite us to solve unusual problems? Beside daily grind's drabness it's the perfect diversion. So allow full bent!

fancyIndex

What is it?BENEFITS & MOTIVE

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.

 

FeaturesWHY SHOULD I USE IT?

  • 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 useget it up and running


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

OptionsTIME TO CONFIGURE THINGS?

Easy plugin, easy life. Configure things just to taste :)

$( document ).ready( function( )
{
	$( "body" ).fancyIndex();
} );
Ver.OptionTypeDefaultDescription
1.0hideWhenInactiveboolean Hide index if unwanted
1.0focusInitallyboolean Focus index on load
1.0focusOnResizeboolean Focus index on window resize
1.0focusOnScrollboolean Focus index on scroll
1.0focusOnHoverboolean Focus index on hover
1.0focusTimeoutint Time before setting index inactive
1.0firstOnlyboolean Highlight the first match only
1.0forceLastActiveboolean Highlight the last headline (even if not visible)
1.0scrollOnClickboolean Scroll to desired section once clicked
1.0scrollToDurationint Scroll duration
1.0maxPrioritizedItemsint Number of prioritized items (important for CSS)
1.0.3flipPositionboolean Pulls index to left screen border



HTML AttributesEven more customization?

Customize single HTML objects

<h2 id="myObject" data-myattribute="myvalue">MyText</h2>
Ver.OptionTypeDefaultDescription
1.0.4data-fancyindex-hidebooleanfalseHide this HTML item in index
1.0.4data-fancyindex-titlestringCustom title in index (use HTML content if empty)

Comments & Feedback

esKju cwdesigns.de

I hope you enjoy this plugin :)
So if you decide to download and give it a try, I'd like you to leave a comment.

Reyad Rahman codeishkool.com

Great Plugin , Dude!

salman decentwebdesign.com

nice plugin

ahmadyahyajkt No Homepage

Amazing EsKju jQuery lazyLoading Plugin

sdfgsdfg google.es

erwtweter

jim No Homepage

It's not very clear exactly what this plugin does from this page? The impression I get is that it animates in content as you scroll - maybe it could do with a description?

Thanks

Demir No Homepage

Doesn't work for me because the documentation is not enough and clear. The css file has uls and lis but where are they in my html? How can I configure my html. Should I add any class to my divs like you did in your page source? These points are not clear. So, no result, sorry..

Umar No Homepage

Very nice plugin

Elyas No Homepage

Hi

It seems to be good, but plas share the index.html for demo

Codetoils codetoils.com

We can make asynchronous comments with the help of PHP, jQuery and Jason but my favorite is jQuery because it is easier for a designer to learn javascript as it uses familiar CSS syntax. jQuery is Javascript for Designers.

test test

sdfdsfds

Download Driver drivermarkets.blogspot.com/

good work admin nice post

test google.com

test

sebastian muñoz espejo No Homepage

hi ...I really don't understand what fancyindex does...it's a nav with link to each section of body ? Please give us a demo. I'm using scrollflow without problems great job !!

cheers



Add a comment