first import
This commit is contained in:
Bachir Soussi Chiadmi
511
sites/all/libraries/isotope-site/tests/callbacks.html
Normal file
511
sites/all/libraries/isotope-site/tests/callbacks.html
Normal file
@@ -0,0 +1,511 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Callbacks · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Callbacks</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p>Tests that callbacks are triggering properly, after animation/transition has completed.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" 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 class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'],
|
||||
colorI = 0;
|
||||
|
||||
function changeBGColor() {
|
||||
var color = colors[ colorI % colors.length ];
|
||||
$container.css({ background: color })
|
||||
colorI++;
|
||||
}
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
masonry : {
|
||||
columnWidth : 120
|
||||
},
|
||||
masonryHorizontal : {
|
||||
rowHeight: 120
|
||||
},
|
||||
cellsByRow : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
cellsByColumn : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
}, changeBGColor );
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options, changeBGColor );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls, changeBGColor );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls, changeBGColor );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope( 'reLayout', changeBGColor );
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope( 'reLayout', changeBGColor );
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope( 'shuffle', changeBGColor );
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
376
sites/all/libraries/isotope-site/tests/destroy.html
Normal file
376
sites/all/libraries/isotope-site/tests/destroy.html
Normal file
@@ -0,0 +1,376 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>destroy · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>destroy</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p>
|
||||
</section>
|
||||
|
||||
<section id="options">
|
||||
<button id="init">Init Isotope instance</button>
|
||||
<button id="destroy">Destroy Isotope instance</button>
|
||||
</section>
|
||||
|
||||
<div id="container" style="height: 600px">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$('#init').click(function(){
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
filter: '.metal'
|
||||
});
|
||||
});
|
||||
|
||||
$('#destroy').click(function(){
|
||||
$container.isotope('destroy');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1478
sites/all/libraries/isotope-site/tests/elements-complete-test.html
Normal file
1478
sites/all/libraries/isotope-site/tests/elements-complete-test.html
Normal file
File diff suppressed because it is too large
Load Diff
327
sites/all/libraries/isotope-site/tests/flash.html
Normal file
327
sites/all/libraries/isotope-site/tests/flash.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>flash · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>flash</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.item {
|
||||
width: 500px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: top, left, opacity;
|
||||
-moz-transition-property: top, left, opacity;
|
||||
transition-property: top, left, opacity;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Flash content like YouTube or Vimeo videos</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter-link" data-option-value=".link">link</a></li>
|
||||
<li><a href="#filter-audio" data-option-value=".audio">audio</a></li>
|
||||
<li><a href="#filter-video" data-option-value=".video">video</a></li>
|
||||
<li><a href="#filter-photo" data-option-value=".photo">photo</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
|
||||
<div class="item video">
|
||||
|
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowfullscreen="true" wmode="transparent"></object>
|
||||
|
||||
<p>Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by <a href="http://www.youtube.com/watch?v=GaoLU6zKaws&feature=youtu.be">mikedahlquist</a>)</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item photo">
|
||||
<figure class="content">
|
||||
<a href="http://danimaree.tumblr.com"><img src="http://29.media.tumblr.com/tumblr_lhbbz91Wg51qa5ylbo1_500.gif" alt="WIN"></a>
|
||||
<figcaption><p>WIN</p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item audio">
|
||||
<figure class="content audio">
|
||||
|
||||
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?505"></script><span id="audio_player_3674118149">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span><script type="text/javascript">replaceIfFlash(9,"audio_player_3674118149",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/3674118149/tumblr_lhmdlpR0Kl1qashpb&color=FFFFFF" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script>
|
||||
Smashing Pumpkins
|
||||
<em>Set The Ray To Jerry</em>
|
||||
Judas 0: B-Sides and Rarities
|
||||
<figcaption><blockquote>
|
||||
<p>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.”</p>
|
||||
</blockquote>
|
||||
|
||||
<p>— Ross McGowan <a href="http://www.stylusmagazine.com/articles/seconds/the-smashing-pumpkins-set-the-ray-to-jerry.htm">The Smashing Pumpkins: Set the Ray to Jerry</a></p></figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item photo">
|
||||
<figure class="content photo">
|
||||
<a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460"><img src="http://27.media.tumblr.com/tumblr_lh8j1hUuvO1qashpbo1_500.jpg" alt="and there&#8217;s a light on by *zenibyfajnie on deviantART"></a>
|
||||
<figcaption><p><a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460">and there’s a light on by *zenibyfajnie on deviantART</a></p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item link">
|
||||
<h2><a href="http://www.kaplusa.com/blog/2011/01/twitter-icon-evolution/" >KA+A : Blog : Iconoclast – A Twitter Icon’s Journey From Discreet to Disaster</a></h2>
|
||||
<p>Via <a href="https://twitter.com/kristianindy/status/31100858091442178">kristianindy</a></p>
|
||||
</div>
|
||||
|
||||
<div class="item video">
|
||||
<figure class="content video">
|
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowFullScreen="true" wmode="transparent"></embed></object>
|
||||
<figcaption><p><a href="http://www.youtube.com/watch?v=7g0We1DY7WI">Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10]</a> (via <a href="http://youtube.com/user/alohaband1">alohaband1</a>)</p>
|
||||
|
||||
<p>I was at this show. This is my favorite song from 2010. I love Aloha so much.</p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item video">
|
||||
<iframe title="YouTube video player" width="500" height="311" src="http://www.youtube.com/embed/7g0We1DY7WI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.imagesLoaded(function(){
|
||||
$container.isotope({
|
||||
transformsEnabled: false,
|
||||
visibleStyle: { opacity: 1 },
|
||||
hiddenStyle: { opacity: 0 }
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
221
sites/all/libraries/isotope-site/tests/index.html
Normal file
221
sites/all/libraries/isotope-site/tests/index.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Tests Index · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Tests Index</h1>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/destroy.html">destroy</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/flash.html">flash</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/no-items.html">no items</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/item-position-data.html">item position data</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/jquery-animation.html">jquery animation</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/elements-complete-test.html">elements complete test</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/tiny-text.html">Tiny text</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/right-to-left.html">Right to left</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/unclickable-filtered.html">Unclickable filtered</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/callbacks.html">Callbacks</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
632
sites/all/libraries/isotope-site/tests/item-position-data.html
Normal file
632
sites/all/libraries/isotope-site/tests/item-position-data.html
Normal file
@@ -0,0 +1,632 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>item position data · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>item position data</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p><code>itemPositionDataEnabled</code> option is enabled. </p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
</ul>
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Mn" data-category="transition">
|
||||
<p class="number">25</p>
|
||||
<h3 class="symbol">Mn</h3>
|
||||
<h2 class="name">Manganese</h2>
|
||||
<p class="weight">54.938045</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ni" data-category="transition">
|
||||
<p class="number">28</p>
|
||||
<h3 class="symbol">Ni</h3>
|
||||
<h2 class="name">Nickel</h2>
|
||||
<p class="weight">58.6934</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cu" data-category="transition">
|
||||
<p class="number">29</p>
|
||||
<h3 class="symbol">Cu</h3>
|
||||
<h2 class="name">Copper</h2>
|
||||
<p class="weight">63.546</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Br" data-category="halogen">
|
||||
<p class="number">35</p>
|
||||
<h3 class="symbol">Br</h3>
|
||||
<h2 class="name">Bromine</h2>
|
||||
<p class="weight">79.904</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Kr" data-category="noble-gas">
|
||||
<p class="number">36</p>
|
||||
<h3 class="symbol">Kr</h3>
|
||||
<h2 class="name">Krypton</h2>
|
||||
<p class="weight">83.798</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
itemPositionDataEnabled: true,
|
||||
masonry: {
|
||||
columnWidth : 120
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
667
sites/all/libraries/isotope-site/tests/jquery-animation.html
Normal file
667
sites/all/libraries/isotope-site/tests/jquery-animation.html
Normal file
@@ -0,0 +1,667 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>jquery animation · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>jquery animation</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Check that the option setter for animationEngine is properly triggered.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
|
||||
<li id="toggle-animation"><a href="#toggle-animation">Toggle jQuery animation</a></li>
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
</ul>
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Mn" data-category="transition">
|
||||
<p class="number">25</p>
|
||||
<h3 class="symbol">Mn</h3>
|
||||
<h2 class="name">Manganese</h2>
|
||||
<p class="weight">54.938045</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ni" data-category="transition">
|
||||
<p class="number">28</p>
|
||||
<h3 class="symbol">Ni</h3>
|
||||
<h2 class="name">Nickel</h2>
|
||||
<p class="weight">58.6934</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cu" data-category="transition">
|
||||
<p class="number">29</p>
|
||||
<h3 class="symbol">Cu</h3>
|
||||
<h2 class="name">Copper</h2>
|
||||
<p class="weight">63.546</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Br" data-category="halogen">
|
||||
<p class="number">35</p>
|
||||
<h3 class="symbol">Br</h3>
|
||||
<h2 class="name">Bromine</h2>
|
||||
<p class="weight">79.904</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Kr" data-category="noble-gas">
|
||||
<p class="number">36</p>
|
||||
<h3 class="symbol">Kr</h3>
|
||||
<h2 class="name">Krypton</h2>
|
||||
<p class="weight">83.798</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
transformsEnabled: false,
|
||||
animationEngine: 'jquery',
|
||||
masonry: {
|
||||
columnWidth : 120
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var isAnimated = true;
|
||||
$('#toggle-animation').click(function(){
|
||||
isAnimated = !isAnimated;
|
||||
var aniEngine = isAnimated ? 'jquery' : 'css';
|
||||
$container.isotope( 'option', { animationEngine: aniEngine } );
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
357
sites/all/libraries/isotope-site/tests/no-items.html
Normal file
357
sites/all/libraries/isotope-site/tests/no-items.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>no items · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>no items</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p>What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still <code>return this</code>.</p>
|
||||
</section>
|
||||
|
||||
<div id="container">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.foo'
|
||||
}).css('border', '10px solid');
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
561
sites/all/libraries/isotope-site/tests/right-to-left.html
Normal file
561
sites/all/libraries/isotope-site/tests/right-to-left.html
Normal file
@@ -0,0 +1,561 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Right to left · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests demos">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Right to left</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#content { direction: rtl; }
|
||||
|
||||
#options li { float: right; }
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: right, top, -webkit-transform, opacity;
|
||||
-moz-transition-property: right, top, -moz-transform, opacity;
|
||||
-o-transition-property: right, top, -o-transform, opacity;
|
||||
transition-property: right, top, transform, opacity;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: <a href="../docs/help.html#righttoleft_layouts">Help - Right to left layouts</a>.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Layout modes</h3>
|
||||
|
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
|
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
|
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
|
||||
<li><a href="#cellsByRow" data-option-value="cellsByRow">cellsByRow</a></li>
|
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
|
||||
<li><a href="#masonryHorizontal" data-option-value="masonryHorizontal" class="horizontal">masonryHorizontal</a></li>
|
||||
<li><a href="#fitColumns" data-option-value="fitColumns" class="horizontal">fitColumns</a></li>
|
||||
<li><a href="#cellsByColumn" data-option-value="cellsByColumn" class="horizontal">cellsByColumn</a></li>
|
||||
<li><a href="#straightAcross" data-option-value="straightAcross" class="horizontal">straightAcross</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" 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 class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
$.Isotope.prototype._positionAbs = function( x, y ) {
|
||||
return { right: x, top: y };
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
transformsEnabled: false,
|
||||
masonry : {
|
||||
columnWidth : 120
|
||||
},
|
||||
masonryHorizontal : {
|
||||
rowHeight: 120
|
||||
},
|
||||
cellsByRow : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
cellsByColumn : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
|
||||
if ( key === 'layoutMode' && changeLayoutMode ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// change layout
|
||||
var isHorizontal = false;
|
||||
function changeLayoutMode( $link, options ) {
|
||||
var wasHorizontal = isHorizontal;
|
||||
isHorizontal = $link.hasClass('horizontal');
|
||||
|
||||
if ( wasHorizontal !== isHorizontal ) {
|
||||
// orientation change
|
||||
// need to do some clean up for transitions and sizes
|
||||
var style = isHorizontal ?
|
||||
{ height: '80%', width: $container.width() } :
|
||||
{ width: 'auto' };
|
||||
// stop any animation on container height / width
|
||||
$container.filter(':animated').stop();
|
||||
// disable transition, apply revised style
|
||||
$container.addClass('no-transition').css( style );
|
||||
setTimeout(function(){
|
||||
$container.removeClass('no-transition').isotope( options );
|
||||
}, 100 )
|
||||
} else {
|
||||
$container.isotope( options );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
270
sites/all/libraries/isotope-site/tests/tiny-text.html
Normal file
270
sites/all/libraries/isotope-site/tests/tiny-text.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Tiny text · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Tiny text</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
color: #000;
|
||||
float: left;
|
||||
font-size: 11px;
|
||||
line-height: 1.3em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.blue { background: #88F; }
|
||||
.red { background: #F88; }
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Test to see how IE7 deals with type rendering</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#red" data-option-value=".red">red</a></li>
|
||||
<li><a href="#blue" data-option-value=".blue">blue</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
287
sites/all/libraries/isotope-site/tests/unclickable-filtered.html
Normal file
287
sites/all/libraries/isotope-site/tests/unclickable-filtered.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Unclickable filtered · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests demos">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Unclickable filtered</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#clicked-display {
|
||||
display: inline-block;
|
||||
border: 1px dotted white;
|
||||
font-size: 1.1em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>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</p>
|
||||
<p id="clicked-display">(Last item clicked)</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-red"><a href="#toggle-red">Toggle big red blocks</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container'),
|
||||
isRedFiltered = true;
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.color-shape',
|
||||
masonry: {
|
||||
columnWidth: 80
|
||||
},
|
||||
hiddenStyle: {
|
||||
opacity: 0.25
|
||||
}
|
||||
}).isotope({
|
||||
filter: '.blue'
|
||||
}).isotope('shuffle');
|
||||
|
||||
$('#toggle-red a').click(function(){
|
||||
isRedFiltered = !isRedFiltered;
|
||||
var selector = isRedFiltered ? '.blue' : '*';
|
||||
$container.isotope({ filter: selector });
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
return false;
|
||||
});
|
||||
|
||||
var $clickedDisplay = $('#clicked-display');
|
||||
|
||||
$('.color-shape a').click(function(){
|
||||
var $this = $(this);
|
||||
// back out if hidden item
|
||||
if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
|
||||
return;
|
||||
}
|
||||
$clickedDisplay.text( $(this).attr('href') );
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user