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
Split 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();
}
var $newEls = $( newEls )
// $demo.append( $newEls ).isotope( 'appendToLayout', $newEls );
$demo.isotope( 'insert', $newEls );
// $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
// $demo.isotope()
// $container.append( $newEls ).isotope( 'appendToLayout', $newEls );
$container.isotope( 'insert', $newEls );
// $container.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
// $container.isotope()
// console.log( next )
return false;
@ -22,7 +22,7 @@
newEls += fakeElement.create();
}
var $newEls = $( newEls )
$demo.append( $newEls ).isotope( 'appended', $newEls );
$container.append( $newEls ).isotope( 'appended', $newEls );
return false;
});

8
_includes/layout-change.js
Unescape View File

@ -9,15 +9,15 @@
if ( wasHorizontal !== isHorizontal ) {
// need to do some clean up for transitions and sizes
var style = isHorizontal ?
{ height: '80%', width: $demo.width() } :
{ height: '80%', width: $container.width() } :
{ width: 'auto' };
$demo.addClass('no-transition').css( style );
$container.addClass('no-transition').css( style );
setTimeout(function(){
$demo.removeClass('no-transition').isotope({ layoutMode : mode });
$container.removeClass('no-transition').isotope({ layoutMode : mode });
}, 100 )
} else {
// 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');
// var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest );
$demo.isotope({
$container.isotope({
sortBy : sortName,
sortAscending : asc
});

18
_layouts/elements.html
Unescape View File

@ -65,10 +65,10 @@
$(function(){
var $demo = $('#demo');
var $container = $('#container');
// hacky way of adding random size classes
$demo.find('.element').each(function(){
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
@ -80,7 +80,7 @@
// console.log('starting')
// console.time('initializeMe');
$demo.isotope({
$container.isotope({
itemSelector : '.element',
// layoutMode : 'fitRows',
masonry : {
@ -126,7 +126,7 @@
filterName = filterName === '.show-all' ? '*' : filterName;
// var filterTest = 'filter ' + filterName;
// console.time( filterTest );
$demo.isotope({ filter: filterName })
$container.isotope({ filter: filterName })
// console.timeEnd( filterTest );
return false;
});
@ -134,16 +134,16 @@
{% include sort-buttons.js %}
// change size of clicked element
$demo.find('.element').live('click', function(){
$container.find('.element').live('click', function(){
$(this).toggleClass('large');
// console.time('relayout');
$demo.isotope('reLayout');
$container.isotope('reLayout');
// console.timeEnd('relayout');
});
// toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){
$demo
$container
.toggleClass('variable-sizes')
.isotope('reLayout');
return false;
@ -154,12 +154,12 @@
{% include add-buttons.js %}
$('#shuffle a').click(function(){
$demo.isotope('shuffle');
$container.isotope('shuffle');
return false;
});
$('#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>
<div id="demo" class="iso-container variable-sizes">
<div id="container" class="iso-container variable-sizes">
{% assign page_position = page.page_position %}
{% for element in site.elements_ordered limit:20 offset:page_position %}
{% include element-partial.html %}
@ -27,9 +27,9 @@
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
$demo.isotope({
$container.isotope({
itemSelector : '.element',
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>
</section>
<div id="demo" class="iso-container">
<div id="container" class="iso-container">
{% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
</div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
@ -24,9 +24,9 @@ related: etc
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
$demo.isotope({
$container.isotope({
itemSelector: '.element'
});

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

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

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

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

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

@ -16,11 +16,11 @@ related: layouts
</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 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
</div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
@ -31,10 +31,10 @@ related: layouts
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
// hacky way of adding random size classes
$demo.find('.element').each(function(){
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
@ -43,7 +43,7 @@ related: layouts
}
});
$demo.isotope({
$container.isotope({
itemSelector : '.element',
masonry : {
columnWidth : 120

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

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

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

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

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

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

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

@ -18,11 +18,11 @@ related: methods
</ul>
</section>
<div id="demo" class="iso-container">
<div id="container" class="iso-container">
{% for element in site.elements_best_of limit:10 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
</div> <!-- #container -->
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
@ -34,9 +34,9 @@ related: methods
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
$demo.isotope({
$container.isotope({
itemSelector : '.element',
getSortData : {
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>
</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 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
</div> <!-- #container -->
<nav id="page_nav">
<a href="../pages/2.html"></a>
@ -30,13 +30,13 @@ infinite_scroll: true
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
$demo.isotope({
$container.isotope({
itemSelector : '.element',
});
$demo.infinitescroll({
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve
@ -50,7 +50,7 @@ infinite_scroll: true
},
// call Isotope as a callback
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>
<div id="demo" class="iso-container photos">
<div id="container" class="iso-container photos">
{% for photo in page.photos %}
<div class="photo">
{{ photo }}
</div>
{% endfor %}
</div> <!-- #demo -->
</div> <!-- #container -->
<nav id="page_nav">
<a href="../pages/2.html"></a>
@ -41,9 +41,9 @@ photos:
<script>
$(function(){
var $demo = $('#demo');
var $container = $('#container');
$demo.imagesLoaded( function(){
$container.imagesLoaded( function(){
$(this).isotope({
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 %}
<div id="demo" class="iso-container">
<div id="container" class="iso-container">
<div class="element transition metal">...</div>
<div class="element post-transition metal">...</div>
<div class="element alkali metal">...</div>
@ -36,7 +36,7 @@ To show only `.metal` items, the jQuery script would be:
{% highlight javascript %}
$('#demo').isotope({ filter: '.metal' });
$('#container').isotope({ filter: '.metal' });
{% 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(){
var selector = $(this).attr('data-filter');
$('#demo').isotope({ filter: selector });
$('#container').isotope({ filter: selector });
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 %}
<div id="demo">
<div id="container">
<div class="element transition metal" data-category="transition">
<p class="number">79</p>
<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 %}
$('#demo').isotope({
$('#container').isotope({
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
@ -113,7 +113,7 @@ With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'
{% highlight javascript %}
$('#demo').isotope({ sortBy : 'symbol' });
$('#container').isotope({ sortBy : 'symbol' });
{% endhighlight %}
@ -125,7 +125,7 @@ By default, Isotope sorts data in ascension. If our data for name is "Gold, Anti
{% highlight javascript %}
$('#demo').isotope({
$('#container').isotope({
sortBy : 'name',
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(){
// get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1);
$('#demo').isotope({ sortBy : sortName });
$('#container').isotope({ sortBy : sortName });
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="#features" data-filter=".feature">features</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>
</div>
<div class="option-combo">

Write Preview
Loading…
Cancel
Save