0
|
1 |
--- |
|
2 |
title: destroy |
|
3 |
layout: default |
|
4 |
category: tests |
|
5 |
--- |
|
6 |
|
|
7 |
<style> |
|
8 |
#container { |
|
9 |
width: 80%; |
|
10 |
height: 80%; |
|
11 |
} |
|
12 |
</style> |
|
13 |
|
|
14 |
<section id="copy"> |
|
15 |
<p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p> |
|
16 |
</section> |
|
17 |
|
|
18 |
<section id="options"> |
|
19 |
<button id="init">Init Isotope instance</button> |
|
20 |
<button id="destroy">Destroy Isotope instance</button> |
|
21 |
</section> |
|
22 |
|
|
23 |
<div id="container" style="height: 600px"> |
|
24 |
{% for element in site.elements limit:20 %} |
|
25 |
{% include element-partial.html %} |
|
26 |
{% endfor %} |
|
27 |
</div> <!-- #container --> |
|
28 |
|
|
29 |
<script src="../{{ site.jquery_js }}"></script> |
|
30 |
<script src="../{{ site.isotope_js }}"></script> |
|
31 |
<script> |
|
32 |
$(function(){ |
|
33 |
|
|
34 |
var $container = $('#container'); |
|
35 |
|
|
36 |
$('#init').click(function(){ |
|
37 |
$container.isotope({ |
|
38 |
itemSelector: '.element', |
|
39 |
filter: '.metal' |
|
40 |
}); |
|
41 |
}); |
|
42 |
|
|
43 |
$('#destroy').click(function(){ |
|
44 |
$container.isotope('destroy'); |
|
45 |
}); |
|
46 |
|
|
47 |
}); |
|
48 |
</script> |