<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pclass="rfloat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Settings you can change (these are the defaults)</p>
<prerel="JavaScript">
<codeclass="language-javascript">
// Overrideable options
$.fn.shuffle.options = {
@ -181,18 +200,21 @@ $.fn.shuffle.options = {
columnWidth : 0 // can be a function or number or calculated by plugin
};
</code>
</pre>
</pre>
<p>The easing function is one of <code>'default'</code>, <code>'linear'</code>, <code>'ease-in'</code>, <code>'ease-out'</code>, <code>'ease-in-out'</code>, or <code>'cubic-bezier'</code>.</p>
</div>
<p>The easing function is one of <code>'default'</code>, <code>'linear'</code>, <code>'ease-in'</code>, <code>'ease-out'</code>, <code>'ease-in-out'</code>, or <code>'cubic-bezier'</code>.</p>
</div>
</div>
</section>
<section>
<h2>Usage</h2>
<section>
<divclass="container-fluid">
<h2>Usage</h2>
<div>
<h3>The HTML Structure</h3>
<p>The only real important thing here is the <codeclass="language-markup token attr-name">data-groups</code> attribute. It has to be a <ahref="http://jsonlint.com/">valid JSON</a> array of strings.</p>
<prerel="HTML">
<div>
<h3>The HTML Structure</h3>
<p>The only real important thing here is the <codeclass="language-markup token attr-name">data-groups</code> attribute. It has to be a <ahref="http://jsonlint.com/">valid JSON</a> array of strings.</p>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <codeclass="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<h3>How column widths work</h3>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <codeclass="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<p>These events will be triggered at their respective times: <code>'shrink.shuffle'</code>, <code>'shrunk.shuffle'</code>, <code>'filter.shuffle'</code>, <code>'filtered.shuffle'</code>, and <code>'sorted.shuffle'</code>.</p>
</div>
</section>
<h3>Events</h3>
<p>These events will be triggered at their respective times: <code>'shrink.shuffle'</code>, <code>'shrunk.shuffle'</code>, <code>'filter.shuffle'</code>, <code>'filtered.shuffle'</code>, and <code>'sorted.shuffle'</code>.</p>
</div>
</div>
</section>
<section>
<h2>Sorting</h2>
<section>
<divclass="container-fluid">
<h2>Sorting</h2>
<p>You can order the elements based off a function you supply. In the example above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute. The filter buttons have a <code>data-sort</code> attribute with the value of the item’s attribute. Then, with some JavaScript, we can get the correct attribute and provide a function to sort by.</p>
<p>You can order the elements based off a function you supply. In the example above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute. The filter buttons have a <code>data-sort</code> attribute with the value of the item’s attribute. Then, with some JavaScript, we can get the correct attribute and provide a function to sort by.</p>
<p>The <code>opts</code> parameter can contain two properties. <code>reverse</code>, a boolean which will reverse the array. <code>by</code> is a function that is passed the element wrapped in jQuery. In the case above, we’re returning the value of the data-date-created or data-title attributes.</p>
<p>Calling sort with an empty object will reset the elements to DOM order.</p>
</section>
<p>The <code>opts</code> parameter can contain two properties. <code>reverse</code>, a boolean which will reverse the array. <code>by</code> is a function that is passed the element wrapped in jQuery. In the case above, we’re returning the value of the data-date-created or data-title attributes.</p>
<p>Calling sort with an empty object will reset the elements to DOM order.</p>
</div>
</section>
<section>
<h2>Advanced Filtering</h2>
<section>
<divclass="container-fluid">
<h2>Advanced Filtering</h2>
<p>By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item in the container and give your function the element wrapped in jQuery and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
<p>By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item in the container and give your function the element wrapped in jQuery and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
<h3>Example</h3>
<prerel="JavaScript">
<h3>Example</h3>
<prerel="JavaScript">
<codeclass="language-javascript">
// Filters elements with a data-title attribute with less than 10 characters
<li>A custom Modernizr build has been included with the plugin.</li>
<li>If you already have Modernizr on your site, you may delete it.</li>
<li>If you don't know what Modernizr is, leave it!</li>
</ul>
</li>
<li>A custom Modernizr build has been included with the plugin.</li>
<li>If you already have Modernizr on your site, you may delete it.</li>
<li>If you don't know what Modernizr is, leave it!</li>
</ul>
</section>
<section>
<h2>Supported Browsers</h2>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE 7+</li>
<li>Opera</li>
<li>Safari</li>
</ul>
<p>
Browsers that don't support CSS transitions and transforms <strong>*cough*</strong> IE <= 9 <strong>*cough*</strong> will see a less cool, javascript based version of the effect.
<li><ahref="http://isotope.metafizzy.co/">Inspired by Isotope</a></li>
<li><ahref="http://glencheney.com">Me</a></li>
</ul>
</section>
<section>
<h2>Changes</h2>
{% include changelog.html %}
</section>
</div>
</li>
</ul>
</div>
</section>
<section>
<divclass="container-fluid">
<h2>Supported Browsers</h2>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE 7+</li>
<li>Opera</li>
<li>Safari</li>
</ul>
<p>
Browsers that don't support CSS transitions and transforms <strong>*cough*</strong> IE <= 9 <strong>*cough*</strong> will see a less cool, javascript based version of the effect.
Glen Cheney
11 years ago