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

Remove all masonry doc files

pull/14/head
David DeSandro 14 years ago
parent
ee7850cd26
commit
2f7c153146
16 changed files with 0 additions and 3957 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. 196
      docs/animating-css-transitions.html
  2. 202
      docs/animating-jquery.html
  3. 181
      docs/appending.html
  4. 268
      docs/basic-multi-column.html
  5. 264
      docs/basic-single-column.html
  6. 349
      docs/css/style.css
  7. 406
      docs/filtering-hashes.html
  8. 343
      docs/filtering.html
  9. BIN
      docs/img/loader.gif
  10. 376
      docs/index.html
  11. 355
      docs/infinite-scroll.html
  12. 208
      docs/pages/2.html
  13. 190
      docs/pages/3.html
  14. 182
      docs/pages/4.html
  15. 185
      docs/pages/5.html
  16. 252
      docs/tumblelog.html

196
docs/animating-css-transitions.html
Unescape View File

@ -1,196 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Animating with CSS transitions</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<style media="screen">
#demo.masoned, #demo.masoned .box {
-webkit-transition: all .7s ease-out;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
}
</style>
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li class="selected"><a href="animating-css-transitions.html">Animating with CSS transitions</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Animating with CSS transitions</h1>
<div class="copy">
<p>Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. CSS transitions are supported by Firefox 4, Chrome 5, Safari 4, and Opera 10.5.</p>
<p> In your script, leave out the <code>animate</code> option. </p>
<pre id="code"><code><span class="keyword">$</span>(<span class="string">'#demo'</span>).molequul({ columnWidth: <span class="constant">100</span> });</code></pre>
<p>In the CSS, add transition properties. Molequul will add a class of <code>masoned</code> to the container after the first arrangement so transitions can be applied afterward.</p>
<pre><code><span class="id">#demo</span><span class="class">.masoned</span>, <span class="id">#demo</span><span class="class">.masoned .box</span> {
<span class="prop">-webkit-transition</span>: <span class="value">all .7s ease-out</span>;
<span class="prop">-moz-transition</span>: <span class="value">all .7s ease-out</span>;
<span class="prop">-o-transition</span>: <span class="value">all .7s ease-out</span>;
<span class="prop">transition</span>: <span class="value">all .7s ease-out</span>;
}</code></pre>
</div><!-- .copy -->
<div id="demo" class="wrap">
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a><br />
<a href="http://github.com/lrbabe/jquery-smartresize">smartresize jQuery event plugin</a> by Louis-Rémi Babé and <a href="http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/">Paul Irish</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({ columnWidth: 100 });
});
</script>
</body>
</html>

202
docs/animating-jquery.html
Unescape View File

@ -1,202 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Animating with jQuery</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li class="selected"><a href="animating-jquery.html">Animating with jQuery</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Animating with jQuery</h1>
<div class="copy">
<p>As of version 1.1, rearrangements can be animated when the container is resized.</p>
<pre id="code"><code><span class="keyword">$</span>(<span class="string">'#demo'</span>).molequul({
columnWidth: <span class="constant">100</span>,
animate: <span class="constant">true</span>
});</code></pre>
<p>Animation options are set with <code>animationOptions</code>. See the <a href="http://api.jquery.com/animate/#animate-properties-options">jQuery API for animate options</a> for details on available animation options.</p>
<pre><code><span class="keyword">$</span>(<span class="string">'#demo'</span>).molequul({
columnWidth: <span class="constant">100</span>,
animate: <span class="constant">true</span>,
animationOptions: {
duration: <span class="constant">750</span>,
easing: <span class="string">'linear'</span>,
queue: <span class="constant">false</span>
}
});</code></pre>
</div><!-- .copy -->
<div id="demo" class="wrap">
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a><br />
<a href="http://github.com/lrbabe/jquery-smartresize">smartresize jQuery event plugin</a> by Louis-Rémi Babé and <a href="http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/">Paul Irish</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
animate: true,
animationOptions: {
duration: 1000,
// easing: 'linear',
specialEasing: { top: 'linear'},
queue: false
}
});
});
</script>
</body>
</html>

181
docs/appending.html
Unescape View File

@ -1,181 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Appending new elements</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li class="selected"><a href="appending.html">Appending</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Appending new elements</h1>
<div class="copy">
<p>New elements can be appended to &lsquo;masoned&rsquo; containers and then arranged to the layout using the <code>appendedContent</code> option. <code>appendedContent</code> accepts the a jQuery object of the newly appended elements. In this example, each time <a href="#append_new_bricks">the button</a> is clicked, new <code>box</code> elements are created and then together made into a jQuery object. This object is first appended to the wrapping container, then the boxes are rearranged with a <code>.molequul()</code> call. Finally, using the callback function, the new boxes are dynamically styled. </p>
<p>In the click function, <code>appendedContent</code> was the only option to specify in the molequul configuration since Molequul saves all previous options. Using <code>appendedContent</code>, the Molequul script saves some processing time as it only rearranges the box(es) inside that appended container.</p>
<pre id="code"><code><span class="comment">// cache molequul wrap</span>
<span class="storage">var</span> <span class="keyword">$</span>wall <span class="keyword">=</span> <span class="keyword">$</span>(<span class="string">'#demo'</span>).find(<span class="string">'.wrap'</span>);
<span class="keyword">$</span>wall.molequul({
columnWidth: <span class="constant">100</span>,
itemSelector: <span class="string">'.box'</span>
});
<span class="keyword">$</span>(<span class="string">'#append_new_bricks'</span>).click(<span class="storage">function</span>() {
<span class="storage">var</span>
newEls <span class="keyword">=</span> [],
elCount <span class="keyword">=</span> <span class="keyword">Math</span>.random()*<span class="constant">4</span>
;
<span class="keyword">for</span> (<span class="storage">var</span> i=0; i < elCount; i++ ) {
<span class="storage">var</span>
colClass <span class="keyword">=</span> <span class="string">'col'</span> <span class="keyword">+</span> <span class="keyword">Math</span>.<span class="storage">ceil</span>( <span class="keyword">Math</span>.<span class="stroage">random</span>()*<span class="constant">3</span> ),
<span class="comment">// create new box</span>
<span class="keyword">$</span>box <span class="keyword">=</span> <span class="keyword">$</span>( <span class="keyword">document</span>.<span class="storage">createElement</span>(<span class="string">'div'</span>) )
.addClass(<span class="string">'box '</span> <span class="keyword">+</span> colClass).text( randoLoremText() )
;
<span class="comment">// add box DOM node to array of new elements</span>
newEls.<span class="storage">push</span>( <span class="keyword">$</span>box[<span class="constant">0</span>] );
}
<span class="comment">// create jQuery object</span>
<span class="keyword">$</span>boxes <span class="keyword">=</span> <span class="keyword">$</span>( newEls );
<span class="keyword">$</span>wall
<span class="comment">// append new elements</span>
.append( <span class="keyword">$</span>boxes )
<span class="comment">// arrange new elements</span>
.molequul( { appendedContent: <span class="keyword">$</span>boxes } ,
<span class="comment">// using a callback to style new elements</span>
<span class="storage">function</span>() {
<span class="keyword">$</span>(<span class="constant">this</span>).css({background: <span class="string">'#222'</span>, color: <span class="string">'#EEE'</span> });
}
)
;
}</code></pre>
</div><!-- .copy -->
<div id="demo">
<p><button id="append_new_bricks">Append new bricks</button></p>
<div class="wrap">
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
</div> <!-- .wrap -->
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script src="js/rando-lorem-text.js"></script>
<script>
$(function(){
// cache molequul wrap
var $wall = $('#demo').find('.wrap');
$wall.molequul({
columnWidth: 100,
itemSelector: '.box'
});
$('#append_new_bricks').click(function() {
var
newEls = [],
elCount = Math.random()*4
;
for (var i=0; i < elCount; i++ ) {
var
colClass = 'col' + Math.ceil( Math.random()*3 ),
// create new box
$box = $( document.createElement('div') ).addClass('box ' + colClass).text( randoLoremText() )
;
// add box DOM node to array of new elements
newEls.push( $box[0] );
}
// create jQuery object
$boxes = $( newEls );
$wall
// append new elements
.append( $boxes )
// arrange new elements
.molequul( { appendedContent: $boxes } ,
// using a callback to style new elements
function() {
$(this).css({background: '#222', color: '#EEE' });
}
)
;
});
});
</script>
</body>
</html>

268
docs/basic-multi-column.html
Unescape View File

@ -1,268 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Basic multi-column example</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li class="selected"><a href="basic-multi-column.html">Basic multi-column</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Basic multi-column example</h1>
<div class="copy">
<p>This example demonstrates the basic effect of jQuery Molequul. All &lsquo;bricks&rsquo; have outerWidths (width + padding + border + margin) that are multiples of 100 pixels. <code>columnWidth</code> is set to <code>100</code>.</p>
<pre id="code"><code><span class="keyword">$</span>(<span class="string">'#demo'</span>).molequul({
columnWidth: <span class="constant">100</span>,
itemSelector: <span class="string">'.box'</span>
});</code></pre>
<p><code>itemSelector</code> is specified to rearrange all <code>box</code> elements, including the ones inside another <code>div</code>. </p>
<pre><code><span class="storage">&lt;div id=<span class="string">"demo"</span> class=<span class="string">"wrap"</span>&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col2"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col3"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col2"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col2"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;/div&gt;</span> <span class="comment">&lt;!-- #demo --&gt;</span></code></pre>
</div><!-- .copy -->
<div id="demo" class="wrap">
<div class="box col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<h2>This is the box with no width set</h2>
</div>
<div class="box col1">
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
itemSelector: '.box'
});
});
</script>
</body>
</html>

264
docs/basic-single-column.html
Unescape View File

@ -1,264 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Basic single-column example</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li class="selected"><a href="basic-single-column.html">Basic single-column</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Basic single-column example</h1>
<div class="copy">
<p>This example demonstrates the basic effect of jQuery Molequul. All &lsquo;bricks&rsquo; have the same width, so <code>singleMode</code> is set to <code>true</code>.</p>
<pre id="code"><code><span class="keyword">$</span>(<span class="string">'#demo'</span>).molequul({
singleMode: <span class="constant">true</span>,
itemSelector: <span class="string">'.box'</span>
});</code></pre>
<p><code>itemSelector</code> is specified to rearrange all <code>box</code> elements, including the ones inside another <code>div</code>. </p>
<pre><code><span class="storage">&lt;div id=<span class="string">"demo"</span> class=<span class="string">"wrap"</span>&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;div class=<span class="string">"box col1"</span>&gt;</span>...<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;/div&gt;</span>
<span class="storage">&lt;/div&gt;</span> <span class="comment">&lt;!-- #demo --&gt;</span></code></pre>
</div><!-- .copy -->
<div id="demo" class="wrap">
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col1">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col1">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
singleMode: true,
itemSelector: '.box'
});
});
</script>
</body>
</html>

349
docs/css/style.css
Unescape View File

@ -1,349 +0,0 @@
/* Base styles*/
* {
margin: 0;
padding: 0;
}
body {
font: 13px 'Helvetica Neue', Arial, sans-serif;
background: #D8D5D2;
color: #222;
}
a {
color: #A2C;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #D26;
}
h1, h2 {
font-weight:100;
}
h1 {
font-size: 36px;
}
h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
/**** #site-nav ****/
#site-nav {
position: fixed;
width: 180px;
padding: 0 10px;
height: 100%;
overflow-y: auto;
}
#site-nav h1 {
font-weight: 600;
font-size: 18px;
margin-bottom: 0.3em;
padding-top: 10px;
}
#site-nav ul {
list-style: none;
padding-left: 0;
font-size: 12px;
}
#site-nav li a {
display: block;
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#site-nav li.selected a {
background: #C8C5C2;
color: #FFF;
}
#site-nav li ul {
margin-bottom: 0;
margin-left: 10px;
}
#site-nav li li {
font-size: 11px;
}
#site-nav li.selected li a {
padding: 3px;
background: none;
}
#site-nav li.selected li a:hover {
color: #D26;
}
/**** Content ****/
#content {
padding: 10px 10px 10px 210px;
}
.copy h2 {
border-top: 2px solid #FFF;
padding-top: 10px;
clear: both;
}
a img {
border: none;
}
pre, code {
font-family: Monaco, monospace;
font-size: 12px;
background: #111;
color: #F5F5F5;
}
p code {
padding: 1px 3px;
}
pre {
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
pre .string { color: #3C3;}
pre .constant { color: #66F;}
pre .property { color: #A00;}
pre .keyword { color: #E66;}
pre .storage { color: #FC8;}
pre .comment { color: #666; font-style: italic;}
pre .class { color: #A85;}
pre .prop { color: #CB8; }
pre .value { color: #FFA; }
pre .id { color: #9AB;}
pre .support {color: #A9A;}
ul, ol { padding-left: 1.3em;}
.hidden { display: none; }
.copy {
width: 600px;
line-height: 1.55em;
}
blockquote {
margin: 0;
font: italic 18px Georgia, serif;
}
dt {
font-weight: bold;
font-size: 14px;
}
dd + dt {
margin-top: 0.5em;
}
dd {
margin-left: 1.0em;
}
button {
-webkit-appearance: push-button;
}
#footer {
clear: both;
margin: 20px 0px;
border-top: 1px solid #BBB;
padding-top: 10px;
line-height: 30px;
font-size: 95%;
}
.license-copy {
font-size: 85%;
}
/**** Molequul CSS ****/
.wrap {
background: #FFF;
border: 0px solid #456;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
margin: 5px;
padding: 5px;
background: #D8D5D2;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }
.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }
/**** Primer comparison ****/
#comparison {
overflow: auto;
}
#comparison .example {
width: 420px;
float: left;
margin-right: 20px;
}
#comparison .box h5 {
float: left;
margin-bottom: 0;
font-size: 30px;
margin-right: 4px;
line-height: 28px;
font-weight: bold;
color: #FFF;
}
/* Magazine page */
#tumblelog {
background: #FFF;
padding: 1.0em;
}
#tumblelog .story {
margin: 10px;
border-top: 4px solid #DCB;
padding-top: 10px;
background: #FFF;
float: left;
}
#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}
#tumblelog .col1 { width: 220px;}
#tumblelog .col2 { width: 460px;}
#tumblelog .col3 { width: 700px;}
#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
max-width: none;
}
/* Infinite Scroll loader */
#infscr-loading {
z-index: 5000;
position: fixed;
left: 40%;
bottom: 40px;
width: 200px;
height: 100px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/**** Filtering nav ****/
.box.black,
#filtering-nav .black {
background-color: #111;
color: #FFF;
}
.box.red,
#filtering-nav .red {
background-color: #D26;
color: #FFF;
}
#filtering-nav .all { background-color: #FFF;}
#filtering-nav {
padding: 0;
margin: 2em 0;
}
#filtering-nav li {
list-style: none;
float: left;
}
#filtering-nav li a {
display: block;
padding: .5em 1.0em;
margin-right: 5px;
background-image: -moz-linear-gradient(-90deg, hsla(0,0%,100%,.4) , hsla(0,0%,100%,.0) );
background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( hsla(0,0%,100%,.4) ), to( hsla(0,0%,100%,.0) ));
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
-moz-box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
-o-box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
}
#filtering-nav li a:active {
background-image: -moz-linear-gradient(-90deg, hsla(0,0%,0%,.0) , hsla(0,0%,0%,.2) );
background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( hsla(0,0%,0%,.0) ), to( hsla(0,0%,0%,.2) ));
-webkit-box-shadow: inset 0 1px 8px hsla(0,0%,0%,.6);
-moz-box-shadow: inset 0 1px 8px hsla(0,0%,0%,.6);
-o-box-shadow: inset 0 1px 8px hsla(0,0%,0%,.6);
box-shadow: inset 0 1px 8px hsla(0,0%,0%,.6);
}
/**** Clearfixes ****/
.wrap:after,
#tumblelog:after,
#filtering-nav:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

406
docs/filtering-hashes.html
Unescape View File

@ -1,406 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Filtering hashes</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<style>
.wrap { overflow: hidden;}
</style>
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li class="selected"><a href="filtering-hashes.html#red">Filtering hashes</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Filtering hashes</h1>
<div class="copy">
<p>This example builds on the filtering demo, taking into consideration URL hashes. This way, users can enter in a URL with a hash and be presented with content that is automatically filtered. For example, in these docs, the link to this page includes <code>#red</code>. On <code>$(window).load</code> the hash tag is check to see if it matches the colors used to filter the elements, red, gray, and black. If there is a match, the elements are filtered and then the layout is arranged.</p>
<pre id="code"><code><span class="storage">var</span>
speed <span class="keyword">=</span> <span class="constant">1000</span>, <span class="comment">// animation speed</span>
<span class="keyword">$</span>wall <span class="keyword">=</span> <span class="keyword">$</span>(<span class="string">'#demo'</span>).find(<span class="string">'.wrap'</span>),
molequulOptions <span class="keyword">=</span> { <span class="comment">// initial molequul options</span>
columnWidth: <span class="constant">100</span>,
itemSelector: <span class="string">'.box:not(.invis)'</span>,
animate: <span class="constant">true</span>,
animationOptions: {
duration: speed,
queue: <span class="constant">false</span>
}
}
;
<span class="comment">// run on window.load so we can capture any incoming hashes</span>
<span class="keyword">$</span>(<span class="id">window</span>).load(<span class="storage">function</span>(){
<span class="comment">// run molequul on start-up to capture all the boxes we'll need</span>
<span class="keyword">$</span>wall.molequul(molequulOptions);
<span class="keyword">if</span> ( <span class="id">window</span>.<span class="keyword">location</span>.<span class="keyword">hash</span> ) {
<span class="comment">// get rid of the '#' from the hash</span>
<span class="storage">var</span> possibleFilterClass <span class="keyword">=</span> <span class="id">window</span>.<span class="keyword">location</span>.<span class="keyword">hash</span>.replace(<span class="string">'#'</span>, <span class="string">''</span>);
<span class="keyword">switch</span> (possibleFilterClass) {
<span class="comment">// if the hash matches the following words</span>
<span class="keyword">case</span> <span class="string">'red'</span> : <span class="keyword">case</span> <span class="string">'gray'</span> : <span class="keyword">case</span> <span class="string">'black'</span> :
<span class="comment">// set molequul options animate to false</span>
molequulOptions.animate <span class="keyword">=</span> false;
<span class="comment">// hide boxes that don't match the filter class</span>
<span class="keyword">$</span>wall.children().not(<span class="string">'.'</span><span class="keyword">+</span>possibleFilterClass)
.toggleClass(<span class="string">'invis'</span>).hide();
<span class="comment">// run molequul again, this time with the necessary stuff hidden</span>
<span class="keyword">$</span>wall.molequul(molequulOptions);
<span class="keyword">break</span>;
}
}
});
<span class="keyword">$</span>(<span class="string">'#filtering-nav a'</span>).click(<span class="storage">function</span>(){
<span class="storage">var</span>
color <span class="keyword">=</span> <span class="keyword">$</span>(<span class="constant">this</span>).attr(<span class="string">'class'</span>),
filterClass <span class="keyword">=</span> <span class="string">'.'</span> <span class="keyword">+</span> color;
;
<span class="keyword">if</span> (filterClass <span class="keyword">==</span> <span class="string">'.all'</span>) {
<span class="comment">// show all hidden boxes</span>
<span class="keyword">$</span>wall.children(<span class="string">'.invis'</span>)
.toggleClass(<span class="string">'invis'</span>).fadeIn(speed);
} <span class="keyword">else</span> {
<span class="comment">// hide visible boxes </span>
<span class="keyword">$</span>wall.children().not(filterClass).not(<span class="string">'.invis'</span>)
.toggleClass(<span class="string">'invis'</span>).fadeOut(speed);
<span class="comment">// show hidden boxes</span>
<span class="keyword">$</span>wall.children(filterClass<span class="keyword">+</span>'.invis')
.toggleClass(<span class="string">'invis'</span>).fadeIn(speed);
}
<span class="keyword">$</span>wall.molequul({ animate: <span class="constant">true</span> });
<span class="comment">// set hash in URL</span>
<span class="id">window</span>.<span class="keyword">location</span>.<span class="keyword">hash</span> <span class="keyword">=</span> color;
<span class="keyword">return</span> <span class="constant">false</span>;
});</code></pre>
</div><!-- .copy -->
<div id="demo">
<ul id="filtering-nav">
<li><a class="gray" href="#gray">Gray</a></li>
<li><a class="red" href="#red">Red</a></li>
<li><a class="black" href="#black">Black</a></li>
<li><a class="all" href="#all">All</a></li>
</ul>
<div class="wrap">
<div class="box col2 gray">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 red">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 black">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box gray">
<h2>This is the box with no width set</h2>
</div>
<div class="box col1 red">
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1 gray">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2 gray">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 black">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2 gray">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3 black">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col2 gray">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2 black">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 gray">
<p>Morbi purus libero</p>
</div>
<div class="box col1 black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1 gray">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 black">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2 gray">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 gray">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 black">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2 red">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 red">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 black">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2 black">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1 red">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1 gray">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1 red">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box col1 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1 gray">
<h2>Sit amet mi ullamcorper vehicula adipiscing varius</h2>
</div>
<div class="box col1 gray">
<p>Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col3 red">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2 gray">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 red">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 black">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3 gray">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2 gray">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- .wrap -->
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
var
speed = 1000, // animation speed
$wall = $('#demo').find('.wrap'),
molequulOptions = { // initial molequul options
columnWidth: 100,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
duration: speed,
queue: false
}
}
;
// run on window.load so we can capture any incoming hashes
$(window).load(function(){
// run molequul on start-up to capture all the boxes we'll need
$wall.molequul(molequulOptions);
if ( window.location.hash ) {
// get rid of the '#' from the hash
var possibleFilterClass = window.location.hash.replace('#', '');
switch (possibleFilterClass) {
// if the hash matches the following words
case 'red' : case 'gray' : case 'black' :
// set molequul options animate to false
molequulOptions.animate = false;
// hide boxes that don't match the filter class
$wall.children().not('.'+possibleFilterClass)
.toggleClass('invis').hide();
// run molequul again, this time with the necessary stuff hidden
$wall.molequul(molequulOptions);
break;
}
}
});
$('#filtering-nav a').click(function(){
var
color = $(this).attr('class'),
filterClass = '.' + color;
;
if(filterClass=='.all') {
// show all hidden boxes
$wall.children('.invis')
.toggleClass('invis').fadeIn(speed);
} else {
// hide visible boxes
$wall.children().not(filterClass).not('.invis')
.toggleClass('invis').fadeOut(speed);
// show hidden boxes
$wall.children(filterClass+'.invis')
.toggleClass('invis').fadeIn(speed);
}
$wall.molequul({ animate: true });
// set hash in URL
window.location.hash = color;
return false;
});
});
</script>
</body>
</html>

343
docs/filtering.html
Unescape View File

@ -1,343 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Filtering</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<style>
.wrap { overflow: hidden;}
</style>
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li class="selected"><a href="filtering.html">Filtering</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Filtering</h1>
<div class="copy">
<p>Filtering is supported by Molequul since v1.2. This example demonstrates how to show, hide, and rearrange visible items, using some basic logic. Each control button has a class that matches a class of arrangeable elements: <code>gray</code>, <code>red</code>, and <code>black</code>. When one of these buttons is clicked, the arrangeable elements that have a matching class are shown, and the elements that do not match are hidden. To keep track of what's visible, a class of <code>invis</code> is added and removed to each element. In this example, the molequul settings have <code>itemSelector</code> as <code><span class="string">'.box:not(.invis)'</span></code>, so only visible elements will be arranged in the layout. After the proper elements are hidden and the others shown, <code>.molequul()</code> is called and the layout is rearranged.</p>
<pre id="code"><code><span class="storage">var</span>
speed <span class="storage">=</span> <span class="constant">1000</span>, <span class="comment">// animation speed</span>
<span class="keyword">$</span>wall <span class="keyword">=</span> <span class="keyword">$</span>(<span class="string">'#demo'</span>).find(<span class="string">'.wrap'</span>)
;
<span class="keyword">$</span>wall.molequul({
columnWidth: <span class="constant">100</span>,
<span class="comment">// only apply molequul layout to visible elements</span>
itemSelector: <span class="string">'.box:not(.invis)'</span>,
animate: <span class="constant">true</span>,
animationOptions: {
duration: speed,
queue: <span class="constant">false</span>
}
});
<span class="keyword">$</span>(<span class="string">'#filtering-nav a'</span>).click(function(){
<span class="storage">var</span> colorClass <span class="storage">=</span> <span class="string">'.'</span> <span class="storage">+</span> <span class="keyword">$</span>(<span class="constant">this</span>).attr(<span class="string">'class'</span>);
<span class="keyword">if</span>(colorClass<span class="storage">==</span><span class="string">'.all'</span>) {
<span class="comment">// show all hidden boxes</span>
<span class="keyword">$</span>wall.children(<span class="string">'.invis'</span>)
.toggleClass(<span class="string">'invis'</span>).fadeIn(speed);
} <span class="keyword">else</span> {
<span class="comment">// hide visible boxes </span>
<span class="keyword">$</span>wall.children().not(colorClass).not(<span class="string">'.invis'</span>)
.toggleClass(<span class="string">'invis'</span>).fadeOut(speed);
<span class="comment">// show hidden boxes</span>
<span class="keyword">$</span>wall.children(colorClass<span class="storage">+</span><span class="string">'.invis'</span>)
.toggleClass(<span class="string">'invis'</span>).fadeIn(speed);
}
<span class="keyword">$</span>wall.molequul();
<span class="keyword">return</span> <span class="constant">false</span>;
});</code></pre>
</div><!-- .copy -->
<div id="demo">
<ul id="filtering-nav">
<li><a class="gray" href="#gray">Gray</a></li>
<li><a class="red" href="#red">Red</a></li>
<li><a class="black" href="#black">Black</a></li>
<li><a class="all" href="#all">All</a></li>
</ul>
<div class="wrap">
<div class="box col2 gray">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 red">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 black">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box gray">
<h2>This is the box with no width set</h2>
</div>
<div class="box col1 red">
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1 gray">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2 gray">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 black">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2 gray">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3 black">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col2 gray">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2 black">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 gray">
<p>Morbi purus libero</p>
</div>
<div class="box col1 black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1 gray">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 black">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2 gray">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 gray">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 black">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2 red">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1 red">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 black">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2 black">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1 red">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1 gray">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 red">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1 red">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box col1 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1 gray">
<h2>Sit amet mi ullamcorper vehicula adipiscing varius</h2>
</div>
<div class="box col1 gray">
<p>Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col3 red">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2 gray">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 red">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1 black">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3 gray">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1 black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1 black">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1 red">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2 gray">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- .wrap -->
</div> <!-- #demo -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
var
speed = 1000, // animation speed
$wall = $('#demo').find('.wrap')
;
$wall.molequul({
columnWidth: 100,
// only apply molequul layout to visible elements
selector: '.box',
animate: true,
animationOptions: {
duration: speed,
queue: false
}
});
$('#filtering-nav a').click(function(){
console.log('click')
var className = $(this).attr('class'),
filterSelector = className === 'all' ? '*' : '.' + className;
$wall.molequul({ filter: filterSelector });
return false;
});
});
</script>
</body>
</html>

BIN
docs/img/loader.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

376
docs/index.html
Unescape View File

@ -1,376 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Primer</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li class="selected"><a href=".">Primer</a>
<ul>
<li><a href="#comparison">Comparison Example</a></li>
<li><a href="#min-config">Minimum recommended configuration</a></li>
<li><a href="#options">Plugin options</a></li>
<li><a href="#code-repository">Code repository</a></li>
<li><a href="#resizing">Window resizing</a></li>
<li><a href="#images">Handling images &amp; other media</a></li>
<li><a href="#anchor-links">Resolving anchor links</a></li>
<li><a href="#inthewild">Examples in the wild</a></li>
<li><a href="#changelog">Changelog</a></li>
<li><a href="#acknowledgments">Acknowledgments</a></li>
<li><a href="#license">License</a></li>
</ul>
</li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Primer</h1>
<div class="copy">
<p>Molequul is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Molequul arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.</p>
</div><!-- .copy -->
<div id="comparison">
<h2>Comparison Example</h2>
<div class="example">
<h3>CSS Floats</h3>
<div id="primary" class="wrap">
<div class="box col1">
<h5>1</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
</div>
<div class="box col2">
<h5>2</h5>
<p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
</div>
<div class="box col1">
<h5>3</h5>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula. </p>
</div>
<div class="box col1">
<h5>4</h5>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
</div>
<div class="box col1">
<h5>5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
</div>
<div class="box col1">
<h5>6</h5>
<p>Cadipiscing in, lacinia vel, tellus. </p>
</div>
<div class="box col1">
<h5>7</h5>
<p>Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col3">
<h5>8</h5>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque. </p>
</div>
<div class="box col2">
<h5>9</h5>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col1">
<h5>10</h5>
<p>Etiam pellen tesque mauris ut lectus.</p>
</div>
<div class="box col1">
<h5>11</h5>
<p>Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.</p>
</div>
<div class="box col1">
<h5>12</h5>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div> <!-- /#primary.wrap -->
</div>
<div class="example">
<h3>Molequul</h3>
<div id="secondary" class="wrap">
<div class="box col1">
<h5>1</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
</div>
<div class="box col2">
<h5>2</h5>
<p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
</div>
<div class="box col1">
<h5>3</h5>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula. </p>
</div>
<div class="box col1">
<h5>4</h5>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
</div>
<div class="box col1">
<h5>5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
</div>
<div class="box col1">
<h5>6</h5>
<p>Cadipiscing in, lacinia vel, tellus. </p>
</div>
<div class="box col1">
<h5>7</h5>
<p>Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col3">
<h5>8</h5>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque. </p>
</div>
<div class="box col2">
<h5>9</h5>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col1">
<h5>10</h5>
<p>Etiam pellen tesque mauris ut lectus.</p>
</div>
<div class="box col1">
<h5>11</h5>
<p>Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.</p>
</div>
<div class="box col1">
<h5>12</h5>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div> <!-- /#secondary.wrap -->
</div>
</div> <!-- #comparison -->
<div class="copy">
<h2 id="min-config">Minimum recommended configuration</h2>
<p>Configuring Molequul is fairly easy. Simply call the <code>.molequul()</code> method on the container element. Depending on the layout, you&rsquo;ll most likely need to specify one option.</p>
<p>For layouts with elements that span multiple widths, like the <a href="basic-multi-column.html">basic multi-column example</a>:</p>
<pre><code><span class="keyword">$</span>(<span class="string">'#wrapper'</span>).molequul({ columnWidth: <span class="constant">200</span> });</code></pre>
<p>For layouts with elements that span the same width, like the <a href="basic-single-column.html">basic single-column example</a>:</p>
<pre><code><span class="keyword">$</span>(<span class="string">'#wrapper'</span>).molequul({ singleMode: <span class="constant">true</span> });</code></pre>
<p>No need to worry about how many columns, or width of gutters, or how big the container is. Thanks to the wonders of jQuery’s <code>outerWidth()</code> and <code>innerWidth()</code> methods, Molequul appropriately accounts for the space of any margin, padding, and border-width set with CSS.</p>
<p>This plugin is designed to progressively enhance the layout, so &lsquo;brick&rsquo; elements should be floated if JavaScript is disabled. Floating also ensures that the bricks width will be measured correctly.</p>
<h2 id="options">Plugin options</h2>
<pre><code><span class="keyword">$</span>(<span class="string">'#wrapper'</span>).molequul({
singleMode: <span class="constant">false</span>,
<span class="comment">// Disables measuring the width of each floated element.
// Set to true if floated elements have the same width.
// default: false</span>
columnWidth: <span class="constant">240</span>,
<span class="comment">// Width in pixels of 1 column of your grid.
// default: outer width of the first floated element.</span>
itemSelector: <span class="string">'.box:visible'</span>,
<span class="comment">// Additional selector to specify which elements inside
// the wrapping element will be rearranged.
// Required for Infinite Scroll with window resizing.</span>
resizeable: <span class="constant">true</span>,
<span class="comment">// Binds a Molequul call to window resizes
// so layout appears fluid.
// default: true</span>
animate: <span class="constant">true</span>,
<span class="comment">// Animates layout rearrangements.
// default: false</span>
animationOptions: {},
<span class="comment">// A map of options for animation.</span>
appendedContent: <span class="keyword">$</span>(<span class="string">'.new_content'</span>),
<span class="comment">// Additional container element for appended content.
// Useful for Infinite Scroll integration.</span>
saveOptions: <span class="constant">true</span>,
<span class="comment">// Molequul will use the options from previous Molequul
// calls by default, so you only have to enter in options once
// default: true</span>
}, <span class="storage">function</span>() {}
<span class="comment">// Optional callback.
// 'this' will refer to the applicable elements Molequul just rearranged</span>
);</code></pre>
<h2 id="code-repository">Code repository</h2>
<p>This project lives on GitHub at <a href="http://github.com/desandro/molequul">github.com/desandro/molequul</a>, where you can follow progress, download all this documentation, grab the latest version of the script, or fork this project and make it better yourself.</p>
<p>There you can find an <a href="http://github.com/desandro/molequul/issues">issue tracker</a> where you can look through other people&rsquo;s <a href="http://github.com/desandro/molequul/issues/closed">resolved issues</a> or submit a new one for yourself. If you&rsquo;re still having trouble, try <a href="http://wiki.github.com/desandro/molequul/">looking over the FAQ</a>.</p>
<h2 id="resizing">Window resizing</h2>
<p>By default, Molequul binds a call to the browser window for resizing. But the rearrangement script is triggered only when the layout adds or loses a column, so you don&rsquo;t have to worry about Molequul slowing down window resizes, or with fixed layouts.</p>
<h2 id="images">Handling images &amp; other media</h2>
<p>Since Molequul measures the height of the elements when placing them, you will need to account for images and other media that haven&rsquo;t loaded yet. For images, the best method is to specify the width and height of images inline.</p>
<pre><code><span class="storage">&lt;img src=<span class="string">"img_file.jpg"</span> width=<span class="string">"280"</span> height=<span class="string">"160"</span> /&gt;</span></code></pre>
<p>If you&rsquo;re using a PHP-based CMS, you can use the <a href="http://php.net/manual/en/function.getimagesize.php">getimagesize</a> function.</p>
<p>If this is not possible or if you&rsquo;re dealing with @font-face fonts, another option is to call Molequul after all media has loaded. This is done by calling the function inside of <code>$(window).load()</code> instead of <code>$(document).ready()</code>.</p>
<pre><code><span class="keyword">$</span>(<span class="support">window</span>).<span class="keyword">load</span>(<span class="storage">function</span>(){
<span class="keyword">$</span>(<span class="string">'#wrapper'</span>).molequul({ columnWidth: <span class="constant">200</span> });
});</code></pre>
<h2 id="anchor-links">Resolving anchor links</h2>
<p>Since Molequul relies on absolute positioning, any anchor links that occur within or after the wrapping element will not work when the page first loads. The following script is one solution.</p>
<pre><code><span class="keyword">$</span>(<span class="support">window</span>).<span class="keyword">load</span>(<span class="storage">function</span>(){
<span class="keyword">if</span> ( <span class="keyword">window</span>.<span class="keyword">location</span>.<span class="keyword">hash</span> ) {
<span class="storage">var</span> destination <span class="keyword">=</span> <span class="keyword">$</span>( <span class="keyword">window</span>.<span class="keyword">location</span>.<span class="keyword">hash</span> ).offset().<span class="keyword">top</span>;
<span class="keyword">$</span>(<span class="string">'html:not(:animated),body:not(:animated)'</span>).scrollTop( destination );
}
});</code></pre>
<p>This will set the window of the document to the appropriate place. These couple lines were taken from <a href="http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/">Cedric Dugas’s anchorAnything.</a></p>
<h2 id="inthewild">Examples in the wild</h2>
<p>In addition to the examples below, see <a href="http://delicious.com/desandro/jquerymolequul">delicious links tagged with jquerymolequul</a> and <a href="http://emberapp.com/desandro/collections/jquery-molequul">jQuery Molequul Collection on Ember for screenshots</a>.</p>
<ul>
<li><a href="http://bygonebureau.com/">The Bygone Bureau</a></li>
<li><a href="http://thoughtandtheory.com/collection/">Thought &amp; Theory - Collection</a></li>
<li><a href="http://safe.tumblr.com/theme/preview/8951">Scaffold Tumblr Theme by Mike Harding</a></li>
<li><a href="http://alpha.patterntap.com">Pattern Tap</a></li>
<li><a href="http://www.puma.com/running/media">PUMA Running | Media</a></li>
<li><a href="http://veerle.duoh.com/inspiration">The Inspiration Stream | Veerle's blog 3.0</a></li>
<li><a href="http://thomasmatthews.com/index.php/portfolio/print/">thomas.matthews</a></li>
<li><a href="http://rathersplendid.net/">Rather Splendid</a></li>
<li><a href="http://chromeography.com">Chromeography</a></li>
</ul>
<h2 id="changelog">Changelog</h2>
<dl>
<dt>v1.3 3 Sep 2010</dt>
<dd>Revamped <code>appendedContent</code> to work with container elements. Plays nice with latest Infinite Scroll.</dd>
<dd>Revised layout for documentation to allow for more pages.</dd>
<dt>v1.2 12 Jun 2010</dt>
<dd>Support for filtering added</dd>
<dt>v1.1: 29 Apr 2010</dt>
<dd>Add animation</dd>
<dt>v1.0: 7 Dec 2009</dt>
<dd>Multi-column width support</dd>
<dd>Appending elements and Infinite Scroll support</dd>
<dd>Less obstrusive layout. No inserting additional markup.</dd>
<dd>Automatically binds event to window resizing</dd>
<dt>v0.4: 14 Jun 2009</dt>
<dd>Better fluid rearrangement support</dd>
<dt>v0.1: Feb 2009</dt>
<dd>Original release</dd>
</dl>
<h2 id="acknowledgments">Acknowledgments</h2>
<ul>
<li><a href="http://paulirish.com">Paul Irish</a> for his <a href="http://www.infinite-scroll.com">Infinite Scroll</a> plugin, which served as a template I used to produce a plugin of my own. The <code>appendedContent</code> option was design to work specifically with Infinite Scroll. Infinite Scroll is packaged with these docs.</li>
<li>Louis-Rémi Babé and Paul Irish for the <a href="http://github.com/lrbabe/jquery-smartresize">jQuery SmartResize plugin</a>. This adds a special <em>smartresize</em> event to jQuery, so window resize events do not have to be executed on every frame. This plugin is used within jQuery Molequul.</li>
</ul>
<h2 id="license">License</h2>
<p>jQuery Molequul is licensed under the MIT license, just like <a href="http://jquery.org/license">jQuery itself.</a> It may be used for personal and commercial applications.</p>
<div class="license-copy">
<h3>The MIT License</h3>
<p>Copyright &copy; 2010 David DeSandro</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</div>
</div> <!-- .copy -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#secondary').molequul({columnWidth: 100});
});
</script>
</body>
</html>

355
docs/infinite-scroll.html
Unescape View File

@ -1,355 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Infinite Scroll</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li><a href="tumblelog.html">Tumblelog</a></li>
<li><a href="appending.html">Appending</a></li>
<li class="selected"><a href="infinite-scroll.html">Infinite Scroll</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#images">Image and Infinite Scroll</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Infinite Scroll</h1>
<div class="copy">
<p>Molequul integrates well with auto-paging scripts like <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by <a href="http://paulirish.com">Paul Irish</a>. Using the <code>appendedContent</code> option, Molequul will only re-position the newly appended elements, and skip over all the previous elements that are already in their proper position, thus saving precious milliseconds of page load time.</p>
<p>Setting up the Molequul call is just the same as normally would be. Since this layout uses both Infinite Scroll and resizable, <code>itemSelector</code> is recommended.</p>
<pre><code><span class="storage">var</span> <span class="keyword">$</span>wall <span class="keyword">= $</span>(<span class="string">'#demo'</span>);
<span class="keyword">$</span>wall.molequul({
columnWidth: <span class="constant">100</span>,
itemSelector: <span class="string">'.box:visible'</span>
});</code></pre>
<p>In the Infinite Scroll configuration, call Molequul as a callback. Infinite Scroll provides the newly loaded elements as an argument, <code>newElements</code> in the example code. As this argument is an array of the DOM nodes, it needs to be passed in as a jQuery object to be used for the value of <code>appendedContent</code>.</p>
<pre id="code"><code><span class="keyword">$</span>wall.infinitescroll({
navSelector : <span class="string">'#page_nav'</span>, <span class="comment">// selector for the paged navigation </span>
nextSelector : <span class="string">'#page_nav a'</span>, <span class="comment">// selector for the NEXT link (to page 2)</span>
itemSelector : <span class="string">'.box'</span>, <span class="comment">// selector for all items you'll retrieve</span>
loadingImg : <span class="string">'img/loader.gif'</span>,
donetext : <span class="string">'No more pages to load.'</span>,
debug: <span class="constant">false</span>,
errorCallback: <span class="storage">function</span>() {
<span class="comment">// fade out the error message after 2 seconds</span>
<span class="keyword">$</span>(<span class="string">'#infscr-loading'</span>).animate({opacity: .<span class="constant">8</span>},<span class="constant">2000</span>).fadeOut(<span class="string">'normal'</span>);
}
},
<span class="comment">// call molequul as a callback</span>
<span class="storage">function</span>( newElements ) {
<span class="keyword">$</span>(<span class="constant">this</span>).molequul({ appendedContent: <span class="keyword">$</span>( newElements ) });
}
);</code></pre>
<h2 id="images">Images and Infinite Scroll (a.k.a The Tumblr Issue)</h2>
<p><a href="./#images">As recommended in the primer,</a> the best solution to handle images is to have the size attributes defined in the <code>img</code> tag, especially when using Infinite Scroll. This is the solution employed in the example below.</p>
<p>Of course, this is not a viable option in some CMSs, most notably <a href="http://tumblr.com">Tumblr</a>. In this situation, Molequul needs to be called after the newly-appended images are fully loaded. This is done by delaying the Molequul callback.</p>
<pre><code><span class="comment">// call molequul as a callback, after 1000 milliseconds</span>
<span class="storage">function</span>( newElements ) {
setTimeout(<span class="storage">function</span>() {
<span class="keyword">$</span>wall.molequul({ appendedContent: <span class="keyword">$</span>(newElements) });
}, <span class="constant">1000</span>);
}</code></pre>
</div> <!-- /.copy -->
<div id="demo" class="wrap">
<div class="box col3">
<p>
<a href="http://www.flickr.com/photos/nemoorange/3318887645/" title="Clarendon Metro by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3619/3318887645_1f33364338.jpg" alt="Clarendon Metro" width="280" height="186" /></a>
</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col2">
<p>
<a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" width="180" height="120" /></a>
</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col5 hidden">
<p>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.</p>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</div>
<div class="box col5">
<p>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.</p>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</div>
<div class="box col3">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col3">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>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. </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- /.wrap -->
<p id="page_nav">
<a href="pages/2.html">Page 2</a>
</p>
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a> <br />
<a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by <a href="http://paulirish.com">Paul Irish</a>
</p>
</div>
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $wall = $('#demo');
$wall.molequul({
columnWidth: 100,
itemSelector: '.box:visible'
});
$wall.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loadingImg : 'img/loader.gif',
donetext : 'No more pages to load.',
debug: false,
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call molequul as a callback.
function( newElements ) { $(this).molequul({ appendedContent: $(newElements) }); }
);
});
</script>
</body>
</html>

208
docs/pages/2.html
Unescape View File

@ -1,208 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Page 2</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href="..">Primer</a></li>
<li><a href="../basic-single-column.html">Basic single-column</a></li>
<li><a href="../basic-multi-column.html">Basic multi-column</a></li>
<li><a href="../tumblelog.html">Tumblelog</a></li>
<li><a href="../appending.html">Appending</a></li>
<li><a href="../infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="../animating-jquery.html">Animating with jQuery</a></li>
<li><a href="../animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="../filtering.html">Filtering</a></li>
<li><a href="../filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Page 2</h1>
<div class="copy"><p>This is a page used for the <a href="../infinite-scroll.html">Infinite Scroll example</a>.</p></div>
<div id="demo" class="wrap">
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col3">
<p><a href="http://www.flickr.com/photos/nemoorange/3318887485/" title="Silver Diner by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3645/3318887485_a9b5b5533f.jpg" alt="Silver Diner" width="280" height="186" /></a>
</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
</div> <!-- .wrap -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="../js/jquery-1.4.2.min.js"></script>
<script src="../../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
itemSelector: '.box'
});
});
</script>
</body>
</html>

190
docs/pages/3.html
Unescape View File

@ -1,190 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Page 3</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href="..">Primer</a></li>
<li><a href="../basic-single-column.html">Basic single-column</a></li>
<li><a href="../basic-multi-column.html">Basic multi-column</a></li>
<li><a href="../tumblelog.html">Tumblelog</a></li>
<li><a href="../appending.html">Appending</a></li>
<li><a href="../infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="../animating-jquery.html">Animating with jQuery</a></li>
<li><a href="../animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="../filtering.html">Filtering</a></li>
<li><a href="../filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Page 3</h1>
<div class="copy"><p>This is a page used for the <a href="../infinite-scroll.html">Infinite Scroll example</a>.</p></div>
<div id="demo" class="wrap">
<div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col2">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col2">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col4">
<p>
<a href="http://www.flickr.com/photos/nemoorange/3319714118/" title="Mercedes Benz Jukebox by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3295/3319714118_1f5dd65a29.jpg" alt="Mercedes Benz Jukebox" width="380" height="253" /></a>
</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col4">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
</div> <!-- /.wrap -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div><!-- #content -->
<script src="../js/jquery-1.4.2.min.js"></script>
<script src="../../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
itemSelector: '.box'
});
});
</script>
</body>
</html>

182
docs/pages/4.html
Unescape View File

@ -1,182 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Page 4</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href="..">Primer</a></li>
<li><a href="../basic-single-column.html">Basic single-column</a></li>
<li><a href="../basic-multi-column.html">Basic multi-column</a></li>
<li><a href="../tumblelog.html">Tumblelog</a></li>
<li><a href="../appending.html">Appending</a></li>
<li><a href="../infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="../animating-jquery.html">Animating with jQuery</a></li>
<li><a href="../animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="../filtering.html">Filtering</a></li>
<li><a href="../filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Page 4</h1>
<div class="copy"><p>This is a page used for the <a href="../infinite-scroll.html">Infinite Scroll example</a>.</p></div>
<div id="demo" class="wrap">
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>
<a href="http://www.flickr.com/photos/nemoorange/3318887337/" title="Arlington Arts Center by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3657/3318887337_8558695d4f.jpg" alt="Arlington Arts Center" width="380" height="253" /></a>
</p>
<p>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. </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
</div> <!-- /.wrap -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div><!-- #content -->
<script src="../js/jquery-1.4.2.min.js"></script>
<script src="../../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
itemSelector: '.box'
});
});
</script>
</body>
</html>

185
docs/pages/5.html
Unescape View File

@ -1,185 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Page 5</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<!-- scripts are located at the bottom of the markup -->
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href="..">Primer</a></li>
<li><a href="../basic-single-column.html">Basic single-column</a></li>
<li><a href="../basic-multi-column.html">Basic multi-column</a></li>
<li><a href="../tumblelog.html">Tumblelog</a></li>
<li><a href="../appending.html">Appending</a></li>
<li><a href="../infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="../animating-jquery.html">Animating with jQuery</a></li>
<li><a href="../animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="../filtering.html">Filtering</a></li>
<li><a href="../filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Page 5</h1>
<div class="copy"><p>This is a page used for the <a href="../infinite-scroll.html">Infinite Scroll example</a>.</p></div>
<div id="demo" class="wrap">
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col2">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col2">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>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. </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box col3">
<p><a href="http://www.flickr.com/photos/nemoorange/3318887485/" title="Silver Diner by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3645/3318887485_a9b5b5533f.jpg" alt="Silver Diner" width="280" height="186" /></a>
</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col2">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col3">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
</div> <!-- /.wrap -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div><!-- #content -->
<script src="../js/jquery-1.4.2.min.js"></script>
<script src="../../jquery.molequul.js"></script>
<script>
$(function(){
$('#demo').molequul({
columnWidth: 100,
itemSelector: '.box'
});
});
</script>
</body>
</html>

252
docs/tumblelog.html
Unescape View File

@ -1,252 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Molequul &rsaquo; Tumblelog example</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
</head>
<body>
<div id="site-nav">
<h1>jQuery Molequul</h1>
<ul>
<li><a href=".">Primer</a></li>
<li><a href="basic-single-column.html">Basic single-column</a></li>
<li><a href="basic-multi-column.html">Basic multi-column</a></li>
<li class="selected"><a href="tumblelog.html">Tumblelog</a>
<ul>
<li><a href="#content">Top</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#tumblelog">Demo</a></li>
</ul>
</li>
<li><a href="appending.html">Appending</a></li>
<li><a href="infinite-scroll.html">Infinite Scroll</a></li>
<li><a href="animating-jquery.html">Animating with jQuery</a></li>
<li><a href="animating-css-transitions.html">Animating with CSS transitions</a></li>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="filtering-hashes.html#red">Filtering hashes</a></li>
</ul>
</div>
<div id="content">
<h1>Tumblelog example</h1>
<div class="copy">
<p>A tumblelog is a good example of a typical use case for Molequul.</p>
<p>There are three sizes of columns used:</p>
<ul>
<li><code>.col1</code> : 220px</li>
<li><code>.col2</code> : 460px</li>
<li><code>.col3</code> : 700px</li>
</ul>
<p>With 10px of margin on right and left sides that makes for a grid with columns 240px wide.</p>
<pre id="code"><code><span class="keyword">$</span>(<span class="storage">function</span>(){
<span class="keyword">$</span>(<span class="string">'#tumblelog'</span>).molequul({ columnWidth: <span class="constant">240</span> });
});</code></pre>
<p>All videos and images have width and height specified inline.</p>
</div>
<div id="tumblelog">
<div class="story col2">
<h2>Last Day Dream</h2>
<p>
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4155700&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff4000&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4155700&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff4000&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="story col1">
<blockquote>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</blockquote>
<p>&mdash; Marcus Aurelius</p>
</div>
<div class="story col1">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="story col2">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123693806/in/set-72157611386593623"><img src="http://farm4.static.flickr.com/3121/3123693806_4cb1ca16d9.jpg" alt="" width="460" height="359" /></a>
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123692308/in/set-72157611386593623">
<img src="http://farm4.static.flickr.com/3282/3123692308_9e81bc4d14.jpg" alt="" width="220" height="290" />
</a>
</p>
<p>[PARENTS MAGAZINE, GIRL WITH CAT]</p>
</div>
<div class="story col1">
<blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</blockquote>
<p>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.</p>
</div>
<div class="story col2">
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6185327&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6185327&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</div>
<div class="story col2">
<h2>Ut enim ad minim veniam</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col3">
<h3>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</h3>
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a></h3>
</div>
<div class="story col1">
<h3>feugiat vitae, ultricies eget</h3>
<a href="http://www.flickr.com/photos/library_of_congress/2179137415/"><img src="http://farm3.static.flickr.com/2109/2179137415_0e63ebb36e_m.jpg" width="191" height="240" alt="" /></a>
</div>
<div class="story col2">
<h2>A Tremendous Celebration</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
<div class="story col2">
<h2>And of Deliberate Consequences</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<h3>Aenean ultricies mi</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Vestibulum tortor quam</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col1">
<blockquote>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
</p>
</blockquote>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2179136893/"><img src="http://farm3.static.flickr.com/2186/2179136893_a12b3ace56_t.jpg" height="81" /></a>
</p>
<p>
Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in action in the South Pacific, over Germany and elsewhere. It is a long range, high altitude heavy bomber, with a crew of seven to nine men, and with armament sufficient to defend itself on daylight missions
</p>
</div>
<div class="story col1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2178407555/"><img src="http://farm3.static.flickr.com/2008/2178407555_9a9bcfe31f_m.jpg" height="240" alt="" /></a>
</p>
</div>
<div class="story col3">
<object width="700" height="394"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7174318&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7174318&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="394"></embed></object>
</div>
<div class="story col1">
<blockquote>
<p>Sing, O goddess, the anger of Achilles son of Peleus, that brought countless ills upon the Achaeans. Many a brave soul did it send hurrying down to Hades, and many a hero did it yield a prey to dogs and vultures, for so were the counsels of Jove fulfilled from the day on which the son of Atreus, king of men, and great Achilles, first fell out with one another.</p>
</blockquote>
<cite><a href="http://classics.mit.edu/Homer/iliad.1.i.html">Homer &mdash; The Iliad</a></cite>
</div>
<div class="story col1">
<h2>Aliens attack South Dakota</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<blockquote><p>Yes, it did happen.</p></blockquote>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col3">
<p style="float: right; margin-left: 20px"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><img src="http://farm4.static.flickr.com/3197/3122875223_917b1ccafc.jpg" alt="McCall Cover, Joan Caulfield" width="460" height="380" /></a></p>
<h2>And then, there is this.</h2>
<p class="caption"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><em>McCall Cover, Joan Caulfield</em> by Nickolas Muray</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> <!-- /#tumblelog -->
<p id="footer">
jQuery Molequul by <a href="http://desandro.com/">David DeSandro</a>
</p>
</div> <!-- #content -->
<script src="js/jquery-1.4.2.min.js"></script>
<script src="../jquery.molequul.js"></script>
<script>
$(function(){
$('#tumblelog').molequul({columnWidth: 240})
})
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save