{{ element.number }}
-{{ element.weight }}
-Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.
-Modified masonry layout mode for centered container.
-This demo uses a custom layout mode, categoryRows that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.
Modified masonry layout mode for corner stamp. An element can be "stamped" in the right top corner.
-Set cornerStampSelector within masonry options. itemSelector needs to be set as well.
Modified masonry layout mode for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.
-Set gutterWidth within masonry options.
Custom layout mode that aligns items to the center, placing them either left or right of the spine. gutterWidth option available.
To use this layout mode, grab the $.Isotope.prototype methods from the script at the bottom of this page's source.
Custom layout mode to replicate the Flash interface of big.dk. Similiar to Category rows, item elements are grouped by their sorting data into columns.
- -{% highlight javascript %} - -$container.isotope({ - layoutMode: 'bigGraph', - bigGraph: { - columnWidth: 45, // size of item - rowHeight: 45, // size of item - maxRows: 11, // max number of items vertically - gutterWidth: { // width of gutter, needs to match getSortData names - year: 0, - scale: 60, - program: 40, - status: 60, - title: 0 - } - }, - // options... -}); - -{% endhighlight %} - -To use this layout mode, grab the $.Isotope.prototype methods from the script at the bottom of this page's source.
Custom layout mode masonryColumnShift. Enabled columns of a Masonry layout to be shifted and not affect other columns. After the size of an item element has changed, you can trigger a special columnShiftOfItem method that will push the column down. This layout only works with item elements that have the same width
This is a basic demo of Isotope. Resize the browser window to see the layout animate.
-Isotope has a versatile layout engine that can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height.
-See docs on layout modes.
-Filtering hides and reveals item elements.
-See docs on filtering.
-Sort item elements based on any data you can extract from them.
-See docs on sorting.
-Use the reLayout method to easily arrange item elements after a change.
Click on any item element to change its size.
-The insert method will append, add items to the widget, filter, sort, and then layout all items
The appended method adds items to the widget, and then lays out only the new items.
The reloadItems method re-collects all items in their current order in the DOM, which can be useful for prepending items.
See docs on adding items.
-Isotope is interoperable with Infinite Scroll by Paul Irish. Use the appended method to add new items to the Isotope layout. CSS transitions have been disabled on the container element to avoid triggering AJAX call prematurely.
- - 
- - 
- - 
- - 
- - 
- - 
- - 
- - 
----
-
- Isotope is triggered after all images are loaded with the imagesLoaded plugin.
Filters can be combined. In addition to filtering for just .red or .tall, you can pass in a filter selector of both: .red.tall.
jQuery BBQ by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button, or copying the URL and pasting it into a new window.
-This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.
- -{% highlight javascript %} - -var $container = $('#container') -// initialize Isotope -$container.isotope({ - // options... - resizable: false, // disable normal resizing - // set columnWidth to a percentage of container width - masonry: { columnWidth: $container.width() / 5 } -}); - -// update columnWidth on window resize -$(window).smartresize(function(){ - $container.isotope({ - // update columnWidth to a percentage of container width - masonry: { columnWidth: $container.width() / 5 } - }); -}); - -{% endhighlight %} - -Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.
-Isotope: An exquisite jQuery plugin for magical layouts
- -## 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 — CSS transitions and transforms, GPU acceleration — 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) - - -{% include developer-buy-button.html %} {% include org-buy-button.html %}
- -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 %} - -this 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)
-
-
diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown
deleted file mode 100644
index 984e3ad..0000000
--- a/_posts/docs/2010-12-03-options.mdown
+++ /dev/null
@@ -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 }
-
----
-
-optionanimationEngine'best-available'animationOptions{ queue: false, duration: 800 }.animate(). 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
-
-containerClass'isotope'containerStyle{ position: 'relative', overflow: 'hidden' }filter'*' or '' (an empty string): Shows all item elementsgetSortDatahiddenClass'isotope-hidden'hiddenStyle{ opacity : 0, scale : 0.001 }itemClass'isotope-item'itemPositionDataEnabledfalse'isotope-item-position' 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
-
-itemSelectorlayoutMode'masonry'onLayoutresizabletrueresizesContainertruefalse, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered.
-
-## sortAscending
-
-sortAscendingtruesortBytransformsEnabledtruefalse 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
-
-visibleStyle{ opacity : 1, scale : 1 }columnWidthrowHeightcolumnWidthrowHeightcolumnWidthrowHeightfalse.
-
-{% highlight javascript %}
-
-$('#container').isotope({
- sortBy : 'name',
- sortAscending : false
-});
-
-{% endhighlight %}
-
-## Creating interactive buttons
-
-We can use a simple list for our buttons.
-
-{% highlight html %}
-
-
-
-{% 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 %}
diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown
deleted file mode 100644
index f991ba2..0000000
--- a/_posts/docs/2010-12-09-animating.mdown
+++ /dev/null
@@ -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 — 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
-
diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown
deleted file mode 100644
index f74af8f..0000000
--- a/_posts/docs/2010-12-10-adding-items.mdown
+++ /dev/null
@@ -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 = $('');
-$('#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 = $('');
-$('#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 = $('');
-$('#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 %}
diff --git a/_posts/docs/2011-05-25-extending-isotope.mdown b/_posts/docs/2011-05-25-extending-isotope.mdown
deleted file mode 100644
index 082ed50..0000000
--- a/_posts/docs/2011-05-25-extending-isotope.mdown
+++ /dev/null
@@ -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 %}
-
diff --git a/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown b/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown
deleted file mode 100644
index 04375bd..0000000
--- a/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown
+++ /dev/null
@@ -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 %}
-
-
-
-{% 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.
-
-
-
-+ [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 %}
\ No newline at end of file
diff --git a/_posts/docs/2011-12-20-license.mdown b/_posts/docs/2011-12-20-license.mdown
deleted file mode 100644
index d35d4f2..0000000
--- a/_posts/docs/2011-12-20-license.mdown
+++ /dev/null
@@ -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’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.
-
-{% include developer-buy-button.html %}
- -### 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. - -{% include org-buy-button.html %}
- -### 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. - - diff --git a/_posts/pages/2011-01-01-2.html b/_posts/pages/2011-01-01-2.html deleted file mode 100644 index a5b226c..0000000 --- a/_posts/pages/2011-01-01-2.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 2 -category: pages -layout: default -page_position: 20 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-3.html b/_posts/pages/2011-01-01-3.html deleted file mode 100644 index 5aa7e41..0000000 --- a/_posts/pages/2011-01-01-3.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 3 -category: pages -layout: default -page_position: 40 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-4.html b/_posts/pages/2011-01-01-4.html deleted file mode 100644 index d08868d..0000000 --- a/_posts/pages/2011-01-01-4.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 4 -category: pages -layout: default -page_position: 60 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-5.html b/_posts/pages/2011-01-01-5.html deleted file mode 100644 index 7da5795..0000000 --- a/_posts/pages/2011-01-01-5.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 5 -category: pages -layout: default -page_position: 80 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-6.html b/_posts/pages/2011-01-01-6.html deleted file mode 100644 index 369c780..0000000 --- a/_posts/pages/2011-01-01-6.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 6 -category: pages -layout: default -page_position: 100 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/tests/2010-01-01-index.html b/_posts/tests/2010-01-01-index.html deleted file mode 100644 index ccac568..0000000 --- a/_posts/tests/2010-01-01-index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Tests Index -layout: default -category: tests -is_index_page: true ---- - -Click init button the destroy. Original CSS, pre-init, should be re-applied, all items back to visibility.
-Flash content like YouTube or Vimeo videos
-Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by mikedahlquist)
- -
- WIN
-- -I’ll believe until the day I die that the Smashing Pumpkins were more unique and more complex than most people will ever give them credit for. But I also understand that casual listeners aren’t going to go out of their way to hear the hundreds of lesser-known Pumpkins tracks that are often just as good as anything that’s made its way onto an album. So I’m telling you to start with “Set the Ray to Jerry.”
-
— Ross McGowan The Smashing Pumpkins: Set the Ray to Jerry
Via kristianindy
-Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10] (via alohaband1)
- -I was at this show. This is my favorite song from 2010. I love Aloha so much.
What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still return this.
itemPositionDataEnabled option is enabled.
Check that the option setter for animationEngine is properly triggered.
-Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.
-Test to see how IE7 deals with type rendering
-Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: Help - Right to left layouts.
-For Internet Explorer and Opera, you might need to dismiss event on filtered out items. You should not be able to click on the big red blocks when filtered-out
-(Last item clicked)
-Tests that callbacks are triggering properly, after animation/transition has completed.
- -Tests that onLayout callback is triggering properly, after animation/transition has completed.
- -Filters can be combined. In addition to filtering for just .red or .tall, you can pass in a filter selector of both: .red.tall.
+ +
{{ feature.number }}
-' + number + - '
' + weight + '
| t |
