Description

Notable Features

Supports HTML5 History pushstate API (via History.js) for forward and back button support

Supports styling with jQueryUI Themeroller

Supports show/hide animations with jQuery effects

Supports smooth scrolling animations

Supports dynamic scroll highlighting

Supports dynamic scroll show/hide effects

Supports page extender option to make sure a page is big enough to scroll to all table of content items

Requirements

jQuery 1.7.2+

The latest version of jQuery is always recommended

jQueryUI Widget Factory 1.8.20+

The latest version of the jQueryUI Widget Factory is always recommended

Optional Dependencies

History.js

History.js is required if you want forward and back button support.

Note: If you do not include History.js, then Tocify will not have history support, but it will still be functional.

Getting Started

Downloads

Download the latest versions of...

Options

context

The container element that holds all of the elements used to generate the table of contents.

Accepts String: Any jQuery selector

Default

context: "body"

selectors

The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure

Accepts a String Array: Each string must be a valid jQuery selector

Default

selectors: ["h1"]

showEffect

Used to display any of the table of contents nested items

Accepts String: "none", "fadeIn", "show", "slideDown", or any of the jQueryUI show effects (i.e. "bounce")

Default

showEffect: "slideDown"

showEffectSpeed

The time duration of the show animation

Accepts Number (milliseconds) or String: "slow", "medium", or "fast"

Default

showEffectSpeed: "medium"

hideEffect

Used to hide any of the table of contents nested items

Accepts String: "none", "fadeOut", "hide", "slideUp", or any of the jQueryUI hide effects (i.e. "explode")

Default

hideEffect: "slideUp"

hideEffectSpeed

The time duration of the hide animation

Accepts Number (milliseconds) or String: "slow", "medium", or "fast"

Default

hideEffectSpeed: "medium"

smoothScroll

Animates the page scroll when specific table of content items are clicked and the page moves up or down

Accepts a boolean: true or false

Default

smoothScroll: true

smoothScrollSpeed

The time duration of the smoothScroll animation

Accepts Number (milliseconds) or String: "slow", "medium", or "fast"

Default

smoothScrollSpeed: "medium"

showAndHideOnScroll

Determines if table of content nested items should be shown and hidden while a user scrolls the page

Accepts a boolean: true or false

Default

showAndHideOnScroll: true

highlightOnScroll

Determines if table of content nested items should be highlighted (set to a different background color to show it is the currently active item) while scrolling

Accepts a boolean: true or false

Default

highlightOnScroll: true

highlightOffset

The offset distance in pixels to trigger the next active table of contents item

Accepts a number

Default

highlightOffset: 40

jqueryUI

Determines if jqueryUI or regular CSS classes will be added to the table of contents

Accepts a boolean: true or false

Default

jqueryUI: true

extendPage

If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased

Accepts a boolean: true or false

Default

extendPage: true