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

#demo -> #container

pull/14/head
David DeSandro 14 years ago
parent
eeb135ec5a
commit
5fbd361241
18 changed files with 73 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      _includes/add-buttons.js
  2. 8
      _includes/layout-change.js
  3. 2
      _includes/sort-buttons.js
  4. 18
      _layouts/elements.html
  5. 6
      _layouts/inf-scroll-page.html
  6. 8
      _posts/demos/2010-12-12-basic.html
  7. 2
      _posts/demos/2010-12-13-elements-complete.html
  8. 2
      _posts/demos/2010-12-16-elements-partial.html
  9. 10
      _posts/demos/2010-12-29-layout-modes.html
  10. 10
      _posts/demos/2010-12-30-filtering.html
  11. 8
      _posts/demos/2010-12-30-sorting.html
  12. 16
      _posts/demos/2010-12-31-relayout.html
  13. 8
      _posts/demos/2011-01-02-adding-items.html
  14. 12
      _posts/demos/2011-01-02-infinite-scroll.html
  15. 8
      _posts/demos/2011-01-11-images.html
  16. 6
      _posts/docs/2010-12-06-filtering.mdown
  17. 10
      _posts/docs/2010-12-07-sorting.mdown
  18. 2
      index.html

10
_includes/add-buttons.js
Unescape View File

@ -6,10 +6,10 @@
newEls += fakeElement.create(); newEls += fakeElement.create();
} }
var $newEls = $( newEls ) var $newEls = $( newEls )
// $demo.append( $newEls ).isotope( 'appendToLayout', $newEls ); // $container.append( $newEls ).isotope( 'appendToLayout', $newEls );
$demo.isotope( 'insert', $newEls ); $container.isotope( 'insert', $newEls );
// $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope(); // $container.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
// $demo.isotope() // $container.isotope()
// console.log( next ) // console.log( next )
return false; return false;
@ -22,7 +22,7 @@
newEls += fakeElement.create(); newEls += fakeElement.create();
} }
var $newEls = $( newEls ) var $newEls = $( newEls )
$demo.append( $newEls ).isotope( 'appended', $newEls ); $container.append( $newEls ).isotope( 'appended', $newEls );
return false; return false;
}); });

8
_includes/layout-change.js
Unescape View File

@ -9,15 +9,15 @@
if ( wasHorizontal !== isHorizontal ) { if ( wasHorizontal !== isHorizontal ) {
// need to do some clean up for transitions and sizes // need to do some clean up for transitions and sizes
var style = isHorizontal ? var style = isHorizontal ?
{ height: '80%', width: $demo.width() } : { height: '80%', width: $container.width() } :
{ width: 'auto' }; { width: 'auto' };
$demo.addClass('no-transition').css( style ); $container.addClass('no-transition').css( style );
setTimeout(function(){ setTimeout(function(){
$demo.removeClass('no-transition').isotope({ layoutMode : mode }); $container.removeClass('no-transition').isotope({ layoutMode : mode });
}, 100 ) }, 100 )
} else { } else {
// go ahead and apply new layout // go ahead and apply new layout
$demo.isotope({ layoutMode : mode }); $container.isotope({ layoutMode : mode });
} }

2
_includes/sort-buttons.js
Unescape View File

@ -7,7 +7,7 @@
asc = $this.parents('.sort').hasClass('asc'); asc = $this.parents('.sort').hasClass('asc');
// var sortTest = 'sort ' + sortName + ' ' + direction; // var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest ); // console.time( sortTest );
$demo.isotope({ $container.isotope({
sortBy : sortName, sortBy : sortName,
sortAscending : asc sortAscending : asc
}); });

18
_layouts/elements.html
Unescape View File

@ -65,10 +65,10 @@
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
// hacky way of adding random size classes // hacky way of adding random size classes
$demo.find('.element').each(function(){ $container.find('.element').each(function(){
if ( Math.random() > 0.6 ) { if ( Math.random() > 0.6 ) {
$(this).addClass('width2'); $(this).addClass('width2');
} }
@ -80,7 +80,7 @@
// console.log('starting') // console.log('starting')
// console.time('initializeMe'); // console.time('initializeMe');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
// layoutMode : 'fitRows', // layoutMode : 'fitRows',
masonry : { masonry : {
@ -126,7 +126,7 @@
filterName = filterName === '.show-all' ? '*' : filterName; filterName = filterName === '.show-all' ? '*' : filterName;
// var filterTest = 'filter ' + filterName; // var filterTest = 'filter ' + filterName;
// console.time( filterTest ); // console.time( filterTest );
$demo.isotope({ filter: filterName }) $container.isotope({ filter: filterName })
// console.timeEnd( filterTest ); // console.timeEnd( filterTest );
return false; return false;
}); });
@ -134,16 +134,16 @@
{% include sort-buttons.js %} {% include sort-buttons.js %}
// change size of clicked element // change size of clicked element
$demo.find('.element').live('click', function(){ $container.find('.element').live('click', function(){
$(this).toggleClass('large'); $(this).toggleClass('large');
// console.time('relayout'); // console.time('relayout');
$demo.isotope('reLayout'); $container.isotope('reLayout');
// console.timeEnd('relayout'); // console.timeEnd('relayout');
}); });
// toggle variable sizes of all elements // toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){ $('#toggle-sizes').find('a').click(function(){
$demo $container
.toggleClass('variable-sizes') .toggleClass('variable-sizes')
.isotope('reLayout'); .isotope('reLayout');
return false; return false;
@ -154,12 +154,12 @@
{% include add-buttons.js %} {% include add-buttons.js %}
$('#shuffle a').click(function(){ $('#shuffle a').click(function(){
$demo.isotope('shuffle'); $container.isotope('shuffle');
return false; return false;
}); });
$('#xray').find('a').click(function(){ $('#xray').find('a').click(function(){
$demo.toggleClass('xray'); $container.toggleClass('xray');
}); });

6
_layouts/inf-scroll-page.html
Unescape View File

@ -11,7 +11,7 @@
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<div id="demo" class="iso-container variable-sizes"> <div id="container" class="iso-container variable-sizes">
{% assign page_position = page.page_position %} {% assign page_position = page.page_position %}
{% for element in site.elements_ordered limit:20 offset:page_position %} {% for element in site.elements_ordered limit:20 offset:page_position %}
{% include element-partial.html %} {% include element-partial.html %}
@ -27,9 +27,9 @@
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
layoutMode : 'fitRows' layoutMode : 'fitRows'
}); });

8
_posts/demos/2010-12-12-basic.html
Unescape View File

@ -9,11 +9,11 @@ related: etc
<p>This is a basic demo of Isotope. Resize the browser window to see the layout animate.</p> <p>This is a basic demo of Isotope. Resize the browser window to see the layout animate.</p>
</section> </section>
<div id="demo" class="iso-container"> <div id="container" class="iso-container">
{% for element in site.elements_ordered limit:20 %} {% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -24,9 +24,9 @@ related: etc
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector: '.element' itemSelector: '.element'
}); });

2
_posts/demos/2010-12-13-elements-complete.html
Unescape View File

@ -5,7 +5,7 @@ category: demos
related: etc related: etc
--- ---
<div id="demo" class="iso-container clickable"> <div id="container" class="iso-container clickable">
{% for element in site.elements %} {% for element in site.elements %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}

2
_posts/demos/2010-12-16-elements-partial.html
Unescape View File

@ -5,7 +5,7 @@ category: demos
related: etc related: etc
--- ---
<div id="demo" class="iso-container clickable"> <div id="container" class="iso-container clickable">
{% for element in site.elements_best_of %} {% for element in site.elements_best_of %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}

10
_posts/demos/2010-12-29-layout-modes.html
Unescape View File

@ -16,11 +16,11 @@ related: layouts
</section> <!-- #options --> </section> <!-- #options -->
<div id="demo" class="iso-container variable-sizes"> <div id="container" class="iso-container variable-sizes">
{% for element in site.elements_ordered limit:20 %} {% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -31,10 +31,10 @@ related: layouts
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
// hacky way of adding random size classes // hacky way of adding random size classes
$demo.find('.element').each(function(){ $container.find('.element').each(function(){
if ( Math.random() > 0.6 ) { if ( Math.random() > 0.6 ) {
$(this).addClass('width2'); $(this).addClass('width2');
} }
@ -43,7 +43,7 @@ related: layouts
} }
}); });
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
masonry : { masonry : {
columnWidth : 120 columnWidth : 120

10
_posts/demos/2010-12-30-filtering.html
Unescape View File

@ -23,11 +23,11 @@ related: filtering
</section> <!-- #options --> </section> <!-- #options -->
<div id="demo" class="iso-container"> <div id="container" class="iso-container">
{% for element in site.elements_best_of %} {% for element in site.elements_best_of %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -38,9 +38,9 @@ related: filtering
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
animationEngine : $.browser.opera ? 'jquery' : 'best-available' animationEngine : $.browser.opera ? 'jquery' : 'best-available'
}); });
@ -48,7 +48,7 @@ related: filtering
// filter buttons // filter buttons
$('#filters a').click(function(){ $('#filters a').click(function(){
var selector = $(this).attr('data-filter'); var selector = $(this).attr('data-filter');
$demo.isotope({ filter: selector }); $container.isotope({ filter: selector });
return false; return false;
}); });

8
_posts/demos/2010-12-30-sorting.html
Unescape View File

@ -16,11 +16,11 @@ related: sorting
</section> <!-- #options --> </section> <!-- #options -->
<div id="demo" class="iso-container"> <div id="container" class="iso-container">
{% for element in site.elements_best_of %} {% for element in site.elements_best_of %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -31,10 +31,10 @@ related: sorting
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
animationEngine : $.browser.opera ? 'jquery' : 'best-available', animationEngine : $.browser.opera ? 'jquery' : 'best-available',
getSortData : { getSortData : {

16
_posts/demos/2010-12-31-relayout.html
Unescape View File

@ -16,11 +16,11 @@ related: methods
</ul> </ul>
</section> </section>
<div id="demo" class="iso-container clickable"> <div id="container" class="iso-container clickable">
{% for element in site.elements_ordered limit:20 %} {% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -31,10 +31,10 @@ related: methods
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
// hacky way of adding random size classes // hacky way of adding random size classes
$demo.find('.element').each(function(){ $container.find('.element').each(function(){
if ( Math.random() > 0.6 ) { if ( Math.random() > 0.6 ) {
$(this).addClass('width2'); $(this).addClass('width2');
} }
@ -43,7 +43,7 @@ related: methods
} }
}); });
$demo.isotope({ $container.isotope({
itemSelector: '.element', itemSelector: '.element',
masonry : { masonry : {
columnWidth : 120 columnWidth : 120
@ -52,17 +52,17 @@ related: methods
// toggle variable sizes of all elements // toggle variable sizes of all elements
$('#toggle-sizes a').click(function(){ $('#toggle-sizes a').click(function(){
$demo $container
.toggleClass('variable-sizes') .toggleClass('variable-sizes')
.isotope('reLayout'); .isotope('reLayout');
return false; return false;
}); });
// change size of clicked element // change size of clicked element
$demo.find('.element').live('click', function(){ $container.find('.element').live('click', function(){
$(this).toggleClass('large'); $(this).toggleClass('large');
// console.time('relayout'); // console.time('relayout');
$demo.isotope('reLayout'); $container.isotope('reLayout');
// console.timeEnd('relayout'); // console.timeEnd('relayout');
}); });

8
_posts/demos/2011-01-02-adding-items.html
Unescape View File

@ -18,11 +18,11 @@ related: methods
</ul> </ul>
</section> </section>
<div id="demo" class="iso-container"> <div id="container" class="iso-container">
{% for element in site.elements_best_of limit:10 %} {% for element in site.elements_best_of limit:10 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
@ -34,9 +34,9 @@ related: methods
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
getSortData : { getSortData : {
symbol : function( $elem ) { symbol : function( $elem ) {

12
_posts/demos/2011-01-02-infinite-scroll.html
Unescape View File

@ -10,11 +10,11 @@ infinite_scroll: true
<p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout.</p> <p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout.</p>
</section> </section>
<div id="demo" class="iso-container variable-sizes"> <div id="container" class="iso-container variable-sizes">
{% for element in site.elements_ordered limit:20 %} {% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<nav id="page_nav"> <nav id="page_nav">
<a href="../pages/2.html"></a> <a href="../pages/2.html"></a>
@ -30,13 +30,13 @@ infinite_scroll: true
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.isotope({ $container.isotope({
itemSelector : '.element', itemSelector : '.element',
}); });
$demo.infinitescroll({ $container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve itemSelector : '.element', // selector for all items you'll retrieve
@ -50,7 +50,7 @@ infinite_scroll: true
}, },
// call Isotope as a callback // call Isotope as a callback
function( newElements ) { function( newElements ) {
$demo.isotope( 'appended', $( newElements ) ); $container.isotope( 'appended', $( newElements ) );
} }
); );

8
_posts/demos/2011-01-11-images.html
Unescape View File

@ -19,13 +19,13 @@ photos:
</section> </section>
<div id="demo" class="iso-container photos"> <div id="container" class="iso-container photos">
{% for photo in page.photos %} {% for photo in page.photos %}
<div class="photo"> <div class="photo">
{{ photo }} {{ photo }}
</div> </div>
{% endfor %} {% endfor %}
</div> <!-- #demo --> </div> <!-- #container -->
<nav id="page_nav"> <nav id="page_nav">
<a href="../pages/2.html"></a> <a href="../pages/2.html"></a>
@ -41,9 +41,9 @@ photos:
<script> <script>
$(function(){ $(function(){
var $demo = $('#demo'); var $container = $('#container');
$demo.imagesLoaded( function(){ $container.imagesLoaded( function(){
$(this).isotope({ $(this).isotope({
itemSelector : '.photo', itemSelector : '.photo',
}); });

6
_posts/docs/2010-12-06-filtering.mdown
Unescape View File

@ -17,7 +17,7 @@ Each item element has several identifying classes. In this case, `transition`, `
{% highlight html %} {% highlight html %}
<div id="demo" class="iso-container"> <div id="container" class="iso-container">
<div class="element transition metal">...</div> <div class="element transition metal">...</div>
<div class="element post-transition metal">...</div> <div class="element post-transition metal">...</div>
<div class="element alkali metal">...</div> <div class="element alkali metal">...</div>
@ -36,7 +36,7 @@ To show only `.metal` items, the jQuery script would be:
{% highlight javascript %} {% highlight javascript %}
$('#demo').isotope({ filter: '.metal' }); $('#container').isotope({ filter: '.metal' });
{% endhighlight %} {% endhighlight %}
@ -65,7 +65,7 @@ Here we set the filter for each link with a `data-filter` attribute. In our jQue
$('#filters a').click(function(){ $('#filters a').click(function(){
var selector = $(this).attr('data-filter'); var selector = $(this).attr('data-filter');
$('#demo').isotope({ filter: selector }); $('#container').isotope({ filter: selector });
return false; return false;
}); });

10
_posts/docs/2010-12-07-sorting.mdown
Unescape View File

@ -18,7 +18,7 @@ In our example, each item element has several data points that can be used for s
{% highlight html %} {% highlight html %}
<div id="demo"> <div id="container">
<div class="element transition metal" data-category="transition"> <div class="element transition metal" data-category="transition">
<p class="number">79</p> <p class="number">79</p>
<h3 class="symbol">Au</h3> <h3 class="symbol">Au</h3>
@ -47,7 +47,7 @@ In the example above, to get element name, we would need to get the text from th
{% highlight javascript %} {% highlight javascript %}
$('#demo').isotope({ $('#container').isotope({
getSortData : { getSortData : {
name : function ( $elem ) { name : function ( $elem ) {
return $elem.find('.name').text(); return $elem.find('.name').text();
@ -113,7 +113,7 @@ With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'
{% highlight javascript %} {% highlight javascript %}
$('#demo').isotope({ sortBy : 'symbol' }); $('#container').isotope({ sortBy : 'symbol' });
{% endhighlight %} {% endhighlight %}
@ -125,7 +125,7 @@ By default, Isotope sorts data in ascension. If our data for name is "Gold, Anti
{% highlight javascript %} {% highlight javascript %}
$('#demo').isotope({ $('#container').isotope({
sortBy : 'name', sortBy : 'name',
sortAscending : false sortAscending : false
}); });
@ -155,7 +155,7 @@ When one of these links is clicked, we can use the `href` attribute as the value
$('#sort a').click(function(){ $('#sort a').click(function(){
// get href attribute, minus the '#' // get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1); var sortName = $(this).attr('href').slice(1);
$('#demo').isotope({ sortBy : sortName }); $('#container').isotope({ sortBy : sortName });
return false; return false;
}); });

2
index.html
Unescape View File

@ -47,7 +47,7 @@ layout: nil
<li><a href="#show-all" data-filter="*" class="selected">show all</a></li> <li><a href="#show-all" data-filter="*" class="selected">show all</a></li>
<li><a href="#features" data-filter=".feature">features</a></li> <li><a href="#features" data-filter=".feature">features</a></li>
<li><a href="#docs" data-filter=".doc">docs</a></li> <li><a href="#docs" data-filter=".doc">docs</a></li>
<li><a href="#demos" data-filter=".demo">demos</a></li> <li><a href="#containers" data-filter=".demo">demos</a></li>
</ul> </ul>
</div> </div>
<div class="option-combo"> <div class="option-combo">

Write Preview
Loading…
Cancel
Save