You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A jQuery plugin that dynamically generates a table of contents. Tocify can be optionally styled with **jQueryUI Themeroller**, and optionally animated with jQuery show/hide effects. Tocify also optionally provides support for **smooth scrolling**, **scroll highlighting**, **scroll page extending**, and the **HTML5 pushstate API** via [History.js](https://github.com/balupton/History.js/).
- Supports dynamic scroll and click **jQuery show/hide effects**
13
+
14
+
- Supports **HTML5 History pushstate API** (via History.js) for forward and back button support
15
+
16
+
- Supports **smooth scrolling** animations
17
+
18
+
- Supports dynamic **scroll highlighting**
19
+
20
+
- Supports a **page extender** option to make sure a page is big enough to scroll to all table of content items
21
+
22
+
- Passes **jsHint** with no errors
23
+
24
+
##Requirements
25
+
jQuery 1.7.2+
26
+
27
+
jQueryUI Widget Factory 1.8.20+
28
+
29
+
##Browser Support
30
+
IE7+, Firefox 4+, Chrome, Safari 4+, and Opera 11+
31
+
32
+
##Unit Tests
33
+
All unit tests are written using the Jasmine Framework (Work in Progress)
34
+
35
+
##Contributing
36
+
Take care to maintain the existing coding style. Add Jasmine unit tests for any new or changed functionality. Lint and test your code using [grunt](https://github.com/cowboy/grunt).
37
+
38
+
If you plan to contribute to `Tocify` in the future, keep in mind that you should make sure your code passes the Grunt checks. If you are on Windows (like me) remember you need to run the grunt command using `grunt.cmd`. Also, if you have trouble getting the Jasmine Unit Tests to work with PhantomJS 1.5 (the current release), install PhantomJS 1.3.
39
+
40
+
After you have verified your code, send a pull request to the `Tocify` dev branch. After you send a pull request, you will hear back from me shortly after I review your code.
41
+
42
+
You'll find source code in the "src" subdirectory!
43
+
44
+
##Forking
45
+
If you find that you need a feature that Tocify does not currently support, either let me know via the Tocify issue tracker, or fork Tocify on Github and easily extend it to create your own widget!
46
+
47
+
##Change Log
48
+
49
+
50
+
`0.1.0` - July 11, 2012
51
+
52
+
- Initial Tocify release. Added annotated source code and documentation
<ahref="https://github.com/gfranko/jquery.tocify.js" target="_blank"><imgstyle="position: fixed;top: 0; right: 0; border: 0;z-index:999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" alt="Fork me on GitHub"></a>
2. <ahref="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory</a> (You only need the Widget component underneath the UI Core dependency)
77
+
<br/>
78
+
3. <ahref="https://github.com/balupton/History.js/" target="_blank">History.js</a> (If you want forward and back button support)
79
+
<br/><br/>
80
+
<h3class="headerDoc">HTML</h3>
81
+
82
+
<br/><br/>
83
+
<h1>Options</h1>
84
+
<br/>
85
+
<h3class="headerDoc">context</h3>
86
+
<p>The container element that holds all of the elements used to generate the table of contents.</p>
87
+
<br/>
88
+
<p>Accepts String: Any jQuery selector</p>
89
+
<br/>
90
+
<h6>Default</h6>
91
+
<p>context: "body"</p>
92
+
<br/><br/>
93
+
<h3class="headerDoc">selectors</h3>
94
+
<p>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</p>
95
+
<br/>
96
+
<p>Accepts a String: Each comma separated selector must be a valid jQuery selector</p>
97
+
<br/>
98
+
<h6>Default</h6>
99
+
<p>selectors: "h1, h2, h3"</p>
100
+
<br/><br/>
101
+
<h3class="headerDoc">showEffect</h3>
102
+
<p>Used to display any of the table of contents nested items</p>
103
+
<br/>
104
+
<p>Accepts String: "none", "fadeIn", "show", "slideDown", or any of the jQueryUI show effects (i.e. "bounce")</p>
105
+
<br/>
106
+
<h6>Default</h6>
107
+
<p>showEffect: "slideDown"</p>
108
+
<br/><br/>
109
+
<h3class="headerDoc">showEffectSpeed</h3>
110
+
<p>The time duration of the show animation</p>
111
+
<br/>
112
+
<p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
113
+
<br/>
114
+
<h6>Default</h6>
115
+
<p>showEffectSpeed: "medium"</p>
116
+
<br/><br/>
117
+
<h3class="headerDoc">hideEffect</h3>
118
+
<p>Used to hide any of the table of contents nested items</p>
119
+
<br/>
120
+
<p>Accepts String: "none", "fadeOut", "hide", "slideUp", or any of the jQueryUI hide effects (i.e. "explode")</p>
121
+
<br/>
122
+
<h6>Default</h6>
123
+
<p>hideEffect: "slideUp"</p>
124
+
<br/><br/>
125
+
<h3class="headerDoc">hideEffectSpeed</h3>
126
+
<p>The time duration of the hide animation</p>
127
+
<br/>
128
+
<p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
129
+
<br/>
130
+
<h6>Default</h6>
131
+
<p>hideEffectSpeed: "medium"</p>
132
+
<br/><br/>
133
+
<h3class="headerDoc">smoothScroll</h3>
134
+
<p>Animates the page scroll when specific table of content items are clicked and the page moves up or down</p>
135
+
<br/>
136
+
<p>Accepts a boolean: true or false</p>
137
+
<br/>
138
+
<h6>Default</h6>
139
+
<p>smoothScroll: true</p>
140
+
<br/><br/>
141
+
<h3class="headerDoc">smoothScrollSpeed</h3>
142
+
<p>The time duration of the smoothScroll animation</p>
143
+
<br/>
144
+
<p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
145
+
<br/>
146
+
<h6>Default</h6>
147
+
<p>smoothScrollSpeed: "medium"</p>
148
+
<br/><br/>
149
+
<h3class="headerDoc">showAndHideOnScroll</h3>
150
+
<br/>
151
+
<p>Determines if table of content nested items should be shown and hidden while a user scrolls the page</p>
152
+
<br/>
153
+
<p>Accepts a boolean: true or false</p>
154
+
<br/>
155
+
<h6>Default</h6>
156
+
<br/>
157
+
<p>showAndHideOnScroll: true</p>
158
+
<br/><br/>
159
+
<h3class="headerDoc">highlightOnScroll</h3>
160
+
<br/>
161
+
<p>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</p>
162
+
<br/>
163
+
<p>Accepts a boolean: true or false</p>
164
+
<br/>
165
+
<h6>Default</h6>
166
+
<br/>
167
+
<p>highlightOnScroll: true</p>
168
+
<br/><br/>
169
+
170
+
<h3class="headerDoc">highlightOffset</h3>
171
+
<br/>
172
+
<p>The offset distance in pixels to trigger the next active table of contents item</p>
173
+
<br/>
174
+
<p>Accepts a number</p>
175
+
<br/>
176
+
<h6>Default</h6>
177
+
<br/>
178
+
<p>highlightOffset: 40</p>
179
+
<br/><br/>
180
+
181
+
<h3class="headerDoc">jqueryUI</h3>
182
+
<br/>
183
+
<p>Determines if jqueryUI or regular CSS classes will be added to the table of contents</p>
184
+
<br/>
185
+
<p>Accepts a boolean: true or false</p>
186
+
<br/>
187
+
<h6>Default</h6>
188
+
<br/>
189
+
<p>jqueryUI: true</p>
190
+
<br/><br/>
191
+
192
+
<h3class="headerDoc">extendPage</h3>
193
+
<br/>
194
+
<p>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</p>
0 commit comments