diff --git a/_layouts/doc.html b/_layouts/doc.html
index 888bd59..79607df 100644
--- a/_layouts/doc.html
+++ b/_layouts/doc.html
@@ -16,7 +16,17 @@
diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown
index 0059da3..86e971c 100644
--- a/_posts/docs/2010-12-01-introduction.mdown
+++ b/_posts/docs/2010-12-01-introduction.mdown
@@ -4,6 +4,14 @@ title: Introduction
category: docs
layout: doc
related: a-intro
+toc:
+ - { title: Features, anchor: features }
+ - { title: Licensing, anchor: licensing }
+ - { title: Getting started, anchor: getting_started }
+ - { title: Code repsository, anchor: code_repository }
+ - { title: A word about moderation, anchor: moderation }
+ - { title: Acknowledgments, anchor: acknowledgments }
+
---
@@ -64,7 +72,7 @@ There are a number of [options](options.html) you can specify. Within the optio
This project lives on GitHub at [github.com/desandro/isotope](http://github.com/desandro/isotope). There you can grab the latest code and download this entire project.
-## A word about moderation
+## A word about moderation {: #moderation}
Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn't mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.
diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown
index f8cfaf8..782dfb3 100644
--- a/_posts/docs/2010-12-03-options.mdown
+++ b/_posts/docs/2010-12-03-options.mdown
@@ -5,6 +5,22 @@ category: docs
layout: doc
body_class: option-def
related: a-intro
+toc:
+ - { title: animationEngine, anchor: animationengine }
+ - { title: animationOptions, anchor: animationoptions }
+ - { title: containerClass, anchor: containerclass }
+ - { title: filter, anchor: filter }
+ - { title: getSortData, anchor: getsortdata }
+ - { title: hiddenClass, anchor: hiddenclass }
+ - { title: hiddenStyle, anchor: hiddenstyle }
+ - { title: itemClass, anchor: itemclass }
+ - { title: itemSelector, anchor: itemselector }
+ - { title: layoutMode, anchor: layoutmode }
+ - { title: resizable, anchor: resizable }
+ - { title: sortAscending, anchor: sortascending }
+ - { title: sortBy, anchor: sortby }
+ - { title: visibleStyle, anchor: visiblestyle }
+ - { title: Layout-specific options, anchor: layoutspecific_options }
---
diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown
index 1c5b7f3..e066f50 100644
--- a/_posts/docs/2010-12-04-methods.mdown
+++ b/_posts/docs/2010-12-04-methods.mdown
@@ -4,6 +4,14 @@ title: Methods
category: docs
layout: doc
related: methods
+toc:
+ - { title: addItems, anchor: additems }
+ - { title: appended, anchor: appended }
+ - { title: destroy, anchor: destroy }
+ - { title: insert, anchor: insert }
+ - { title: layout, anchor: layout }
+ - { title: option, anchor: option }
+ - { title: reLayout, anchor: relayout }
---
diff --git a/_posts/docs/2010-12-05-layout-modes.mdown b/_posts/docs/2010-12-05-layout-modes.mdown
index f34e10d..bf44783 100644
--- a/_posts/docs/2010-12-05-layout-modes.mdown
+++ b/_posts/docs/2010-12-05-layout-modes.mdown
@@ -5,6 +5,14 @@ category: docs
layout: doc
body_class: option-def
related: layout
+toc:
+ - { title: masonry, anchor: masonry }
+ - { title: fitRows, anchor: fitrows }
+ - { title: cellsByRow, anchor: cellsbyrow }
+ - { title: masonryHorizontal, anchor: masonryhorizontal }
+ - { title: fitColumns, anchor: fitcolumns }
+ - { title: cellsByColumn, anchor: cellsbycolumn }
+ - { title: Horizontal layouts, anchor: horizontal_layouts }
---
diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown
index 30ed531..1f117e0 100644
--- a/_posts/docs/2010-12-06-filtering.mdown
+++ b/_posts/docs/2010-12-06-filtering.mdown
@@ -4,6 +4,11 @@ title: Filtering
category: docs
layout: doc
related: filtering
+toc:
+ - { title: Markup, anchor: markup }
+ - { title: jQuery script, anchor: jquery_script }
+ - { title: Creating interactive buttons, anchor: creating_interactive_buttons }
+ - { title: Recommended CSS, anchor: recommended_css }
---
diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown
index f7ca93c..89756e6 100644
--- a/_posts/docs/2010-12-07-sorting.mdown
+++ b/_posts/docs/2010-12-07-sorting.mdown
@@ -4,6 +4,12 @@ title: Sorting
category: docs
layout: doc
related: sorting
+toc:
+ - { title: Markup, anchor: markup }
+ - { title: getSortData option, anchor: getsortdata_option }
+ - { title: sortBy option, anchor: sortby_option }
+ - { title: sortAscending option, anchor: sortascending_option }
+ - { title: Creating interactive buttons, anchor: creating_interactive_buttons }
---
@@ -36,7 +42,7 @@ Any group of similar items have their own data. It could be a text value, like a
{% endhighlight %}
-## getSortData
+## getSortData option
In order to extract this data from the element, we need to pass in a function to get it via the [`getSortData`](options.html#getsortdata) option. This option accepts an object, whose values are the functions to extract the data.
@@ -102,7 +108,7 @@ getSortData : {
{% endhighlight %}
-## sortBy
+## sortBy option
For every method set in `getSortData`, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.
@@ -118,7 +124,7 @@ $('#container').isotope({ sortBy : 'symbol' });
There is an additional sorting data built in to Isotope `'original-order'`. Sorting with `'original-order'` will use the original order of the item elements to arrange them in the layout.
-## sortAscending
+## sortAscending option
By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set `sortAscending` to `false`.
diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown
index 07fc873..78c7ae0 100644
--- a/_posts/docs/2010-12-09-animating.mdown
+++ b/_posts/docs/2010-12-09-animating.mdown
@@ -4,13 +4,17 @@ title: Animating
category: docs
layout: doc
related: animating
+toc:
+ - { title: animationEngine option, anchor: animationengine_option }
+ - { title: CSS transitions, anchor: css_transitions }
+ - { title: Variations, anchor: variations }
---
Isotope was developed to take advantage of the best browser features available. For animations, you can use CSS3 transitions and transforms in capable browsers. Isotope provides Javascript animation fall back for lesser browsers.
-## animationEngine
+## animationEngine option
You can control how Isotope handles animation with the [`animationEngine`](options.html#animationengine) option. This option has three values which control whether jQuery applies styles with`.css()` or `.animate()`.
diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown
index bacfbe4..1c2e8a0 100644
--- a/_posts/docs/2010-12-10-adding-items.mdown
+++ b/_posts/docs/2010-12-10-adding-items.mdown
@@ -4,6 +4,10 @@ title: Adding items
category: docs
layout: doc
related: methods
+toc:
+ - { title: addItems method, anchor: additems_method }
+ - { title: insert method, anchor: insert_method }
+ - { title: appended method, anchor: appended_method }
---
@@ -11,7 +15,7 @@ If your application dynamically adds new content, Isotope provides several metho
[**See Demo: Adding items**](../demos/adding-items.html).
-## addItems
+## addItems method
The [`addItems` method](methods.html#additems) adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element.
@@ -22,7 +26,7 @@ $('#container').append( $newItems ).isotope({ 'addItems', $newItems });
{% endhighlight %}
-## insert
+## insert method
More likely, you want to use the [`insert` method](methods.html#insert), which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out.
@@ -33,7 +37,7 @@ $('#container').isotope({ 'insert', $newItems });
{% endhighlight %}
-## appended
+## appended method
The [`appended` method](methods.html#appended) is a convenience method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and not have it processed with filtering or sorting. `appended` is the best method to use with Infinite Scroll.
diff --git a/_posts/docs/2010-12-11-troubleshooting.mdown b/_posts/docs/2010-12-11-troubleshooting.mdown
index 8407ff4..1c6169a 100644
--- a/_posts/docs/2010-12-11-troubleshooting.mdown
+++ b/_posts/docs/2010-12-11-troubleshooting.mdown
@@ -4,6 +4,10 @@ title: Troubleshooting
category: docs
layout: doc
related: z-etc
+toc:
+ - { title: Unloaded media, anchor: unloaded_media }
+ - { title: Images, anchor: images }
+ - { title: @font-face fonts, anchor: fontface_fonts }
---
diff --git a/_posts/docs/2010-12-20-license.mdown b/_posts/docs/2010-12-20-license.mdown
index 1f4585e..8ba5fc9 100644
--- a/_posts/docs/2010-12-20-license.mdown
+++ b/_posts/docs/2010-12-20-license.mdown
@@ -4,6 +4,8 @@ title: License
category: docs
layout: doc
related: z-etc
+toc:
+ - { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement }
---
diff --git a/css/style.css b/css/style.css
index 5b8e34a..294f566 100644
--- a/css/style.css
+++ b/css/style.css
@@ -384,9 +384,13 @@ body.doc {
}
.doc nav {
- width: 200px;
+ width: 210px;
position: fixed;
left: 10px;
+ top: 0px;
+ padding-top: 20px;
+ height: 100%;
+ overflow: auto;
}
.doc nav h1 {
@@ -431,9 +435,22 @@ body.doc {
background: black;
color: #1BF;
}
+#docs-nav ul .current a:hover { color: white; }
+
+#docs-nav ul .current .toc a {
+ font-size: 12px;
+ padding-left: 1.2em;
+ font-weight: normal;
+}
/**** Doc content ****/
+.doc h2:target {
+ padding: 10px;
+ background: white;
+ color: #222;
+}
+
.doc h3 {
color: #FEC;
background: hsla( 0, 0%, 75%, 0.05 );