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 );