Demo: Basic

Adding index numbers

You can add or remove index numbers on table or in titles of contents. 


$('#navigator1').contentNavigator({
    wrapper : '#demo1',
    indexOnContent : true
});

First title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Third subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Index type

use numbers and letters to specify an index type notation. Start with a dot if you want to leave empty first level. 


$('#navigator2').contentNavigator({
    wrapper : '#demo2',
    indexOnContent : true,
    indexType : '.A.1.a',
    nestedIndex : false
});

First title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

First level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Second level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.

Third subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor tortor ac urna sodales, non egestas neque mattis. Vestibulum ut aliquam sem. Donec ante magna, laoreet vitae rhoncus ac, pulvinar quis massa. Nulla auctor vel ipsum in fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu interdum augue, nec fermentum mauris. Nulla eget pretium dui. Sed vulputate pretium aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut interdum justo.