playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

remove old files from v1

pull/726/head
David DeSandro 11 years ago
parent
a356615169
commit
829eaeadc6
15 changed files with 0 additions and 3336 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      _posts/docs/2010-12-01-introduction.md
  2. 354
      _posts/docs/2010-12-03-options.md
  3. 159
      _posts/docs/2010-12-04-methods.md
  4. 191
      _posts/docs/2010-12-05-layout-modes.md
  5. 109
      _posts/docs/2010-12-06-filtering.md
  6. 169
      _posts/docs/2010-12-07-sorting.md
  7. 100
      _posts/docs/2010-12-09-animating.md
  8. 79
      _posts/docs/2010-12-10-adding-items.md
  9. 174
      _posts/docs/2011-05-25-extending-isotope.md
  10. 86
      _posts/docs/2011-06-16-hash-history-jquery-bbq.md
  11. 234
      _posts/docs/2011-12-11-help.md
  12. 79
      _posts/docs/2011-12-20-license.md
  13. 1408
      jquery.isotope.js
  14. 13
      jquery.isotope.min.js
  15. 9
      minify.sh

172
_posts/docs/2010-12-01-introduction.md
Unescape View File

@ -1,172 +0,0 @@
---
title: Introduction
category: docs
layout: default
toc:
- { title: Features, anchor: features }
- { title: Licensing, anchor: licensing }
- { title: Getting started, anchor: getting_started }
- { title: Code repository, anchor: code_repository }
- { title: A word about moderation, anchor: moderation }
- { title: Acknowledgments, anchor: acknowledgments }
---
<p class="tagline">Isotope: An exquisite jQuery plugin for magical layouts</p>
## Features
+ [**Layout modes**](layout-modes.html): Intelligent, dynamic layouts that can't be achieved with CSS alone.
+ [**Filtering**](filtering.html): Hide and reveal item elements easily with jQuery selectors.
+ [**Sorting**](sorting.html): Re-order item elements with sorting. Sorting data can be extracted from just about anything.
+ **Interoperability**: features can be utilized together for a cohesive experience.
+ **Progressive enhancement**: Isotope's [animation engine](animating.html) takes advantage of the best browser features when available &mdash; CSS transitions and transforms, GPU acceleration &mdash; but will also fall back to JavaScript animation for lesser browsers.
## Commercial Licensing
Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. [Read more about Isotope commercial licensing.](license.html)
<p>{% include developer-buy-button.html %} {% include org-buy-button.html %}</p>
Purchasing accepts most credit cards and takes seconds. Once purchased, you'll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications.
For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free.
### Purchase via PayPal
If you're having trouble using a credit card, try purchasing a license via PayPal:
+ [Buy Developer License via PayPal](http://pul.ly/b/13620)
+ [Buy Organization License via PayPal](http://pul.ly/b/36595)
## Getting started
Isotope requires jQuery 1.4.3 and greater.
### Markup
Isotope works on a container element with a group of similar child items.
{% highlight html %}
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
{% endhighlight %}
### Script
{% highlight javascript %}
$('#container').isotope({
// options
itemSelector : '.item',
layoutMode : 'fitRows'
});
{% endhighlight %}
[**See Demo: Basic**](../demos/basic.html)
There are a number of [options](options.html) you can specify. Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html), and [sort items](sorting.html).
Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.
{% highlight javascript %}
$('#container').isotope({ filter: '.my-selector' }, function( $items ) {
var id = this.attr('id'),
len = $items.length;
console.log( 'Isotope has filtered for ' + len + ' items in #' + id );
});
{% endhighlight %}
Within this callback <code><span class="k">this</span></code> refers to the container, and `$items` refers to the item elements. Both of these are jQuery objects and do _not_ need to be put in jQuery wrappers.
### CSS
Add these styles to your CSS for [filtering](filtering.html), [animation](animating.html) with CSS transitions, and [adding items](adding-items.html).
{% highlight css %}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
{% endhighlight %}
## Code repository
This project lives on GitHub at [github.com/desandro/isotope](http://github.com/desandro/isotope). There you can grab the latest code and follow development.
## 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.
## Acknowledgments
+ [**"Cowboy" Ben Alman**](http://benalman.com/) for [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) (included with docs)
+ [**Louis-Rémi Babé**](http://twitter.com/Louis_Remi) for [jQuery smartresize](https://github.com/louisremi/jquery-smartresize) (used within Isotope) and for [jQuery transform](https://github.com/louisremi/jquery.transform.js) which clued me in to using jQuery 1.4.3's CSS hooks
+ [**Jacek Galanciak**](http://razorjack.net/) for [jQuery Quicksand](http://razorjack.net/quicksand/), an early kernel of inspiration
+ [**Ralph Holzmann**](http://twitter.com/#!/ralphholzmann) for re-writing the [jQuery Plugins/Authoring tutorial](http://docs.jquery.com/Plugins/Authoring) and opened my eyes to [Plugin Methods](http://docs.jquery.com/Plugins/Authoring#Plugin_Methods) pattern
+ [**Eric Hynds**](http://www.erichynds.com/) for his article [Using $.widget.bridge Outside of the Widget Factory](http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/) which provided the architecture for Isotope
+ [**Paul Irish**](http://paul-irish.com) for [Infinite Scroll](http://infinite-scroll.com) (included with docs), the [imagesLoaded plugin](http://gist.github.com/268257) (included with Isotope), and [Debounced resize() plugin](http://paulirish.com/demo/resize) (provided base for smartresize)
+ The [**jQuery UI Team**](http://jqueryui.com/about) for [$.widget.bridge](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L113-155) (partially used within Isotope)
+ The Modernizr team for [Modernizr](http://www.modernizr.com/) (partially used within Isotope)
+ [**Juriy Zaytsev aka "kangax"**](http://perfectionkills.com) for [getStyleProperty](http://perfectionkills.com/feature-testing-css-properties/) (used within Isotope)
<script src="https://www.simplegoods.co/assets/embed.js"> </script>

354
_posts/docs/2010-12-03-options.md
Unescape View File

@ -1,354 +0,0 @@
---
title: Options
category: docs
layout: default
body_class: option-def
toc:
- { title: animationEngine, anchor: animationengine }
- { title: animationOptions, anchor: animationoptions }
- { title: containerClass, anchor: containerclass }
- { title: containerStyle, anchor: containerstyle }
- { title: filter, anchor: filter }
- { title: getSortData, anchor: getsortdata }
- { title: hiddenClass, anchor: hiddenclass }
- { title: hiddenStyle, anchor: hiddenstyle }
- { title: itemClass, anchor: itemclass }
- { title: itemPositionDataEnabled, anchor: itempositiondataenabled }
- { title: itemSelector, anchor: itemselector }
- { title: layoutMode, anchor: layoutmode }
- { title: onLayout, anchor: onlayout }
- { title: resizable, anchor: resizable }
- { title: resizesContainer, anchor: resizescontainer }
- { title: sortAscending, anchor: sortascending }
- { title: sortBy, anchor: sortby }
- { title: transformsEnabled, anchor: transformsenabled }
- { title: visibleStyle, anchor: visiblestyle }
- { title: Layout-specific options, anchor: layoutspecific_options }
---
<dl class="header clearfix">
<dt><code>option</code></dt>
<dd class="option-type">Type</dd>
<dd class="default">Default</dd>
</dl>
## animationEngine
<dl class="clearfix">
<dt><code>animationEngine</code></dt>
<dd class="option-type">String</dd>
<dd class="default"><code><span class="s1">'best-available'</span></code></dd>
</dl>
Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.
### Values {#animationEngine-values}
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
+ `'css'`: Isotope uses `.css()`
+ `'jquery'`: Isotope uses `.animate()`
## animationOptions
<dl class="clearfix">
<dt><code>animationOptions</code></dt>
<dd class="option-type">Object</dd>
<dd class="default"><code>{ queue: <span class="kc">false</span>, duration: <span class="mi">800</span> }</code></dd>
</dl>
When jQuery is the animation engine (see above), these options will be used in <code>.animate()</code>. See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details.
### Example
{% highlight javascript %}
$('#container').isotope({
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
{% endhighlight %}
## containerClass
<dl class="clearfix">
<dt><code>containerClass</code></dt>
<dd class="option-type">String</dd>
<dd class="default"><code><span class="s1">'isotope'</span></code></dd>
</dl>
The class applied to the container element.
## containerStyle
<dl class="clearfix">
<dt><code>containerStyle</code></dt>
<dd class="option-type">Object</dd>
<dd class="default"><code>{ position: <span class="s1">'relative'</span>, overflow: <span class="s1">'hidden'</span> }</code></dd>
</dl>
CSS styles applied to the container element. Relative positioning enables absolute positioning on child items. Hidden overflow ensures that filtered items that lie outside the container do not interfer with subsequent content.
## filter
<dl class="clearfix">
<dt><code>filter</code></dt>
<dd class="option-type">Selector</dd>
</dl>
Setting a filter with show item elements that match the selector, and hide elements that do not match. See [docs on filering](filtering.html) for more details.
[**See Demo: Filtering**](../demos/filtering.html)
### Values {#filter-values}
<ul>
<li><code><span class="s1">'*'</span></code> or <code><span class="s1">''</span></code> (an empty string): Shows all item elements</li>
</ul>
## getSortData
<dl class="clearfix">
<dt><code>getSortData</code></dt>
<dd class="option-type">Object</dd>
</dl>
An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value. See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
### Example
{% highlight javascript %}
$('#container').isotope({
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
{% endhighlight %}
## hiddenClass
<dl class="clearfix">
<dt><code>hiddenClass</code></dt>
<dd class="option-type">String</dd>
<dd class="default"><code><span class="s1">'isotope-hidden'</span></code></dd>
</dl>
The class applied to item elements hidden by Filtering.
## hiddenStyle
<dl class="clearfix">
<dt><code>hiddenStyle</code></dt>
<dd class="option-type">Object</dd>
<dd class="default"><code>{ opacity : <span class="mi">0</span>, scale : <span class="mi">0.001</span> }</code></dd>
</dl>
The style applied to item elements hidden by Filtering.
## itemClass
<dl class="clearfix">
<dt><code>itemClass</code></dt>
<dd class="option-type">String</dd>
<dd class="default"><code><span class="s1">'isotope-item'</span></code></dd>
</dl>
The class applied to item elements.
## itemPositionDataEnabled
<dl class="clearfix">
<dt><code>itemPositionDataEnabled</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">false</span></code></dd>
</dl>
When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery's data method with <code><span class="s1">'isotope-item-position'</span></code> name space. Position is return as an object with `x` and `y`;
### Example
{% highlight javascript %}
$('#container').isotope({
itemSelector: '.element',
itemPositionDataEnabled: true
})
// log position of each item
.find('.element').each(function(){
var position = $(this).data('isotope-item-position');
console.log('item position is x: ' + position.x + ', y: ' + position.y );
});
{% endhighlight %}
## itemSelector
<dl class="clearfix">
<dt><code>itemSelector</code></dt>
<dd class="option-type">Selector</dd>
</dl>
Restricts Isotope item elements to selector.
## layoutMode
<dl class="clearfix">
<dt><code>layoutMode</code></dt>
<dd class="option-type">String</dd>
<dd class="default"><code><span class="s1">'masonry'</span></code></dd>
</dl>
See also docs on [Layout modes](layout-modes.html).
[**See Demo: Layout modes**](../demos/layout-modes.html)
## onLayout
<dl class="clearfix">
<dt><code>onLayout</code></dt>
<dd class="option-type">Function</dd>
</dl>
Similiar to a callback, `onLayout` is a function that will be triggered after every time an Isotope instance runs through its layout logic.
{% highlight javascript %}
$('#container').isotope({
onLayout: function( $elems, instance ) {
// `this` refers to jQuery object of the container element
console.log( this.height() );
// callback provides jQuery object of laid-out item elements
$elems.css({ background: 'blue' });
// instance is the Isotope instance
console.log( instance.$filteredAtoms.length );
}
});
{% endhighlight %}
## resizable
<dl class="clearfix">
<dt><code>resizable</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Triggers layout logic when browser window is resized.
## resizesContainer
<dl class="clearfix">
<dt><code>resizesContainer</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to <code><span class="kc">false</span></code>, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered.
## sortAscending
<dl class="clearfix">
<dt><code>sortAscending</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...". See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
## sortBy
<dl class="clearfix">
<dt><code>sortBy</code></dt>
<dd class="option-type">String</dd>
</dl>
The property name of the method within the `getSortData` option to sort item elements. See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
### Values {#sortBy-values}
+ `'original-order'` Sorts item elements by their original order.
## transformsEnabled
<dl class="clearfix">
<dt><code>transformsEnabled</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting `transformsEnabled` to <code><span class="kc">false</span></code> will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with CSS transforms](help.html#css-transforms).
### Additional CSS {#transformsEnabled-css}
If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS:
{% highlight css %}
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
-ms-transition-property: top, left, opacity;
-o-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}
{% endhighlight %}
## visibleStyle
<dl class="clearfix">
<dt><code>visibleStyle</code></dt>
<dd class="option-type">Object</dd>
<dd class="default"><code>{ opacity : <span class="mi">1</span>, scale : <span class="mi">1</span> }</code></dd>
</dl>
The style applied to item elements made visible by Filtering.
## Layout-specific options
In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode.
See docs on [layout modes](layout-modes.html) for each layout mode's available options.
For example, if your layout switched from `masonry` to `cellsByRow`:
{% highlight javascript %}
$('#container').isotope({
masonry: {
columnWidth: 120
},
cellsByRow: {
columnWidth: 220,
rowHeight: 220
}
});
{% endhighlight %}
[**See Demo: Layout modes**](../demos/layout-modes.html)

159
_posts/docs/2010-12-04-methods.md
Unescape View File

@ -1,159 +0,0 @@
---
title: Methods
category: docs
layout: default
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 }
- { title: reloadItems, anchor: reloaditems }
- { title: remove, anchor: remove }
- { title: shuffle, anchor: shuffle }
- { title: updateSortData, anchor: updatesortdata }
---
Isotope offers several methods to extend functionality. Isotope's methods follow the jQuery UI pattern.
{% highlight javascript %}
$('#container').isotope( 'methodName', [optionalParameters] )
{% endhighlight %}
## addItems
{% highlight javascript %}
.isotope( 'addItems', $items, callback )
{% endhighlight %}
Adds item elements to the pool of item elements of the container, but does not sort, filter or layout. See [Adding items](adding-items.html) for more details. The argument within the callback is the group of elements that were added.
[**See Demo: Adding items**](../demos/adding-items.html)
## appended
{% highlight javascript %}
.isotope( 'appended', $items, callback )
{% endhighlight %}
Adds item elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. See [Adding items](adding-items.html) for more details.
[**See Demo: Adding items**](../demos/adding-items.html)
## destroy
{% highlight javascript %}
.isotope( 'destroy' )
{% endhighlight %}
Removes Isotope functionality completely. Returns element back to pre-init state.
## insert
{% highlight javascript %}
.isotope( 'insert', $items, callback )
{% endhighlight %}
Appends items elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. See [Adding items](adding-items.html) for more details.
[**See Demo: Adding items**](../demos/adding-items.html).
## layout
{% highlight javascript %}
.isotope( 'layout', $items, callback )
{% endhighlight %}
Positions specified item elements in layout.
`layout` will only position specified elements, and those elements will be positioned at the end of layout. Whereas `reLayout` will position all elements in the Isotope widget.
## option
{% highlight javascript %}
.isotope( 'option', options )
{% endhighlight %}
Sets options for plugin instance. Unlike passing options through `.isotope()`, using the `option` method will not trigger layout.
{% highlight javascript %}
// sets multiple options
.isotope( 'option', { layoutMode: 'fitRows', filter: '.my-filter' } )
{% endhighlight %}
## reLayout
{% highlight javascript %}
.isotope( 'reLayout', callback )
{% endhighlight %}
Resets layout properties and lays-out every item element.
[**See Demo: reLayout**](../demos/relayout.html)
## reloadItems
{% highlight javascript %}
.isotope( 'reloadItems' )
{% endhighlight %}
Re-collects all item elements in their current order in the DOM. Useful for prepending.
[**See Demo: Adding items**](../demos/adding-items.html).
## remove
{% highlight javascript %}
.isotope( 'remove', $items, callback )
{% endhighlight %}
Removes specified item elements from Isotope widget and the DOM.
[**See Demo: Removing**](../demos/removing.html).
## shuffle
{% highlight javascript %}
.isotope( 'shuffle', callback )
{% endhighlight %}
Shuffles order of items. Sets [`sortBy` option](options.html#sortby) to [`'random'`](sorting.html#sortby_option).
## updateSortData
{% highlight javascript %}
.isotope( 'updateSortData', $items )
{% endhighlight %}
Updates the sorting data on specified item elements. This method is useful if the data within an item is changed dynamically after Isotope has been initialized.

191
_posts/docs/2010-12-05-layout-modes.md
Unescape View File

@ -1,191 +0,0 @@
---
title: Layout modes
category: docs
layout: default
body_class: option-def
toc:
- { title: Horizontal layouts, anchor: horizontal_layouts }
- { title: cellsByColumn, anchor: cellsbycolumn }
- { title: cellsByRow, anchor: cellsbyrow }
- { title: fitColumns, anchor: fitcolumns }
- { title: fitRows, anchor: fitrows }
- { title: masonry, anchor: masonry }
- { title: masonryHorizontal, anchor: masonryhorizontal }
- { title: straightAcross, anchor: straightacross }
- { title: straightDown, anchor: straightdown }
- { title: Modified layout modes, anchor: modified_layout_modes }
---
Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the `layoutMode` option.
[**See Demo: Layout modes**](../demos/layout-modes.html)
### Example
{% highlight javascript %}
$('#container').isotope({ layoutMode : 'fitRows' });
{% endhighlight %}
Several layout modes are built into Isotope.
### Horizontal layouts
Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set.
{% highlight css %}
#container {
/* either of these will work for horizontal Isotope layouts */
height: 80%;
height: 480px;
}
{% endhighlight %}
## cellsByColumn
A **horizontal** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow.
### Options {#cellsByColumn-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
### Example {#cellsByColumn-example}
{% highlight javascript %}
$('#container').isotope({
layoutMode: 'cellsByColumn',
cellsByColumn: {
columnWidth: 240,
rowHeight: 360
}
});
{% endhighlight %}
## cellsByRow
A **vertical** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`.
### Options {#cellsByRow-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
### Example {#cellsByRow-example}
{% highlight javascript %}
$('#container').isotope({
layoutMode: 'cellsByRow',
cellsByRow: {
columnWidth: 240,
rowHeight: 360
}
});
{% endhighlight %}
## fitColumns
Item elements are arranged into columns. Columns progress **horizontally** from left to right. Items within those columns are arranged top-to-bottom. The horizontal equivalent of fitRows.
## fitRows
Item elements are arranged into rows. Rows progress **vertically** top to bottom. Similar to what you would expect from a layout that uses `float: left`.
## masonry
Masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a **vertical** grid. For each item element, the script calculates the next best fit for the item within the grid.
### Options {#masonry-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
The width of one column in the grid. If no value is set for `columnWidth`, default is the width of the first item element.
### Example {#masonry-example}
{% highlight javascript %}
$('#container').isotope({
masonry: {
columnWidth: 240
}
});
{% endhighlight %}
## masonryHorizontal
The **horizontal** equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.
### Options {#masonryHorizontal-options}
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
The width of one column in the grid. If no value is set for `rowHeight`, default is the height of the first item element.
### Example {#masonryHorizontal-example}
{% highlight javascript %}
$('#container').isotope({
masonryHorizontal: {
rowHeight: 360
}
});
{% endhighlight %}
## straightAcross
Item elements are arranged **horizontally** left to right. Useful for simple lists.
## straightDown
Item elements are arranged **vertically** top to bottom. Useful for simple lists.
## Modified layout modes
[Isotope's methods can be extended and overwritten](extending-isotope.html) to shim-in additional functionality. See these modified layout modes:
+ [**Centered masonry**](../custom-layout-modes/centered-masonry.html)
+ [**Masonry corner stamp**](../custom-layout-modes/masonry-corner-stamp.html)
+ [**Masonry gutters**](../custom-layout-modes/masonry-gutters.html)
To use these mods, copy the revised methods found in the demos' page source. They look like:
{% highlight javascript %}
$.Isotope.prototype._masonryReset = function() {
// modified code..
};
{% endhighlight %}

109
_posts/docs/2010-12-06-filtering.md
Unescape View File

@ -1,109 +0,0 @@
---
title: Filtering
category: docs
layout: default
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 }
---
Isotope can hide and show item elements via the [`filter` option](options.html#filter). `filter` accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
[**See Demo: Filtering**](../demos/filtering.html)
## Markup
Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc.
{% highlight html %}
<div id="container">
<div class="element transition metal">...</div>
<div class="element post-transition metal">...</div>
<div class="element alkali metal">...</div>
<div class="element transition metal">...</div>
<div class="element lanthanoid metal inner-transition">...</div>
<div class="element halogen nonmetal">...</div>
<div class="element alkaline-earth metal">...</div>
...
</div>
{% endhighlight %}
## jQuery script
To show only `.metal` items, the jQuery script would be:
{% highlight javascript %}
$('#container').isotope({ filter: '.metal' });
{% endhighlight %}
The `filter` option uses a [jQuery selector](http://api.jquery.com/category/selectors/) to show item elements that match a selector, and hide all others that do not. For example:
+ `.alkali, .alkaline-earth` will show `.alkali` AND ` .alkaline-earth` item elements.
+ `.metal.transition` will show item elements that have BOTH `.metal` and `.transition` classes.
+ `.metal:not(.transition)` will show `.metal` item elements that are NOT `.transition`.
## Creating interactive buttons
Let's use a basic list for our buttons
{% highlight html %}
<ul id="filters">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">metal</a></li>
<li><a href="#" data-filter=".transition">transition</a></li>
<li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#" data-filter=":not(.transition)">not transition</a></li>
<li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
{% endhighlight %}
Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter selector.
{% highlight javascript %}
// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
// options...
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
{% endhighlight %}
## Recommended CSS
If you choose to use the filtering functionality, add the following CSS to your stylesheet:
{% highlight css %}
/**** Isotope filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
{% endhighlight %}
These styles ensure that hidden items will not interfere with interactions.

169
_posts/docs/2010-12-07-sorting.md
Unescape View File

@ -1,169 +0,0 @@
---
title: Sorting
category: docs
layout: default
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 }
---
Collect data from item element and rearrange their order in the layout with sorting.
[**See Demo: Sorting**](../demos/sorting.html)
## Markup
Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category.
{% highlight html %}
<div id="container">
<div class="element transition metal" data-category="transition">
<p class="number">79</p>
<h3 class="symbol">Au</h3>
<h2 class="name">Gold</h2>
<p class="weight">196.966569</p>
</div>
<div class="element metalloid" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
</div>
{% endhighlight %}
## 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.
Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.
In the example above, to get element name, we would need to get the text from the `.name` element. The same works for symbol.
{% highlight javascript %}
$('#container').isotope({
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
},
symbol : function ( $elem ) {
return $elem.find('.symbol').text();
}
}
});
{% endhighlight %}
For numerical data, we can convert a text value into a number with `parseInt()` or `parseFloat()`.
{% highlight javascript %}
getSortData : {
// ...
number : function ( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
weight : function ( $elem ) {
return parseFloat( $elem.find('.weight').text() );
}
}
{% endhighlight %}
The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the `data-category` attribute, we can use the `.attr()`.
{% highlight javascript %}
getSortData : {
// ...
category : function ( $elem ) {
return $elem.attr('data-category');
}
}
{% endhighlight %}
Get creative! You could sort a list by the width of each item element.
{% highlight javascript %}
getSortData : {
// ...
width : function( $elem ) {
return $elem.width();
}
}
{% endhighlight %}
## 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.
Sorting elements is done with the [`sortBy` option](options.html#sortby). The value needs to match the property name used in the `getSortData` object.
With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'category'`.
{% highlight javascript %}
$('#container').isotope({ sortBy : 'symbol' });
{% endhighlight %}
There are two additional sorting data methods built in to Isotope.
+ `'original-order'` will use the original order of the item elements to arrange them in the layout.
+ `'random'` is a random order.
## 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`](options.html#sortascending) to <code><span class="kc">false</span></code>.
{% highlight javascript %}
$('#container').isotope({
sortBy : 'name',
sortAscending : false
});
{% endhighlight %}
## Creating interactive buttons
We can use a simple list for our buttons.
{% highlight html %}
<ul id="sort-by">
<li><a href="#name">name</a></li>
<li><a href="#symbol">symbol</a></li>
<li><a href="#number">number</a></li>
<li><a href="#weight">weight</a></li>
<li><a href="#category">category</a></li>
</ul>
{% endhighlight %}
When one of these links is clicked, we can use the `href` attribute as the value for `sortBy` in the Isotope script.
{% highlight javascript %}
$('#sort-by a').click(function(){
// get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1);
$('#container').isotope({ sortBy : sortName });
return false;
});
{% endhighlight %}

100
_posts/docs/2010-12-09-animating.md
Unescape View File

@ -1,100 +0,0 @@
---
title: Animating
category: docs
layout: default
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 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()`.
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
+ `'css'`: Isotope uses `.css()`
+ `'jquery'`: Isotope uses `.animate()`
## CSS transitions
To enable animation with CSS transitions, you'll need the following code in your CSS:
{% highlight css %}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
{% endhighlight %}
## Variations
With these two options you can finely control how animation is handled across browsers.
### Best available (recommended)
Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.
+ **Add** CSS transition declarations
### Always use jQuery
All browsers will use jQuery animation, regardless of their CSS transition support.
+ `animationEngine : 'jquery'`
+ **No** CSS transition declarations
Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions &mdash; which is a bad thing.
### Only CSS transitions
+ `animationEngine: 'css'`
+ **Add** CSS transition declarations
### None
Animation is not enabled in any browser
+ `animationEngine : 'css'`
+ **No** CSS transition declarations

79
_posts/docs/2010-12-10-adding-items.md
Unescape View File

@ -1,79 +0,0 @@
---
title: Adding items
category: docs
layout: default
toc:
- { title: addItems method, anchor: additems_method }
- { title: insert method, anchor: insert_method }
- { title: appended method, anchor: appended_method }
- { title: Prepending, anchor: prepending }
- { title: Recommended CSS, anchor: recommended_css }
---
If your application dynamically adds new content, Isotope provides several methods to add items.
[**See Demo: Adding items**](../demos/adding-items.html).
## 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.
{% highlight javascript %}
var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').append( $newItems ).isotope( 'addItems', $newItems );
{% endhighlight %}
## 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.
{% highlight javascript %}
var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').isotope( 'insert', $newItems );
{% endhighlight %}
## 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** use filtering or sorting. `appended` is the best method to use with Infinite Scroll.
[**See Demo: Infinite Scroll**](../demos/infinite-scroll.html).
See also [Infinite Scroll with filtering or sorting](help.html#infinite_scroll_with_filtering_or_sorting)
## Prepending
Because of Isotope's sorting functionality, prepending isn't as straight forward as might expect. However, it can be replicated fairly easy. After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the [`reloadItems` method](methods.html#reloaditems). Then trigger a re-layout, with the original DOM order.
{% highlight javascript %}
var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').prepend( $newItems)
.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
{% endhighlight %}
## Recommended CSS
You'll need these styles in your CSS for the reveal animation when adding items.
{% highlight css %}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
{% endhighlight %}

174
_posts/docs/2011-05-25-extending-isotope.md
Unescape View File

@ -1,174 +0,0 @@
---
title: Extending Isotope
category: docs
layout: default
toc:
- { title: Custom layout modes, anchor: custom_layout_modes }
---
Isotope uses a constructor pattern, `$.Isotope`. To extend Isotope, you need only to add a method to `$.Isotope.prototype`.
{% highlight javascript %}
$.Isotope.prototype.myMethod = function() { ... };
// or, using jQuery extend utility
$.extend( $.Isotope.prototype, {
myMethod : function() { ... }
});
{% endhighlight %}
Before diving in, try [looking over the source](../jquery.isotope.js) to get a better understand of the internal logic behind Isotope.
## Custom layout modes
Isotope's layout modes are built around four methods: `Reset`, `Layout`, `GetContainerSize`, and `ResizeChanged`. These methods are the hooks that allow you to develop your own custom layout mode, without getting your hands dirty dealing with sorting, filtering, or other functionality. These layout mode methods need to be prefixed with an underscore and the name of the layout mode.
{% highlight javascript %}
// adding layout mode methods for 'customMode'
$.extend( $.Isotope.prototype, {
_customModeReset : function() { ... },
_customModeLayout : function( $elems ) { ... },
_customModeGetContainerSize : function() { ... },
_customModeResizeChanged : function() { ... }
});
{% endhighlight %}
[**See Custom layout mode: Category Rows**](../custom-layout-modes/category-rows.html)
[**See Custom layout mode: Spine align**](../custom-layout-modes/spine-align.html)
All of the [default layout modes](../docs/layout-modes.html) follow this pattern. We'll look at the code behind the _fitRows_ layout mode.
### Reset
Each layout mode should have its own set of properties that only it can use and not be affected by other layout modes. These properties can be accessed in the instance as an object whose value matches the layout mode name (i.e. `this.fitRows` for _fitRows_).
The `Reset` layout mode method is called with every `reLayout`, where Isotope will go through each item element and position it. This method resets layout mode properties.
The _fitRows_ layout mode keeps track of x and y position, as well as the height of the container. These properties are set back to zero in `Reset`.
{% highlight javascript %}
_fitRowsReset : function() {
this.fitRows = {
x : 0,
y : 0,
height : 0
};
},
{% endhighlight %}
### Layout
The `Layout` layout mode method is where items are positioned. Most of your layout logic happens here. This method provides one argument `$elems` -- a jQuery object with the item elements that need to be positioned.
`$elems.each` is the principle loop, iterating over each item element and positioning it. Items are positioned with the `_pushPosition` method (see below). The layout modes properties are
For _fitRows_, items are placed with the `this.fitRows.x` and `this.fitRows.y` values. This position is determined by if the item can fit in the current row, or if a new row needs to be started.
{% highlight javascript %}
_fitRowsLayout : function( $elems ) {
var instance = this,
containerWidth = this.element.width(),
props = this.fitRows;
$elems.each( function() {
var $this = $(this),
atomW = $this.outerWidth(true),
atomH = $this.outerHeight(true);
if ( props.x !== 0 && atomW + props.x > containerWidth ) {
// if this element cannot fit in the current row
props.x = 0;
props.y = props.height;
}
// position the atom
instance._pushPosition( $this, props.x, props.y );
props.height = Math.max( props.y + atomH, props.height );
props.x += atomW;
});
},
{% endhighlight %}
### GetContainerSize
After the script goes through positioning each item, it needs to resize the container. `GetContainerSize` returns the style for the size of the container.
In _fitRows_, the height property is returned as the value for height.
{% highlight javascript %}
_fitRowsGetContainerSize : function () {
return { height : this.fitRows.height };
},
{% endhighlight %}
### ResizeChanged
`ResizeChanged` is triggered whenever the browser window is resized. Before Isotope adjusts the layout, this method is triggered to determine if the layout has actually changed. The methods return a boolean.
{% highlight javascript %}
_fitRowsResizeChanged : function() {
return true;
},
{% endhighlight %}
### Helper methods
The `_pushPosition` method is used within a layout mode's `Layout` method. It takes 3 arguments: the item element currently being positioned, the x position, and the y position.
{% highlight javascript %}
_pushPosition( $item, x, y )
{% endhighlight %}
`_getSegments` is used within the layout mode's `Reset` method. It performs several utilities:
+ Determines the `columnWidth` for the layout mode (`rowHeight` for horizontal layout modes). This is either passed in as an option (i.e. `masonry { columnWidth: 90 }`), or the width of the first item element. This property is then set for the layout mode, i.e. `this.masonry.columnWidth`.
+ Calculates the number of number of columns (or rows, if horizontal) given the size of the container. This property is then set for the layout mode, i.e. `this.masonry.cols`.
{% highlight javascript %}
_getSegments( isHorizontal )
// for example
_cellsByRowReset : function() {
this.cellsByRow = {
index : 0
};
// get this.cellsByRow.columnWidth
this._getSegments();
// get this.cellsByRow.rowHeight
this._getSegments(true);
},
{% endhighlight %}
Similarly, `_checkIfSegmentsChanged` is used within `ResizeChanged`. It returns a boolean indicating whether or not the number of columns or rows has changed since the window has been resized.
{% highlight javascript %}
_checkIfSegmentsChanged( isHorizontal )
// for example
_masonryResizeChanged : function() {
return this._checkIfSegmentsChanged();
},
{% endhighlight %}

86
_posts/docs/2011-06-16-hash-history-jquery-bbq.md
Unescape View File

@ -1,86 +0,0 @@
---
title: Hash history with jQuery BBQ
category: docs
layout: default
toc:
- { title: Markup, anchor: markup }
- { title: jQuery script, anchor: jquery_script }
---
As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman's [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) allows us to do just that.
> jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history.
[**See Demo: Hash history**](../demos/hash-history.html)
BBQ is a marvelous plugin that provides for a lot more functionality. The [hash history demo](../demos/hash-history.html) uses multiple options (`sortBy`, `sortAscending`, and `layoutMode` in addition to `filter`), the ability to use back-button history, and properly highlights selected links.
Given BBQ's tremendous capabilities, the code can grow to be a bit complex. Be sure to read through [BBQ's docs](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) and take look at [its examples](http://benalman.com/code/projects/jquery-bbq/examples/) before you dive in and code up your own solution.
## Markup
Instead of setting the option values and keys with `data` attributes, we can add the option in the `href` for each link.
{% highlight html %}
<ul class="option-set">
<li><a href="#filter=*" class="selected">show all</a></li>
<li><a href="#filter=.metal">metal</a></li>
<li><a href="#filter=.transition">transition</a></li>
<li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#filter=%3Anot(.transition)">not transition</a></li>
<li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li>
</ul>
{% endhighlight %}
The `href` value is a serialized string, suitable for a URL. These values can be created with [jQuery.param()](http://api.jquery.com/jQuery.param/).
{% highlight javascript %}
$.param({ filter: '.metal' })
// >> "filter=.metal"
$.param({ filter: '.alkali, alkaline-earth' })
// >> "filter=.alkali%2C+alkaline-earth"
$.param({ filter: ':not(.transition)' })
// >> "#filter=%3Anot(.transition)"
{% endhighlight %}
## jQuery script
These serialized `href` values can be converted into their proper jQuery object form when clicked using [jQuery.deparam()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam) from jQuery BBQ.
{% highlight javascript %}
$('.option-set a').click(function(){
// get href attr, remove leading #
var href = $(this).attr('href').replace( /^#/, '' ),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam( href, true );
// set hash, triggers hashchange on window
$.bbq.pushState( option );
return false;
});
{% endhighlight %}
Calling [$.bbq.pushState()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState) will trigger the `hashchange` event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance.
{% highlight javascript %}
$(window).bind( 'hashchange', function( event ){
// get options object from hash
var hashOptions = $.deparam.fragment();
// apply options from hash
$container.isotope( hashOptions );
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');
{% endhighlight %}
Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked.

234
_posts/docs/2011-12-11-help.md
Unescape View File

@ -1,234 +0,0 @@
---
title: Help
category: docs
layout: default
toc:
- { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues }
- { title: Additional resources, anchor: additional_resources }
- { title: Unloaded media, anchor: unloaded_media }
- { title: Images, anchor: images }
- { title: font-face fonts, anchor: fontface_fonts }
- { title: Problems with CSS transforms, anchor: css-transforms }
- { title: Getting item position, anchor: getting_item_position }
- { title: Accessing the instance, anchor: accessing_the_instance }
- { title: CSS transforms in Opera, anchor: css_transforms_in_opera }
- { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting}
- { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
- { title: First item breaks Masonry layout, anchor: first_item_breaks_masonry_layout }
- { title: Right-to-left layouts, anchor: righttoleft_layouts }
- { title: Preventing clicks on filtered items, anchor: unclickable-filtered }
---
## Reporting bugs and issues
Please read my [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) and then [report bugs and issues on GitHub](http://github.com/desandro/isotope/issues).
## Support
Need help with getting Isotope up and running? Got a time-consuming problem you want to get solved quickly? Get [Isotope support on CodersClan](http://codersclan.net/?repo_id=1).
<p><a href="http://codersclan.net/?repo_id=1"><img src="http://www.codersclan.net/gs_button/?repo_id=1" width="200" /></a></p>
## Additional resources
+ The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases
+ [Various Isotope tests on jsFiddle](http://www.delicious.com/desandro/re:isotope+fiddle)
+ [My answers on Stack Overflow](http://stackoverflow.com/users/182183/desandro?tab=answers)
+ [Sites using Isotope on Zootool](http://zootool.com/user/desandro/tag:isotope), has screenshots
+ [Sites using Isotope on Delicious](http://www.delicious.com/desandro/using:isotope)
+ [Miscelleanous Isotope content](http://www.delicious.com/desandro/re:isotope)
## Unloaded media
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
## Images
### Inline dimensions
For images, the best method is to specify the width and height of images inline.
{% highlight html %}
<img src="img-file.jpg" width="280" height="160" />
{% endhighlight %}
If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.
### imagesLoaded plugin
The next best solution is to use the [imagesLoaded plugin](https://github.com/desandro/imagesloaded) included with Isotope. It's a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded.
{% highlight javascript %}
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
// options...
});
});
{% endhighlight %}
### `$(window).load()`
Another solution is to initialize Isotope inside `$(window).load()` instead of `$(document).ready()`. This will trigger Isotope after all the media on the page has loaded.
{% highlight javascript %}
$(window).load(function(){
$('#container').isotope({
// options...
});
});
{% endhighlight %}
## @font-face fonts
Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.
+ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
+ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)
## Problems with CSS transforms {: #css-transforms}
As the browser implementations of CSS tranforms are still a work-in-progress, they can cause buggy behavoir with other types of dynamic content.
<div id="flash"></div>
+ [Flash content in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash), like YouTube or Vimeo videos, Flash ads, or Flash audio players.
### Disabling transforms
Set [`transformsEnabled`](options.html#transformsenabled) to `false`. This is an easy step to take when troubleshooting.
{% highlight javascript %}
$('#container').isotope({
// options...
transformsEnabled: false
});
{% endhighlight %}
## Getting item position
CSS transforms will break previous patterns for getting the position of an item. See the [`itemPositionDataEnabled`](options.html#itempositiondataenabled) option for a stop-gap.
## Accessing the instance
[Similar to jQuery UI](http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained), Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the `'isotope'` namespace.
{% highlight javascript %}
var $container = $('#container');
// initialize Isotope instance
$container.isotope({
// options...
});
// get Isotope instance
var isotopeInstance = $container.data('isotope');
isotopeInstance.options; // options
isotopeInstance.$filteredAtoms; // jQuery object of filtered & sorted item elements
isotopeInstance.masonry.columnWidth; // Layout mode specific properties
{% endhighlight %}
## CSS transforms in Opera
[Using CSS transforms in older versions Opera (< 12) distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). See how to enable [CSS transitions with top, left positioning](options.html#transformsEnabled-css).
## Infinite Scroll with filtering or sorting
I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise [moderation](introduction.html#moderation) with your Isotope implementation.
If you do plan on implementing Infinite Scroll with filtering or sorting (which is a _bad idea_), use the `insert` method instead of `appended`.
## Poor type rendering in WebKit
Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. A solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated). Another solution is to [disable transforms](#disabling_transforms).
## First item breaks Masonry layout
With [Masonry layout mode](layout-modes.html#masonry) If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set [`columnWidth` option](layout-modes.html#masonry-options). Without `columnWidth` set, the Masonry layout mode will use the width of the first item for the size of its columns.
{% highlight javascript %}
$('#container').isotope(
masonry: {
columnWidth: 220
}
});
{% endhighlight %}
## Right-to-left layouts
Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.
[**See test: Right to left**](../tests/right-to-left.html)
You'll need to make the following changes:
+ Modify Isotope's `_positionAbs` method
+ Set `transformsEnabled: false` in the Isotope options
+ Add CSS transition property styles for right/top.
### JavaScript for right-to-left support
{% highlight javascript %}
// modify Isotope's absolute position method
$.Isotope.prototype._positionAbs = function( x, y ) {
return { right: x, top: y };
};
// initialize Isotope
$('#container').isotope({
transformsEnabled: false
// other options...
});
{% endhighlight %}
### CSS for right-to-left support
{% highlight css %}
.isotope .isotope-item {
-webkit-transition-property: right, top, -webkit-transform, opacity;
-moz-transition-property: right, top, -moz-transform, opacity;
-ms-transition-property: right, top, -ms-transform, opacity;
-o-transition-property: right, top, -o-transform, opacity;
transition-property: right, top, transform, opacity;
}
{% endhighlight %}
## Preventing clicks on filtered items {: #unclickable-filtered}
The [recommended CSS for filtering](filtering.html#recommended_css) includes `pointer-events: none` for `.isotope-hidden`. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element's parent is a filtered item.
[See test: Unclickable filtered](../tests/unclickable-filtered.html)
{% highlight javascript %}
$('.item a').click(function(){
var $this = $(this);
// back out if hidden item
if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
return;
}
// otherwise, continue to do stuff...
console.log('item was clicked');
});
{% endhighlight %}

79
_posts/docs/2011-12-20-license.md
Unescape View File

@ -1,79 +0,0 @@
---
title: License
category: docs
layout: default
toc:
- { title: Commercial licensing, anchor: commercial_licensing }
- { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement }
---
Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license.
### Open source license
For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free.
### What is commercial considered?
If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required.
## Commercial licensing
Purchasing accepts most credit cards and takes seconds. Once purchased, you&rsquo;ll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications.
With the purchase of a commercial license:
+ You may use Isotope in as many commercial applications you like.
+ You may use Isotope in your own commercial applications and products. For example: premium WordPress, Tumblr, or other CMS themes, plugins and templates.
+ Customers and users of your products do **not** need to purchase their own license -- so long as they are not developing their own commercial products with Isotope.
The commercial license comes in two varieties:
### Isotope Commercial Developer License
The Isotope Commercial Developer License is for individual developers. This license is priced per developer. Each individual developer needs to purchase a separate license. A developer is someone who implements Isotope, and probably types `.isotope()` at some point.
<p>{% include developer-buy-button.html %}</p>
### Isotope Commercial Organization License
The Isotope Commercial Organization License is for an organization with a team of developers. The license covers the entire team no matter how many developers are working on it.
<p>{% include org-buy-button.html %}</p>
### Purchase via PayPal
If you're having trouble using a credit card, try purchasing a license via PayPal:
+ [Buy Developer License via PayPal](http://pul.ly/b/13620)
+ [Buy Organization License via PayPal](http://pul.ly/b/36595)
## Isotope Commercial License Agreement
This Commercial License Agreement is a binding legal agreement between you and Metafizzy LLC (**Metafizzy**). By installing, copying, or using Isotope (the **Software**), you agree to be bound by these terms of this Agreement.
### Grant of License
Subject to the payment of the fee required and the conditions herein, you are hereby granted a non-exclusive, non-transferable right to the Software to design and develop commercial applications (**Applications**).
#### Developer Grant
The Isotope Commercial Developer License grants 1 license for you as 1 designated user (**Developer**) to use the Software for the purpose of developing Applications. A Developer is an individual who implements the Software into Applications, most often writing the necessary code to do so. You must purchase another separate license to the Software for each and any additional Developer, or purchase a Isotope Commercial Organization License to cover your organization as a whole.
#### Organization Grant
The Isotope Commercial Organization License grants 1 license for your Organization as 1 designated, collective user (**Organization**) to use the Software for the purpose of developing Applications. There is no limit or restriction of the number of Developers within your Organization who may develop Applications using the Software.
#### Usage
You are granted the right to use and to modify the source code of the Software for use in Applications. There is no limit or restriction of the number of Applications which use the Software. You own any original work authored by you. Metafizzy continues to retain all copyright and other intellectual property rights in the Software. You are not permitted to move, remove, edit, or obscure any copyright, trademark, attribution, warning or disclaimer notices in the Software.
You may use the Software only to create Applications that are significantly different than and do not compete with the Software. You are granted the license to distribute the Software as part of your Applications on a royalty-free basis. Users of your Applications are permitted to use the Software or your modifications of the Software as part of your Applications. Users do not need to purchase their own commercial license for the Software, so long as they are not acting as Developers, developing their own commercial Applications with the Software.
### Warranties and Remedies
The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. Metafizzy's entire liability and your exclusive remedy under this agreement shall be return of the price paid for the Software.
<script src="https://www.simplegoods.co/assets/embed.js"> </script>

1408
jquery.isotope.js
View File

File diff suppressed because it is too large Load Diff

13
jquery.isotope.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
minify.sh
Unescape View File

@ -1,9 +0,0 @@
#!/bin/bash
# minifies jquery.isotope.js
# requires nodejs & uglify-js
IN=jquery.isotope.js
OUT=jquery.isotope.min.js
uglifyjs $IN --compress conditionals=true --mangle --comments --output $OUT
Write Preview
Loading…
Cancel
Save