mirror of https://github.com/metafizzy/isotope
desandro
15 years ago
commit
b09c2ec7f0
22 changed files with 4261 additions and 0 deletions
@ -0,0 +1,12 @@
|
||||
jQuery Mercutio |
||||
============== |
||||
|
||||
Mercutio is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Mercutio 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. |
||||
|
||||
The primer in docs/index.html has all the documentation to get you started. |
||||
|
||||
Code repository: [github.com/desandro/mercutio](http://github.com/desandro/mercutio) |
||||
|
||||
View the docs live: [desandro.com/demo/mercutio/docs](http://desandro.com/demo/mercutio/docs/) |
||||
|
||||
Copyright (c) 2010 David DeSandro, licensed MIT |
||||
@ -0,0 +1,196 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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>).mercutio({ columnWidth: <span class="constant">100</span> });</code></pre> |
||||
|
||||
<p>In the CSS, add transition properties. Mercutio 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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
$('#demo').mercutio({ columnWidth: 100 }); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,202 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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>).mercutio({ |
||||
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>).mercutio({ |
||||
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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
animate: true, |
||||
animationOptions: { |
||||
duration: 1000, |
||||
// easing: 'linear', |
||||
specialEasing: { top: 'linear'}, |
||||
queue: false |
||||
} |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,181 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 ‘masoned’ 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>.mercutio()</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 mercutio configuration since Mercutio saves all previous options. Using <code>appendedContent</code>, the Mercutio 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 mercutio 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.mercutio({ |
||||
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> |
||||
.mercutio( { 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 Mercutio 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.mercutio.js"></script> |
||||
<script src="js/rando-lorem-text.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
// cache mercutio wrap |
||||
var $wall = $('#demo').find('.wrap'); |
||||
|
||||
$wall.mercutio({ |
||||
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 |
||||
.mercutio( { appendedContent: $boxes } , |
||||
// using a callback to style new elements |
||||
function() { |
||||
$(this).css({background: '#222', color: '#EEE' }); |
||||
} |
||||
) |
||||
; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,268 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio. All ‘bricks’ 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>).mercutio({ |
||||
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"><div id=<span class="string">"demo"</span> class=<span class="string">"wrap"</span>></span> |
||||
<span class="storage"><div class=<span class="string">"box col2"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col3"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div></span> |
||||
<span class="storage"><div class=<span class="string">"box col2"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col2"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"></div></span> |
||||
<span class="storage"></div></span> <span class="comment"><!-- #demo --></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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
itemSelector: '.box' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,264 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio. All ‘bricks’ 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>).mercutio({ |
||||
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"><div id=<span class="string">"demo"</span> class=<span class="string">"wrap"</span>></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"><div class=<span class="string">"box col1"</span>></span>...<span class="storage"></div></span> |
||||
<span class="storage"></div></span> |
||||
<span class="storage"></div></span> <span class="comment"><!-- #demo --></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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
$('#demo').mercutio({ |
||||
singleMode: true, |
||||
itemSelector: '.box' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,349 @@
|
||||
/* 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%; |
||||
} |
||||
|
||||
/**** Mercutio 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; |
||||
} |
||||
@ -0,0 +1,406 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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>), |
||||
|
||||
mercutioOptions <span class="keyword">=</span> { <span class="comment">// initial mercutio 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 mercutio on start-up to capture all the boxes we'll need</span> |
||||
<span class="keyword">$</span>wall.mercutio(mercutioOptions); |
||||
<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 mercutio options animate to false</span> |
||||
mercutioOptions.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 mercutio again, this time with the necessary stuff hidden</span> |
||||
<span class="keyword">$</span>wall.mercutio(mercutioOptions); |
||||
<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.mercutio({ 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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var |
||||
speed = 1000, // animation speed |
||||
$wall = $('#demo').find('.wrap'), |
||||
|
||||
mercutioOptions = { // initial mercutio 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 mercutio on start-up to capture all the boxes we'll need |
||||
$wall.mercutio(mercutioOptions); |
||||
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 mercutio options animate to false |
||||
mercutioOptions.animate = false; |
||||
// hide boxes that don't match the filter class |
||||
$wall.children().not('.'+possibleFilterClass) |
||||
.toggleClass('invis').hide(); |
||||
// run mercutio again, this time with the necessary stuff hidden |
||||
$wall.mercutio(mercutioOptions); |
||||
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.mercutio({ animate: true }); |
||||
// set hash in URL |
||||
window.location.hash = color; |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,354 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio 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 mercutio 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>.mercutio()</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.mercutio({ |
||||
columnWidth: <span class="constant">100</span>, |
||||
<span class="comment">// only apply mercutio 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.mercutio(); |
||||
|
||||
<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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var |
||||
speed = 1000, // animation speed |
||||
$wall = $('#demo').find('.wrap') |
||||
; |
||||
|
||||
$wall.mercutio({ |
||||
columnWidth: 100, |
||||
// only apply mercutio layout to visible elements |
||||
itemSelector: '.box:not(.invis)', |
||||
animate: true, |
||||
animationOptions: { |
||||
duration: speed, |
||||
queue: false |
||||
} |
||||
}); |
||||
|
||||
$('#filtering-nav a').click(function(){ |
||||
var colorClass = '.' + $(this).attr('class'); |
||||
|
||||
if(colorClass=='.all') { |
||||
// show all hidden boxes |
||||
$wall.children('.invis') |
||||
.toggleClass('invis').fadeIn(speed); |
||||
} else { |
||||
// hide visible boxes |
||||
$wall.children().not(colorClass).not('.invis') |
||||
.toggleClass('invis').fadeOut(speed); |
||||
// show hidden boxes |
||||
$wall.children(colorClass+'.invis') |
||||
.toggleClass('invis').fadeIn(speed); |
||||
} |
||||
$wall.mercutio(); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,376 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 & 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>Mercutio is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Mercutio 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>Mercutio</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 Mercutio is fairly easy. Simply call the <code>.mercutio()</code> method on the container element. Depending on the layout, you’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>).mercutio({ 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>).mercutio({ 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, Mercutio 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 ‘brick’ 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>).mercutio({ |
||||
|
||||
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 Mercutio 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">// Mercutio will use the options from previous Mercutio |
||||
// 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 Mercutio 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/mercutio">github.com/desandro/mercutio</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/mercutio/issues">issue tracker</a> where you can look through other people’s <a href="http://github.com/desandro/mercutio/issues/closed">resolved issues</a> or submit a new one for yourself. If you’re still having trouble, try <a href="http://wiki.github.com/desandro/mercutio/">looking over the FAQ</a>.</p> |
||||
|
||||
<h2 id="resizing">Window resizing</h2> |
||||
|
||||
<p>By default, Mercutio 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’t have to worry about Mercutio slowing down window resizes, or with fixed layouts.</p> |
||||
|
||||
<h2 id="images">Handling images & other media</h2> |
||||
|
||||
<p>Since Mercutio measures the height of the elements when placing them, you will need to account for images and other media that haven’t loaded yet. For images, the best method is to specify the width and height of images inline.</p> |
||||
|
||||
<pre><code><span class="storage"><img src=<span class="string">"img_file.jpg"</span> width=<span class="string">"280"</span> height=<span class="string">"160"</span> /></span></code></pre> |
||||
|
||||
<p>If you’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’re dealing with @font-face fonts, another option is to call Mercutio 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>).mercutio({ columnWidth: <span class="constant">200</span> }); |
||||
});</code></pre> |
||||
|
||||
<h2 id="anchor-links">Resolving anchor links</h2> |
||||
|
||||
<p>Since Mercutio 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/jquerymercutio">delicious links tagged with jquerymercutio</a> and <a href="http://emberapp.com/desandro/collections/jquery-mercutio">jQuery Mercutio 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 & 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 Mercutio.</li> |
||||
</ul> |
||||
|
||||
<h2 id="license">License</h2> |
||||
|
||||
<p>jQuery Mercutio 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 © 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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#secondary').mercutio({columnWidth: 100}); |
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,355 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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>Mercutio 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, Mercutio 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 Mercutio 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.mercutio({ |
||||
columnWidth: <span class="constant">100</span>, |
||||
itemSelector: <span class="string">'.box:visible'</span> |
||||
});</code></pre> |
||||
|
||||
<p>In the Infinite Scroll configuration, call Mercutio 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 mercutio as a callback</span> |
||||
<span class="storage">function</span>( newElements ) { |
||||
<span class="keyword">$</span>(<span class="constant">this</span>).mercutio({ 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, Mercutio needs to be called after the newly-appended images are fully loaded. This is done by delaying the Mercutio callback.</p> |
||||
|
||||
<pre><code><span class="comment">// call mercutio as a callback, after 1000 milliseconds</span> |
||||
<span class="storage">function</span>( newElements ) { |
||||
setTimeout(<span class="storage">function</span>() { |
||||
<span class="keyword">$</span>wall.mercutio({ 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 Mercutio 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.mercutio.js"></script> |
||||
<script src="js/jquery.infinitescroll.min.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $wall = $('#demo'); |
||||
|
||||
$wall.mercutio({ |
||||
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 mercutio as a callback. |
||||
function( newElements ) { $(this).mercutio({ appendedContent: $(newElements) }); } |
||||
); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
Binary file not shown.
@ -0,0 +1,154 @@
|
||||
/*! |
||||
* jQuery JavaScript Library v1.4.2 |
||||
* http://jquery.com/
|
||||
* |
||||
* Copyright 2010, John Resig |
||||
* Dual licensed under the MIT or GPL Version 2 licenses. |
||||
* http://jquery.org/license
|
||||
* |
||||
* Includes Sizzle.js |
||||
* http://sizzlejs.com/
|
||||
* Copyright 2010, The Dojo Foundation |
||||
* Released under the MIT, BSD, and GPL Licenses. |
||||
* |
||||
* Date: Sat Feb 13 22:33:48 2010 -0500 |
||||
*/ |
||||
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return a}return i? |
||||
e(a[0],b):w}function J(){return(new Date).getTime()}function Y(){return false}function Z(){return true}function na(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function oa(a){var b,d=[],f=[],e=arguments,j,i,o,k,n,r;i=c.data(this,"events");if(!(a.liveFired===this||!i||!i.live||a.button&&a.type==="click")){a.liveFired=this;var u=i.live.slice(0);for(k=0;k<u.length;k++){i=u[k];i.origType.replace(O,"")===a.type?f.push(i.selector):u.splice(k--,1)}j=c(a.target).closest(f,a.currentTarget);n=0;for(r= |
||||
j.length;n<r;n++)for(k=0;k<u.length;k++){i=u[k];if(j[n].selector===i.selector){o=j[n].elem;f=null;if(i.preType==="mouseenter"||i.preType==="mouseleave")f=c(a.relatedTarget).closest(i.selector)[0];if(!f||f!==o)d.push({elem:o,handleObj:i})}}n=0;for(r=d.length;n<r;n++){j=d[n];a.currentTarget=j.elem;a.data=j.handleObj.data;a.handleObj=j.handleObj;if(j.handleObj.origHandler.apply(j.elem,e)===false){b=false;break}}return b}}function pa(a,b){return"live."+(a&&a!=="*"?a+".":"")+b.replace(/\./g,"`").replace(/ /g, |
||||
"&")}function qa(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function ra(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var f=c.data(a[d++]),e=c.data(this,f);if(f=f&&f.events){delete e.handle;e.events={};for(var j in f)for(var i in f[j])c.event.add(this,j,f[j][i],f[j][i].data)}}})}function sa(a,b,d){var f,e,j;b=b&&b[0]?b[0].ownerDocument||b[0]:s;if(a.length===1&&typeof a[0]==="string"&&a[0].length<512&&b===s&&!ta.test(a[0])&&(c.support.checkClone||!ua.test(a[0]))){e= |
||||
true;if(j=c.fragments[a[0]])if(j!==1)f=j}if(!f){f=b.createDocumentFragment();c.clean(a,b,f,d)}if(e)c.fragments[a[0]]=j?f:1;return{fragment:f,cacheable:e}}function K(a,b){var d={};c.each(va.concat.apply([],va.slice(0,b)),function(){d[this]=a});return d}function wa(a){return"scrollTo"in a&&a.document?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var c=function(a,b){return new c.fn.init(a,b)},Ra=A.jQuery,Sa=A.$,s=A.document,T,Ta=/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,Ua=/^.[^:#\[\.,]*$/,Va=/\S/, |
||||
Wa=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Xa=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,P=navigator.userAgent,xa=false,Q=[],L,$=Object.prototype.toString,aa=Object.prototype.hasOwnProperty,ba=Array.prototype.push,R=Array.prototype.slice,ya=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var d,f;if(!a)return this;if(a.nodeType){this.context=this[0]=a;this.length=1;return this}if(a==="body"&&!b){this.context=s;this[0]=s.body;this.selector="body";this.length=1;return this}if(typeof a==="string")if((d=Ta.exec(a))&& |
||||
(d[1]||!b))if(d[1]){f=b?b.ownerDocument||b:s;if(a=Xa.exec(a))if(c.isPlainObject(b)){a=[s.createElement(a[1])];c.fn.attr.call(a,b,true)}else a=[f.createElement(a[1])];else{a=sa([d[1]],[f]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}return c.merge(this,a)}else{if(b=s.getElementById(d[2])){if(b.id!==d[2])return T.find(a);this.length=1;this[0]=b}this.context=s;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a);return c.merge(this, |
||||
a)}else return!b||b.jquery?(b||T).find(a):c(b).find(a);else if(c.isFunction(a))return T.ready(a);if(a.selector!==w){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2",length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){var f=c();c.isArray(a)?ba.apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;if(b=== |
||||
"find")f.selector=this.selector+(this.selector?" ":"")+d;else if(b)f.selector=this.selector+"."+b+"("+d+")";return f},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this, |
||||
function(b,d){return a.call(b,d,b)}))},end:function(){return this.prevObject||c(null)},push:ba,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,d=arguments.length,f=false,e,j,i,o;if(typeof a==="boolean"){f=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(d===b){a=this;--b}for(;b<d;b++)if((e=arguments[b])!=null)for(j in e){i=a[j];o=e[j];if(a!==o)if(f&&o&&(c.isPlainObject(o)||c.isArray(o))){i=i&&(c.isPlainObject(i)|| |
||||
c.isArray(i))?i:c.isArray(o)?[]:{};a[j]=c.extend(f,i,o)}else if(o!==w)a[j]=o}return a};c.extend({noConflict:function(a){A.$=Sa;if(a)A.jQuery=Ra;return c},isReady:false,ready:function(){if(!c.isReady){if(!s.body)return setTimeout(c.ready,13);c.isReady=true;if(Q){for(var a,b=0;a=Q[b++];)a.call(s,c);Q=null}c.fn.triggerHandler&&c(s).triggerHandler("ready")}},bindReady:function(){if(!xa){xa=true;if(s.readyState==="complete")return c.ready();if(s.addEventListener){s.addEventListener("DOMContentLoaded", |
||||
L,false);A.addEventListener("load",c.ready,false)}else if(s.attachEvent){s.attachEvent("onreadystatechange",L);A.attachEvent("onload",c.ready);var a=false;try{a=A.frameElement==null}catch(b){}s.documentElement.doScroll&&a&&ma()}}},isFunction:function(a){return $.call(a)==="[object Function]"},isArray:function(a){return $.call(a)==="[object Array]"},isPlainObject:function(a){if(!a||$.call(a)!=="[object Object]"||a.nodeType||a.setInterval)return false;if(a.constructor&&!aa.call(a,"constructor")&&!aa.call(a.constructor.prototype, |
||||
"isPrototypeOf"))return false;var b;for(b in a);return b===w||aa.call(a,b)},isEmptyObject:function(a){for(var b in a)return false;return true},error:function(a){throw a;},parseJSON:function(a){if(typeof a!=="string"||!a)return null;a=c.trim(a);if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return A.JSON&&A.JSON.parse?A.JSON.parse(a):(new Function("return "+ |
||||
a))();else c.error("Invalid JSON: "+a)},noop:function(){},globalEval:function(a){if(a&&Va.test(a)){var b=s.getElementsByTagName("head")[0]||s.documentElement,d=s.createElement("script");d.type="text/javascript";if(c.support.scriptEval)d.appendChild(s.createTextNode(a));else d.text=a;b.insertBefore(d,b.firstChild);b.removeChild(d)}},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){var f,e=0,j=a.length,i=j===w||c.isFunction(a);if(d)if(i)for(f in a){if(b.apply(a[f], |
||||
d)===false)break}else for(;e<j;){if(b.apply(a[e++],d)===false)break}else if(i)for(f in a){if(b.call(a[f],f,a[f])===false)break}else for(d=a[0];e<j&&b.call(d,e,d)!==false;d=a[++e]);return a},trim:function(a){return(a||"").replace(Wa,"")},makeArray:function(a,b){b=b||[];if(a!=null)a.length==null||typeof a==="string"||c.isFunction(a)||typeof a!=="function"&&a.setInterval?ba.call(b,a):c.merge(b,a);return b},inArray:function(a,b){if(b.indexOf)return b.indexOf(a);for(var d=0,f=b.length;d<f;d++)if(b[d]=== |
||||
a)return d;return-1},merge:function(a,b){var d=a.length,f=0;if(typeof b.length==="number")for(var e=b.length;f<e;f++)a[d++]=b[f];else for(;b[f]!==w;)a[d++]=b[f++];a.length=d;return a},grep:function(a,b,d){for(var f=[],e=0,j=a.length;e<j;e++)!d!==!b(a[e],e)&&f.push(a[e]);return f},map:function(a,b,d){for(var f=[],e,j=0,i=a.length;j<i;j++){e=b(a[j],j,d);if(e!=null)f[f.length]=e}return f.concat.apply([],f)},guid:1,proxy:function(a,b,d){if(arguments.length===2)if(typeof b==="string"){d=a;a=d[b];b=w}else if(b&& |
||||
!c.isFunction(b)){d=b;b=w}if(!b&&a)b=function(){return a.apply(d||this,arguments)};if(a)b.guid=a.guid=a.guid||b.guid||c.guid++;return b},uaMatch:function(a){a=a.toLowerCase();a=/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||!/compatible/.test(a)&&/(mozilla)(?:.*? rv:([\w.]+))?/.exec(a)||[];return{browser:a[1]||"",version:a[2]||"0"}},browser:{}});P=c.uaMatch(P);if(P.browser){c.browser[P.browser]=true;c.browser.version=P.version}if(c.browser.webkit)c.browser.safari= |
||||
true;if(ya)c.inArray=function(a,b){return ya.call(b,a)};T=c(s);if(s.addEventListener)L=function(){s.removeEventListener("DOMContentLoaded",L,false);c.ready()};else if(s.attachEvent)L=function(){if(s.readyState==="complete"){s.detachEvent("onreadystatechange",L);c.ready()}};(function(){c.support={};var a=s.documentElement,b=s.createElement("script"),d=s.createElement("div"),f="script"+J();d.style.display="none";d.innerHTML=" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>"; |
||||
var e=d.getElementsByTagName("*"),j=d.getElementsByTagName("a")[0];if(!(!e||!e.length||!j)){c.support={leadingWhitespace:d.firstChild.nodeType===3,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/red/.test(j.getAttribute("style")),hrefNormalized:j.getAttribute("href")==="/a",opacity:/^0.55$/.test(j.style.opacity),cssFloat:!!j.style.cssFloat,checkOn:d.getElementsByTagName("input")[0].value==="on",optSelected:s.createElement("select").appendChild(s.createElement("option")).selected, |
||||
parentNode:d.removeChild(d.appendChild(s.createElement("div"))).parentNode===null,deleteExpando:true,checkClone:false,scriptEval:false,noCloneEvent:true,boxModel:null};b.type="text/javascript";try{b.appendChild(s.createTextNode("window."+f+"=1;"))}catch(i){}a.insertBefore(b,a.firstChild);if(A[f]){c.support.scriptEval=true;delete A[f]}try{delete b.test}catch(o){c.support.deleteExpando=false}a.removeChild(b);if(d.attachEvent&&d.fireEvent){d.attachEvent("onclick",function k(){c.support.noCloneEvent= |
||||
false;d.detachEvent("onclick",k)});d.cloneNode(true).fireEvent("onclick")}d=s.createElement("div");d.innerHTML="<input type='radio' name='radiotest' checked='checked'/>";a=s.createDocumentFragment();a.appendChild(d.firstChild);c.support.checkClone=a.cloneNode(true).cloneNode(true).lastChild.checked;c(function(){var k=s.createElement("div");k.style.width=k.style.paddingLeft="1px";s.body.appendChild(k);c.boxModel=c.support.boxModel=k.offsetWidth===2;s.body.removeChild(k).style.display="none"});a=function(k){var n= |
||||
s.createElement("div");k="on"+k;var r=k in n;if(!r){n.setAttribute(k,"return;");r=typeof n[k]==="function"}return r};c.support.submitBubbles=a("submit");c.support.changeBubbles=a("change");a=b=d=e=j=null}})();c.props={"for":"htmlFor","class":"className",readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",colspan:"colSpan",tabindex:"tabIndex",usemap:"useMap",frameborder:"frameBorder"};var G="jQuery"+J(),Ya=0,za={};c.extend({cache:{},expando:G,noData:{embed:true,object:true, |
||||
applet:true},data:function(a,b,d){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var f=a[G],e=c.cache;if(!f&&typeof b==="string"&&d===w)return null;f||(f=++Ya);if(typeof b==="object"){a[G]=f;e[f]=c.extend(true,{},b)}else if(!e[f]){a[G]=f;e[f]={}}a=e[f];if(d!==w)a[b]=d;return typeof b==="string"?a[b]:a}},removeData:function(a,b){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var d=a[G],f=c.cache,e=f[d];if(b){if(e){delete e[b];c.isEmptyObject(e)&&c.removeData(a)}}else{if(c.support.deleteExpando)delete a[c.expando]; |
||||
else a.removeAttribute&&a.removeAttribute(c.expando);delete f[d]}}}});c.fn.extend({data:function(a,b){if(typeof a==="undefined"&&this.length)return c.data(this[0]);else if(typeof a==="object")return this.each(function(){c.data(this,a)});var d=a.split(".");d[1]=d[1]?"."+d[1]:"";if(b===w){var f=this.triggerHandler("getData"+d[1]+"!",[d[0]]);if(f===w&&this.length)f=c.data(this[0],a);return f===w&&d[1]?this.data(d[0]):f}else return this.trigger("setData"+d[1]+"!",[d[0],b]).each(function(){c.data(this, |
||||
a,b)})},removeData:function(a){return this.each(function(){c.removeData(this,a)})}});c.extend({queue:function(a,b,d){if(a){b=(b||"fx")+"queue";var f=c.data(a,b);if(!d)return f||[];if(!f||c.isArray(d))f=c.data(a,b,c.makeArray(d));else f.push(d);return f}},dequeue:function(a,b){b=b||"fx";var d=c.queue(a,b),f=d.shift();if(f==="inprogress")f=d.shift();if(f){b==="fx"&&d.unshift("inprogress");f.call(a,function(){c.dequeue(a,b)})}}});c.fn.extend({queue:function(a,b){if(typeof a!=="string"){b=a;a="fx"}if(b=== |
||||
w)return c.queue(this[0],a);return this.each(function(){var d=c.queue(this,a,b);a==="fx"&&d[0]!=="inprogress"&&c.dequeue(this,a)})},dequeue:function(a){return this.each(function(){c.dequeue(this,a)})},delay:function(a,b){a=c.fx?c.fx.speeds[a]||a:a;b=b||"fx";return this.queue(b,function(){var d=this;setTimeout(function(){c.dequeue(d,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])}});var Aa=/[\n\t]/g,ca=/\s+/,Za=/\r/g,$a=/href|src|style/,ab=/(button|input)/i,bb=/(button|input|object|select|textarea)/i, |
||||
cb=/^(a|area)$/i,Ba=/radio|checkbox/;c.fn.extend({attr:function(a,b){return X(this,a,b,true,c.attr)},removeAttr:function(a){return this.each(function(){c.attr(this,a,"");this.nodeType===1&&this.removeAttribute(a)})},addClass:function(a){if(c.isFunction(a))return this.each(function(n){var r=c(this);r.addClass(a.call(this,n,r.attr("class")))});if(a&&typeof a==="string")for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1)if(e.className){for(var j=" "+e.className+" ", |
||||
i=e.className,o=0,k=b.length;o<k;o++)if(j.indexOf(" "+b[o]+" ")<0)i+=" "+b[o];e.className=c.trim(i)}else e.className=a}return this},removeClass:function(a){if(c.isFunction(a))return this.each(function(k){var n=c(this);n.removeClass(a.call(this,k,n.attr("class")))});if(a&&typeof a==="string"||a===w)for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1&&e.className)if(a){for(var j=(" "+e.className+" ").replace(Aa," "),i=0,o=b.length;i<o;i++)j=j.replace(" "+b[i]+" ", |
||||
" ");e.className=c.trim(j)}else e.className=""}return this},toggleClass:function(a,b){var d=typeof a,f=typeof b==="boolean";if(c.isFunction(a))return this.each(function(e){var j=c(this);j.toggleClass(a.call(this,e,j.attr("class"),b),b)});return this.each(function(){if(d==="string")for(var e,j=0,i=c(this),o=b,k=a.split(ca);e=k[j++];){o=f?o:!i.hasClass(e);i[o?"addClass":"removeClass"](e)}else if(d==="undefined"||d==="boolean"){this.className&&c.data(this,"__className__",this.className);this.className= |
||||
this.className||a===false?"":c.data(this,"__className__")||""}})},hasClass:function(a){a=" "+a+" ";for(var b=0,d=this.length;b<d;b++)if((" "+this[b].className+" ").replace(Aa," ").indexOf(a)>-1)return true;return false},val:function(a){if(a===w){var b=this[0];if(b){if(c.nodeName(b,"option"))return(b.attributes.value||{}).specified?b.value:b.text;if(c.nodeName(b,"select")){var d=b.selectedIndex,f=[],e=b.options;b=b.type==="select-one";if(d<0)return null;var j=b?d:0;for(d=b?d+1:e.length;j<d;j++){var i= |
||||
e[j];if(i.selected){a=c(i).val();if(b)return a;f.push(a)}}return f}if(Ba.test(b.type)&&!c.support.checkOn)return b.getAttribute("value")===null?"on":b.value;return(b.value||"").replace(Za,"")}return w}var o=c.isFunction(a);return this.each(function(k){var n=c(this),r=a;if(this.nodeType===1){if(o)r=a.call(this,k,n.val());if(typeof r==="number")r+="";if(c.isArray(r)&&Ba.test(this.type))this.checked=c.inArray(n.val(),r)>=0;else if(c.nodeName(this,"select")){var u=c.makeArray(r);c("option",this).each(function(){this.selected= |
||||
c.inArray(c(this).val(),u)>=0});if(!u.length)this.selectedIndex=-1}else this.value=r}})}});c.extend({attrFn:{val:true,css:true,html:true,text:true,data:true,width:true,height:true,offset:true},attr:function(a,b,d,f){if(!a||a.nodeType===3||a.nodeType===8)return w;if(f&&b in c.attrFn)return c(a)[b](d);f=a.nodeType!==1||!c.isXMLDoc(a);var e=d!==w;b=f&&c.props[b]||b;if(a.nodeType===1){var j=$a.test(b);if(b in a&&f&&!j){if(e){b==="type"&&ab.test(a.nodeName)&&a.parentNode&&c.error("type property can't be changed"); |
||||
a[b]=d}if(c.nodeName(a,"form")&&a.getAttributeNode(b))return a.getAttributeNode(b).nodeValue;if(b==="tabIndex")return(b=a.getAttributeNode("tabIndex"))&&b.specified?b.value:bb.test(a.nodeName)||cb.test(a.nodeName)&&a.href?0:w;return a[b]}if(!c.support.style&&f&&b==="style"){if(e)a.style.cssText=""+d;return a.style.cssText}e&&a.setAttribute(b,""+d);a=!c.support.hrefNormalized&&f&&j?a.getAttribute(b,2):a.getAttribute(b);return a===null?w:a}return c.style(a,b,d)}});var O=/\.(.*)$/,db=function(a){return a.replace(/[^\w\s\.\|`]/g, |
||||
function(b){return"\\"+b})};c.event={add:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){if(a.setInterval&&a!==A&&!a.frameElement)a=A;var e,j;if(d.handler){e=d;d=e.handler}if(!d.guid)d.guid=c.guid++;if(j=c.data(a)){var i=j.events=j.events||{},o=j.handle;if(!o)j.handle=o=function(){return typeof c!=="undefined"&&!c.event.triggered?c.event.handle.apply(o.elem,arguments):w};o.elem=a;b=b.split(" ");for(var k,n=0,r;k=b[n++];){j=e?c.extend({},e):{handler:d,data:f};if(k.indexOf(".")>-1){r=k.split("."); |
||||
k=r.shift();j.namespace=r.slice(0).sort().join(".")}else{r=[];j.namespace=""}j.type=k;j.guid=d.guid;var u=i[k],z=c.event.special[k]||{};if(!u){u=i[k]=[];if(!z.setup||z.setup.call(a,f,r,o)===false)if(a.addEventListener)a.addEventListener(k,o,false);else a.attachEvent&&a.attachEvent("on"+k,o)}if(z.add){z.add.call(a,j);if(!j.handler.guid)j.handler.guid=d.guid}u.push(j);c.event.global[k]=true}a=null}}},global:{},remove:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){var e,j=0,i,o,k,n,r,u,z=c.data(a), |
||||
C=z&&z.events;if(z&&C){if(b&&b.type){d=b.handler;b=b.type}if(!b||typeof b==="string"&&b.charAt(0)==="."){b=b||"";for(e in C)c.event.remove(a,e+b)}else{for(b=b.split(" ");e=b[j++];){n=e;i=e.indexOf(".")<0;o=[];if(!i){o=e.split(".");e=o.shift();k=new RegExp("(^|\\.)"+c.map(o.slice(0).sort(),db).join("\\.(?:.*\\.)?")+"(\\.|$)")}if(r=C[e])if(d){n=c.event.special[e]||{};for(B=f||0;B<r.length;B++){u=r[B];if(d.guid===u.guid){if(i||k.test(u.namespace)){f==null&&r.splice(B--,1);n.remove&&n.remove.call(a,u)}if(f!= |
||||
null)break}}if(r.length===0||f!=null&&r.length===1){if(!n.teardown||n.teardown.call(a,o)===false)Ca(a,e,z.handle);delete C[e]}}else for(var B=0;B<r.length;B++){u=r[B];if(i||k.test(u.namespace)){c.event.remove(a,n,u.handler,B);r.splice(B--,1)}}}if(c.isEmptyObject(C)){if(b=z.handle)b.elem=null;delete z.events;delete z.handle;c.isEmptyObject(z)&&c.removeData(a)}}}}},trigger:function(a,b,d,f){var e=a.type||a;if(!f){a=typeof a==="object"?a[G]?a:c.extend(c.Event(e),a):c.Event(e);if(e.indexOf("!")>=0){a.type= |
||||
e=e.slice(0,-1);a.exclusive=true}if(!d){a.stopPropagation();c.event.global[e]&&c.each(c.cache,function(){this.events&&this.events[e]&&c.event.trigger(a,b,this.handle.elem)})}if(!d||d.nodeType===3||d.nodeType===8)return w;a.result=w;a.target=d;b=c.makeArray(b);b.unshift(a)}a.currentTarget=d;(f=c.data(d,"handle"))&&f.apply(d,b);f=d.parentNode||d.ownerDocument;try{if(!(d&&d.nodeName&&c.noData[d.nodeName.toLowerCase()]))if(d["on"+e]&&d["on"+e].apply(d,b)===false)a.result=false}catch(j){}if(!a.isPropagationStopped()&& |
||||
f)c.event.trigger(a,b,f,true);else if(!a.isDefaultPrevented()){f=a.target;var i,o=c.nodeName(f,"a")&&e==="click",k=c.event.special[e]||{};if((!k._default||k._default.call(d,a)===false)&&!o&&!(f&&f.nodeName&&c.noData[f.nodeName.toLowerCase()])){try{if(f[e]){if(i=f["on"+e])f["on"+e]=null;c.event.triggered=true;f[e]()}}catch(n){}if(i)f["on"+e]=i;c.event.triggered=false}}},handle:function(a){var b,d,f,e;a=arguments[0]=c.event.fix(a||A.event);a.currentTarget=this;b=a.type.indexOf(".")<0&&!a.exclusive; |
||||
if(!b){d=a.type.split(".");a.type=d.shift();f=new RegExp("(^|\\.)"+d.slice(0).sort().join("\\.(?:.*\\.)?")+"(\\.|$)")}e=c.data(this,"events");d=e[a.type];if(e&&d){d=d.slice(0);e=0;for(var j=d.length;e<j;e++){var i=d[e];if(b||f.test(i.namespace)){a.handler=i.handler;a.data=i.data;a.handleObj=i;i=i.handler.apply(this,arguments);if(i!==w){a.result=i;if(i===false){a.preventDefault();a.stopPropagation()}}if(a.isImmediatePropagationStopped())break}}}return a.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "), |
||||
fix:function(a){if(a[G])return a;var b=a;a=c.Event(b);for(var d=this.props.length,f;d;){f=this.props[--d];a[f]=b[f]}if(!a.target)a.target=a.srcElement||s;if(a.target.nodeType===3)a.target=a.target.parentNode;if(!a.relatedTarget&&a.fromElement)a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;if(a.pageX==null&&a.clientX!=null){b=s.documentElement;d=s.body;a.pageX=a.clientX+(b&&b.scrollLeft||d&&d.scrollLeft||0)-(b&&b.clientLeft||d&&d.clientLeft||0);a.pageY=a.clientY+(b&&b.scrollTop|| |
||||
d&&d.scrollTop||0)-(b&&b.clientTop||d&&d.clientTop||0)}if(!a.which&&(a.charCode||a.charCode===0?a.charCode:a.keyCode))a.which=a.charCode||a.keyCode;if(!a.metaKey&&a.ctrlKey)a.metaKey=a.ctrlKey;if(!a.which&&a.button!==w)a.which=a.button&1?1:a.button&2?3:a.button&4?2:0;return a},guid:1E8,proxy:c.proxy,special:{ready:{setup:c.bindReady,teardown:c.noop},live:{add:function(a){c.event.add(this,a.origType,c.extend({},a,{handler:oa}))},remove:function(a){var b=true,d=a.origType.replace(O,"");c.each(c.data(this, |
||||
"events").live||[],function(){if(d===this.origType.replace(O,""))return b=false});b&&c.event.remove(this,a.origType,oa)}},beforeunload:{setup:function(a,b,d){if(this.setInterval)this.onbeforeunload=d;return false},teardown:function(a,b){if(this.onbeforeunload===b)this.onbeforeunload=null}}}};var Ca=s.removeEventListener?function(a,b,d){a.removeEventListener(b,d,false)}:function(a,b,d){a.detachEvent("on"+b,d)};c.Event=function(a){if(!this.preventDefault)return new c.Event(a);if(a&&a.type){this.originalEvent= |
||||
a;this.type=a.type}else this.type=a;this.timeStamp=J();this[G]=true};c.Event.prototype={preventDefault:function(){this.isDefaultPrevented=Z;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},stopPropagation:function(){this.isPropagationStopped=Z;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=Z;this.stopPropagation()},isDefaultPrevented:Y,isPropagationStopped:Y, |
||||
isImmediatePropagationStopped:Y};var Da=function(a){var b=a.relatedTarget;try{for(;b&&b!==this;)b=b.parentNode;if(b!==this){a.type=a.data;c.event.handle.apply(this,arguments)}}catch(d){}},Ea=function(a){a.type=a.data;c.event.handle.apply(this,arguments)};c.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){c.event.special[a]={setup:function(d){c.event.add(this,b,d&&d.selector?Ea:Da,a)},teardown:function(d){c.event.remove(this,b,d&&d.selector?Ea:Da)}}});if(!c.support.submitBubbles)c.event.special.submit= |
||||
{setup:function(){if(this.nodeName.toLowerCase()!=="form"){c.event.add(this,"click.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="submit"||d==="image")&&c(b).closest("form").length)return na("submit",this,arguments)});c.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="text"||d==="password")&&c(b).closest("form").length&&a.keyCode===13)return na("submit",this,arguments)})}else return false},teardown:function(){c.event.remove(this,".specialSubmit")}}; |
||||
if(!c.support.changeBubbles){var da=/textarea|input|select/i,ea,Fa=function(a){var b=a.type,d=a.value;if(b==="radio"||b==="checkbox")d=a.checked;else if(b==="select-multiple")d=a.selectedIndex>-1?c.map(a.options,function(f){return f.selected}).join("-"):"";else if(a.nodeName.toLowerCase()==="select")d=a.selectedIndex;return d},fa=function(a,b){var d=a.target,f,e;if(!(!da.test(d.nodeName)||d.readOnly)){f=c.data(d,"_change_data");e=Fa(d);if(a.type!=="focusout"||d.type!=="radio")c.data(d,"_change_data", |
||||
e);if(!(f===w||e===f))if(f!=null||e){a.type="change";return c.event.trigger(a,b,d)}}};c.event.special.change={filters:{focusout:fa,click:function(a){var b=a.target,d=b.type;if(d==="radio"||d==="checkbox"||b.nodeName.toLowerCase()==="select")return fa.call(this,a)},keydown:function(a){var b=a.target,d=b.type;if(a.keyCode===13&&b.nodeName.toLowerCase()!=="textarea"||a.keyCode===32&&(d==="checkbox"||d==="radio")||d==="select-multiple")return fa.call(this,a)},beforeactivate:function(a){a=a.target;c.data(a, |
||||
"_change_data",Fa(a))}},setup:function(){if(this.type==="file")return false;for(var a in ea)c.event.add(this,a+".specialChange",ea[a]);return da.test(this.nodeName)},teardown:function(){c.event.remove(this,".specialChange");return da.test(this.nodeName)}};ea=c.event.special.change.filters}s.addEventListener&&c.each({focus:"focusin",blur:"focusout"},function(a,b){function d(f){f=c.event.fix(f);f.type=b;return c.event.handle.call(this,f)}c.event.special[b]={setup:function(){this.addEventListener(a, |
||||
d,true)},teardown:function(){this.removeEventListener(a,d,true)}}});c.each(["bind","one"],function(a,b){c.fn[b]=function(d,f,e){if(typeof d==="object"){for(var j in d)this[b](j,f,d[j],e);return this}if(c.isFunction(f)){e=f;f=w}var i=b==="one"?c.proxy(e,function(k){c(this).unbind(k,i);return e.apply(this,arguments)}):e;if(d==="unload"&&b!=="one")this.one(d,f,e);else{j=0;for(var o=this.length;j<o;j++)c.event.add(this[j],d,i,f)}return this}});c.fn.extend({unbind:function(a,b){if(typeof a==="object"&& |
||||
!a.preventDefault)for(var d in a)this.unbind(d,a[d]);else{d=0;for(var f=this.length;d<f;d++)c.event.remove(this[d],a,b)}return this},delegate:function(a,b,d,f){return this.live(b,d,f,a)},undelegate:function(a,b,d){return arguments.length===0?this.unbind("live"):this.die(b,null,d,a)},trigger:function(a,b){return this.each(function(){c.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0]){a=c.Event(a);a.preventDefault();a.stopPropagation();c.event.trigger(a,b,this[0]);return a.result}}, |
||||
toggle:function(a){for(var b=arguments,d=1;d<b.length;)c.proxy(a,b[d++]);return this.click(c.proxy(a,function(f){var e=(c.data(this,"lastToggle"+a.guid)||0)%d;c.data(this,"lastToggle"+a.guid,e+1);f.preventDefault();return b[e].apply(this,arguments)||false}))},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var Ga={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};c.each(["live","die"],function(a,b){c.fn[b]=function(d,f,e,j){var i,o=0,k,n,r=j||this.selector, |
||||
u=j?this:c(this.context);if(c.isFunction(f)){e=f;f=w}for(d=(d||"").split(" ");(i=d[o++])!=null;){j=O.exec(i);k="";if(j){k=j[0];i=i.replace(O,"")}if(i==="hover")d.push("mouseenter"+k,"mouseleave"+k);else{n=i;if(i==="focus"||i==="blur"){d.push(Ga[i]+k);i+=k}else i=(Ga[i]||i)+k;b==="live"?u.each(function(){c.event.add(this,pa(i,r),{data:f,selector:r,handler:e,origType:i,origHandler:e,preType:n})}):u.unbind(pa(i,r),e)}}return this}});c.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "), |
||||
function(a,b){c.fn[b]=function(d){return d?this.bind(b,d):this.trigger(b)};if(c.attrFn)c.attrFn[b]=true});A.attachEvent&&!A.addEventListener&&A.attachEvent("onunload",function(){for(var a in c.cache)if(c.cache[a].handle)try{c.event.remove(c.cache[a].handle.elem)}catch(b){}});(function(){function a(g){for(var h="",l,m=0;g[m];m++){l=g[m];if(l.nodeType===3||l.nodeType===4)h+=l.nodeValue;else if(l.nodeType!==8)h+=a(l.childNodes)}return h}function b(g,h,l,m,q,p){q=0;for(var v=m.length;q<v;q++){var t=m[q]; |
||||
if(t){t=t[g];for(var y=false;t;){if(t.sizcache===l){y=m[t.sizset];break}if(t.nodeType===1&&!p){t.sizcache=l;t.sizset=q}if(t.nodeName.toLowerCase()===h){y=t;break}t=t[g]}m[q]=y}}}function d(g,h,l,m,q,p){q=0;for(var v=m.length;q<v;q++){var t=m[q];if(t){t=t[g];for(var y=false;t;){if(t.sizcache===l){y=m[t.sizset];break}if(t.nodeType===1){if(!p){t.sizcache=l;t.sizset=q}if(typeof h!=="string"){if(t===h){y=true;break}}else if(k.filter(h,[t]).length>0){y=t;break}}t=t[g]}m[q]=y}}}var f=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, |
||||
e=0,j=Object.prototype.toString,i=false,o=true;[0,0].sort(function(){o=false;return 0});var k=function(g,h,l,m){l=l||[];var q=h=h||s;if(h.nodeType!==1&&h.nodeType!==9)return[];if(!g||typeof g!=="string")return l;for(var p=[],v,t,y,S,H=true,M=x(h),I=g;(f.exec(""),v=f.exec(I))!==null;){I=v[3];p.push(v[1]);if(v[2]){S=v[3];break}}if(p.length>1&&r.exec(g))if(p.length===2&&n.relative[p[0]])t=ga(p[0]+p[1],h);else for(t=n.relative[p[0]]?[h]:k(p.shift(),h);p.length;){g=p.shift();if(n.relative[g])g+=p.shift(); |
||||
t=ga(g,t)}else{if(!m&&p.length>1&&h.nodeType===9&&!M&&n.match.ID.test(p[0])&&!n.match.ID.test(p[p.length-1])){v=k.find(p.shift(),h,M);h=v.expr?k.filter(v.expr,v.set)[0]:v.set[0]}if(h){v=m?{expr:p.pop(),set:z(m)}:k.find(p.pop(),p.length===1&&(p[0]==="~"||p[0]==="+")&&h.parentNode?h.parentNode:h,M);t=v.expr?k.filter(v.expr,v.set):v.set;if(p.length>0)y=z(t);else H=false;for(;p.length;){var D=p.pop();v=D;if(n.relative[D])v=p.pop();else D="";if(v==null)v=h;n.relative[D](y,v,M)}}else y=[]}y||(y=t);y||k.error(D|| |
||||
g);if(j.call(y)==="[object Array]")if(H)if(h&&h.nodeType===1)for(g=0;y[g]!=null;g++){if(y[g]&&(y[g]===true||y[g].nodeType===1&&E(h,y[g])))l.push(t[g])}else for(g=0;y[g]!=null;g++)y[g]&&y[g].nodeType===1&&l.push(t[g]);else l.push.apply(l,y);else z(y,l);if(S){k(S,q,l,m);k.uniqueSort(l)}return l};k.uniqueSort=function(g){if(B){i=o;g.sort(B);if(i)for(var h=1;h<g.length;h++)g[h]===g[h-1]&&g.splice(h--,1)}return g};k.matches=function(g,h){return k(g,null,null,h)};k.find=function(g,h,l){var m,q;if(!g)return[]; |
||||
for(var p=0,v=n.order.length;p<v;p++){var t=n.order[p];if(q=n.leftMatch[t].exec(g)){var y=q[1];q.splice(1,1);if(y.substr(y.length-1)!=="\\"){q[1]=(q[1]||"").replace(/\\/g,"");m=n.find[t](q,h,l);if(m!=null){g=g.replace(n.match[t],"");break}}}}m||(m=h.getElementsByTagName("*"));return{set:m,expr:g}};k.filter=function(g,h,l,m){for(var q=g,p=[],v=h,t,y,S=h&&h[0]&&x(h[0]);g&&h.length;){for(var H in n.filter)if((t=n.leftMatch[H].exec(g))!=null&&t[2]){var M=n.filter[H],I,D;D=t[1];y=false;t.splice(1,1);if(D.substr(D.length- |
||||
1)!=="\\"){if(v===p)p=[];if(n.preFilter[H])if(t=n.preFilter[H](t,v,l,p,m,S)){if(t===true)continue}else y=I=true;if(t)for(var U=0;(D=v[U])!=null;U++)if(D){I=M(D,t,U,v);var Ha=m^!!I;if(l&&I!=null)if(Ha)y=true;else v[U]=false;else if(Ha){p.push(D);y=true}}if(I!==w){l||(v=p);g=g.replace(n.match[H],"");if(!y)return[];break}}}if(g===q)if(y==null)k.error(g);else break;q=g}return v};k.error=function(g){throw"Syntax error, unrecognized expression: "+g;};var n=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF-]|\\.)+)/, |
||||
CLASS:/\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(g){return g.getAttribute("href")}}, |
||||
relative:{"+":function(g,h){var l=typeof h==="string",m=l&&!/\W/.test(h);l=l&&!m;if(m)h=h.toLowerCase();m=0;for(var q=g.length,p;m<q;m++)if(p=g[m]){for(;(p=p.previousSibling)&&p.nodeType!==1;);g[m]=l||p&&p.nodeName.toLowerCase()===h?p||false:p===h}l&&k.filter(h,g,true)},">":function(g,h){var l=typeof h==="string";if(l&&!/\W/.test(h)){h=h.toLowerCase();for(var m=0,q=g.length;m<q;m++){var p=g[m];if(p){l=p.parentNode;g[m]=l.nodeName.toLowerCase()===h?l:false}}}else{m=0;for(q=g.length;m<q;m++)if(p=g[m])g[m]= |
||||
l?p.parentNode:p.parentNode===h;l&&k.filter(h,g,true)}},"":function(g,h,l){var m=e++,q=d;if(typeof h==="string"&&!/\W/.test(h)){var p=h=h.toLowerCase();q=b}q("parentNode",h,m,g,p,l)},"~":function(g,h,l){var m=e++,q=d;if(typeof h==="string"&&!/\W/.test(h)){var p=h=h.toLowerCase();q=b}q("previousSibling",h,m,g,p,l)}},find:{ID:function(g,h,l){if(typeof h.getElementById!=="undefined"&&!l)return(g=h.getElementById(g[1]))?[g]:[]},NAME:function(g,h){if(typeof h.getElementsByName!=="undefined"){var l=[]; |
||||
h=h.getElementsByName(g[1]);for(var m=0,q=h.length;m<q;m++)h[m].getAttribute("name")===g[1]&&l.push(h[m]);return l.length===0?null:l}},TAG:function(g,h){return h.getElementsByTagName(g[1])}},preFilter:{CLASS:function(g,h,l,m,q,p){g=" "+g[1].replace(/\\/g,"")+" ";if(p)return g;p=0;for(var v;(v=h[p])!=null;p++)if(v)if(q^(v.className&&(" "+v.className+" ").replace(/[\t\n]/g," ").indexOf(g)>=0))l||m.push(v);else if(l)h[p]=false;return false},ID:function(g){return g[1].replace(/\\/g,"")},TAG:function(g){return g[1].toLowerCase()}, |
||||
CHILD:function(g){if(g[1]==="nth"){var h=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(g[2]==="even"&&"2n"||g[2]==="odd"&&"2n+1"||!/\D/.test(g[2])&&"0n+"+g[2]||g[2]);g[2]=h[1]+(h[2]||1)-0;g[3]=h[3]-0}g[0]=e++;return g},ATTR:function(g,h,l,m,q,p){h=g[1].replace(/\\/g,"");if(!p&&n.attrMap[h])g[1]=n.attrMap[h];if(g[2]==="~=")g[4]=" "+g[4]+" ";return g},PSEUDO:function(g,h,l,m,q){if(g[1]==="not")if((f.exec(g[3])||"").length>1||/^\w/.test(g[3]))g[3]=k(g[3],null,null,h);else{g=k.filter(g[3],h,l,true^q);l||m.push.apply(m, |
||||
g);return false}else if(n.match.POS.test(g[0])||n.match.CHILD.test(g[0]))return true;return g},POS:function(g){g.unshift(true);return g}},filters:{enabled:function(g){return g.disabled===false&&g.type!=="hidden"},disabled:function(g){return g.disabled===true},checked:function(g){return g.checked===true},selected:function(g){return g.selected===true},parent:function(g){return!!g.firstChild},empty:function(g){return!g.firstChild},has:function(g,h,l){return!!k(l[3],g).length},header:function(g){return/h\d/i.test(g.nodeName)}, |
||||
text:function(g){return"text"===g.type},radio:function(g){return"radio"===g.type},checkbox:function(g){return"checkbox"===g.type},file:function(g){return"file"===g.type},password:function(g){return"password"===g.type},submit:function(g){return"submit"===g.type},image:function(g){return"image"===g.type},reset:function(g){return"reset"===g.type},button:function(g){return"button"===g.type||g.nodeName.toLowerCase()==="button"},input:function(g){return/input|select|textarea|button/i.test(g.nodeName)}}, |
||||
setFilters:{first:function(g,h){return h===0},last:function(g,h,l,m){return h===m.length-1},even:function(g,h){return h%2===0},odd:function(g,h){return h%2===1},lt:function(g,h,l){return h<l[3]-0},gt:function(g,h,l){return h>l[3]-0},nth:function(g,h,l){return l[3]-0===h},eq:function(g,h,l){return l[3]-0===h}},filter:{PSEUDO:function(g,h,l,m){var q=h[1],p=n.filters[q];if(p)return p(g,l,h,m);else if(q==="contains")return(g.textContent||g.innerText||a([g])||"").indexOf(h[3])>=0;else if(q==="not"){h= |
||||
h[3];l=0;for(m=h.length;l<m;l++)if(h[l]===g)return false;return true}else k.error("Syntax error, unrecognized expression: "+q)},CHILD:function(g,h){var l=h[1],m=g;switch(l){case "only":case "first":for(;m=m.previousSibling;)if(m.nodeType===1)return false;if(l==="first")return true;m=g;case "last":for(;m=m.nextSibling;)if(m.nodeType===1)return false;return true;case "nth":l=h[2];var q=h[3];if(l===1&&q===0)return true;h=h[0];var p=g.parentNode;if(p&&(p.sizcache!==h||!g.nodeIndex)){var v=0;for(m=p.firstChild;m;m= |
||||
m.nextSibling)if(m.nodeType===1)m.nodeIndex=++v;p.sizcache=h}g=g.nodeIndex-q;return l===0?g===0:g%l===0&&g/l>=0}},ID:function(g,h){return g.nodeType===1&&g.getAttribute("id")===h},TAG:function(g,h){return h==="*"&&g.nodeType===1||g.nodeName.toLowerCase()===h},CLASS:function(g,h){return(" "+(g.className||g.getAttribute("class"))+" ").indexOf(h)>-1},ATTR:function(g,h){var l=h[1];g=n.attrHandle[l]?n.attrHandle[l](g):g[l]!=null?g[l]:g.getAttribute(l);l=g+"";var m=h[2];h=h[4];return g==null?m==="!=":m=== |
||||
"="?l===h:m==="*="?l.indexOf(h)>=0:m==="~="?(" "+l+" ").indexOf(h)>=0:!h?l&&g!==false:m==="!="?l!==h:m==="^="?l.indexOf(h)===0:m==="$="?l.substr(l.length-h.length)===h:m==="|="?l===h||l.substr(0,h.length+1)===h+"-":false},POS:function(g,h,l,m){var q=n.setFilters[h[2]];if(q)return q(g,l,h,m)}}},r=n.match.POS;for(var u in n.match){n.match[u]=new RegExp(n.match[u].source+/(?![^\[]*\])(?![^\(]*\))/.source);n.leftMatch[u]=new RegExp(/(^(?:.|\r|\n)*?)/.source+n.match[u].source.replace(/\\(\d+)/g,function(g, |
||||
h){return"\\"+(h-0+1)}))}var z=function(g,h){g=Array.prototype.slice.call(g,0);if(h){h.push.apply(h,g);return h}return g};try{Array.prototype.slice.call(s.documentElement.childNodes,0)}catch(C){z=function(g,h){h=h||[];if(j.call(g)==="[object Array]")Array.prototype.push.apply(h,g);else if(typeof g.length==="number")for(var l=0,m=g.length;l<m;l++)h.push(g[l]);else for(l=0;g[l];l++)h.push(g[l]);return h}}var B;if(s.documentElement.compareDocumentPosition)B=function(g,h){if(!g.compareDocumentPosition|| |
||||
!h.compareDocumentPosition){if(g==h)i=true;return g.compareDocumentPosition?-1:1}g=g.compareDocumentPosition(h)&4?-1:g===h?0:1;if(g===0)i=true;return g};else if("sourceIndex"in s.documentElement)B=function(g,h){if(!g.sourceIndex||!h.sourceIndex){if(g==h)i=true;return g.sourceIndex?-1:1}g=g.sourceIndex-h.sourceIndex;if(g===0)i=true;return g};else if(s.createRange)B=function(g,h){if(!g.ownerDocument||!h.ownerDocument){if(g==h)i=true;return g.ownerDocument?-1:1}var l=g.ownerDocument.createRange(),m= |
||||
h.ownerDocument.createRange();l.setStart(g,0);l.setEnd(g,0);m.setStart(h,0);m.setEnd(h,0);g=l.compareBoundaryPoints(Range.START_TO_END,m);if(g===0)i=true;return g};(function(){var g=s.createElement("div"),h="script"+(new Date).getTime();g.innerHTML="<a name='"+h+"'/>";var l=s.documentElement;l.insertBefore(g,l.firstChild);if(s.getElementById(h)){n.find.ID=function(m,q,p){if(typeof q.getElementById!=="undefined"&&!p)return(q=q.getElementById(m[1]))?q.id===m[1]||typeof q.getAttributeNode!=="undefined"&& |
||||
q.getAttributeNode("id").nodeValue===m[1]?[q]:w:[]};n.filter.ID=function(m,q){var p=typeof m.getAttributeNode!=="undefined"&&m.getAttributeNode("id");return m.nodeType===1&&p&&p.nodeValue===q}}l.removeChild(g);l=g=null})();(function(){var g=s.createElement("div");g.appendChild(s.createComment(""));if(g.getElementsByTagName("*").length>0)n.find.TAG=function(h,l){l=l.getElementsByTagName(h[1]);if(h[1]==="*"){h=[];for(var m=0;l[m];m++)l[m].nodeType===1&&h.push(l[m]);l=h}return l};g.innerHTML="<a href='#'></a>"; |
||||
if(g.firstChild&&typeof g.firstChild.getAttribute!=="undefined"&&g.firstChild.getAttribute("href")!=="#")n.attrHandle.href=function(h){return h.getAttribute("href",2)};g=null})();s.querySelectorAll&&function(){var g=k,h=s.createElement("div");h.innerHTML="<p class='TEST'></p>";if(!(h.querySelectorAll&&h.querySelectorAll(".TEST").length===0)){k=function(m,q,p,v){q=q||s;if(!v&&q.nodeType===9&&!x(q))try{return z(q.querySelectorAll(m),p)}catch(t){}return g(m,q,p,v)};for(var l in g)k[l]=g[l];h=null}}(); |
||||
(function(){var g=s.createElement("div");g.innerHTML="<div class='test e'></div><div class='test'></div>";if(!(!g.getElementsByClassName||g.getElementsByClassName("e").length===0)){g.lastChild.className="e";if(g.getElementsByClassName("e").length!==1){n.order.splice(1,0,"CLASS");n.find.CLASS=function(h,l,m){if(typeof l.getElementsByClassName!=="undefined"&&!m)return l.getElementsByClassName(h[1])};g=null}}})();var E=s.compareDocumentPosition?function(g,h){return!!(g.compareDocumentPosition(h)&16)}: |
||||
function(g,h){return g!==h&&(g.contains?g.contains(h):true)},x=function(g){return(g=(g?g.ownerDocument||g:0).documentElement)?g.nodeName!=="HTML":false},ga=function(g,h){var l=[],m="",q;for(h=h.nodeType?[h]:h;q=n.match.PSEUDO.exec(g);){m+=q[0];g=g.replace(n.match.PSEUDO,"")}g=n.relative[g]?g+"*":g;q=0;for(var p=h.length;q<p;q++)k(g,h[q],l);return k.filter(m,l)};c.find=k;c.expr=k.selectors;c.expr[":"]=c.expr.filters;c.unique=k.uniqueSort;c.text=a;c.isXMLDoc=x;c.contains=E})();var eb=/Until$/,fb=/^(?:parents|prevUntil|prevAll)/, |
||||
gb=/,/;R=Array.prototype.slice;var Ia=function(a,b,d){if(c.isFunction(b))return c.grep(a,function(e,j){return!!b.call(e,j,e)===d});else if(b.nodeType)return c.grep(a,function(e){return e===b===d});else if(typeof b==="string"){var f=c.grep(a,function(e){return e.nodeType===1});if(Ua.test(b))return c.filter(b,f,!d);else b=c.filter(b,f)}return c.grep(a,function(e){return c.inArray(e,b)>=0===d})};c.fn.extend({find:function(a){for(var b=this.pushStack("","find",a),d=0,f=0,e=this.length;f<e;f++){d=b.length; |
||||
c.find(a,this[f],b);if(f>0)for(var j=d;j<b.length;j++)for(var i=0;i<d;i++)if(b[i]===b[j]){b.splice(j--,1);break}}return b},has:function(a){var b=c(a);return this.filter(function(){for(var d=0,f=b.length;d<f;d++)if(c.contains(this,b[d]))return true})},not:function(a){return this.pushStack(Ia(this,a,false),"not",a)},filter:function(a){return this.pushStack(Ia(this,a,true),"filter",a)},is:function(a){return!!a&&c.filter(a,this).length>0},closest:function(a,b){if(c.isArray(a)){var d=[],f=this[0],e,j= |
||||
{},i;if(f&&a.length){e=0;for(var o=a.length;e<o;e++){i=a[e];j[i]||(j[i]=c.expr.match.POS.test(i)?c(i,b||this.context):i)}for(;f&&f.ownerDocument&&f!==b;){for(i in j){e=j[i];if(e.jquery?e.index(f)>-1:c(f).is(e)){d.push({selector:i,elem:f});delete j[i]}}f=f.parentNode}}return d}var k=c.expr.match.POS.test(a)?c(a,b||this.context):null;return this.map(function(n,r){for(;r&&r.ownerDocument&&r!==b;){if(k?k.index(r)>-1:c(r).is(a))return r;r=r.parentNode}return null})},index:function(a){if(!a||typeof a=== |
||||
"string")return c.inArray(this[0],a?c(a):this.parent().children());return c.inArray(a.jquery?a[0]:a,this)},add:function(a,b){a=typeof a==="string"?c(a,b||this.context):c.makeArray(a);b=c.merge(this.get(),a);return this.pushStack(qa(a[0])||qa(b[0])?b:c.unique(b))},andSelf:function(){return this.add(this.prevObject)}});c.each({parent:function(a){return(a=a.parentNode)&&a.nodeType!==11?a:null},parents:function(a){return c.dir(a,"parentNode")},parentsUntil:function(a,b,d){return c.dir(a,"parentNode", |
||||
d)},next:function(a){return c.nth(a,2,"nextSibling")},prev:function(a){return c.nth(a,2,"previousSibling")},nextAll:function(a){return c.dir(a,"nextSibling")},prevAll:function(a){return c.dir(a,"previousSibling")},nextUntil:function(a,b,d){return c.dir(a,"nextSibling",d)},prevUntil:function(a,b,d){return c.dir(a,"previousSibling",d)},siblings:function(a){return c.sibling(a.parentNode.firstChild,a)},children:function(a){return c.sibling(a.firstChild)},contents:function(a){return c.nodeName(a,"iframe")? |
||||
a.contentDocument||a.contentWindow.document:c.makeArray(a.childNodes)}},function(a,b){c.fn[a]=function(d,f){var e=c.map(this,b,d);eb.test(a)||(f=d);if(f&&typeof f==="string")e=c.filter(f,e);e=this.length>1?c.unique(e):e;if((this.length>1||gb.test(f))&&fb.test(a))e=e.reverse();return this.pushStack(e,a,R.call(arguments).join(","))}});c.extend({filter:function(a,b,d){if(d)a=":not("+a+")";return c.find.matches(a,b)},dir:function(a,b,d){var f=[];for(a=a[b];a&&a.nodeType!==9&&(d===w||a.nodeType!==1||!c(a).is(d));){a.nodeType=== |
||||
1&&f.push(a);a=a[b]}return f},nth:function(a,b,d){b=b||1;for(var f=0;a;a=a[d])if(a.nodeType===1&&++f===b)break;return a},sibling:function(a,b){for(var d=[];a;a=a.nextSibling)a.nodeType===1&&a!==b&&d.push(a);return d}});var Ja=/ jQuery\d+="(?:\d+|null)"/g,V=/^\s+/,Ka=/(<([\w:]+)[^>]*?)\/>/g,hb=/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i,La=/<([\w:]+)/,ib=/<tbody/i,jb=/<|&#?\w+;/,ta=/<script|<object|<embed|<option|<style/i,ua=/checked\s*(?:[^=]|=\s*.checked.)/i,Ma=function(a,b,d){return hb.test(d)? |
||||
a:b+"></"+d+">"},F={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};F.optgroup=F.option;F.tbody=F.tfoot=F.colgroup=F.caption=F.thead;F.th=F.td;if(!c.support.htmlSerialize)F._default=[1,"div<div>","</div>"];c.fn.extend({text:function(a){if(c.isFunction(a))return this.each(function(b){var d= |
||||
c(this);d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==w)return this.empty().append((this[0]&&this[0].ownerDocument||s).createTextNode(a));return c.text(this)},wrapAll:function(a){if(c.isFunction(a))return this.each(function(d){c(this).wrapAll(a.call(this,d))});if(this[0]){var b=c(a,this[0].ownerDocument).eq(0).clone(true);this[0].parentNode&&b.insertBefore(this[0]);b.map(function(){for(var d=this;d.firstChild&&d.firstChild.nodeType===1;)d=d.firstChild;return d}).append(this)}return this}, |
||||
wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})}, |
||||
prepend:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this)});else if(arguments.length){var a=c(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b, |
||||
this.nextSibling)});else if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,c(arguments[0]).toArray());return a}},remove:function(a,b){for(var d=0,f;(f=this[d])!=null;d++)if(!a||c.filter(a,[f]).length){if(!b&&f.nodeType===1){c.cleanData(f.getElementsByTagName("*"));c.cleanData([f])}f.parentNode&&f.parentNode.removeChild(f)}return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++)for(b.nodeType===1&&c.cleanData(b.getElementsByTagName("*"));b.firstChild;)b.removeChild(b.firstChild); |
||||
return this},clone:function(a){var b=this.map(function(){if(!c.support.noCloneEvent&&!c.isXMLDoc(this)){var d=this.outerHTML,f=this.ownerDocument;if(!d){d=f.createElement("div");d.appendChild(this.cloneNode(true));d=d.innerHTML}return c.clean([d.replace(Ja,"").replace(/=([^="'>\s]+\/)>/g,'="$1">').replace(V,"")],f)[0]}else return this.cloneNode(true)});if(a===true){ra(this,b);ra(this.find("*"),b.find("*"))}return b},html:function(a){if(a===w)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(Ja, |
||||
""):null;else if(typeof a==="string"&&!ta.test(a)&&(c.support.leadingWhitespace||!V.test(a))&&!F[(La.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Ka,Ma);try{for(var b=0,d=this.length;b<d;b++)if(this[b].nodeType===1){c.cleanData(this[b].getElementsByTagName("*"));this[b].innerHTML=a}}catch(f){this.empty().append(a)}}else c.isFunction(a)?this.each(function(e){var j=c(this),i=j.html();j.empty().append(function(){return a.call(this,e,i)})}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&& |
||||
this[0].parentNode){if(c.isFunction(a))return this.each(function(b){var d=c(this),f=d.html();d.replaceWith(a.call(this,b,f))});if(typeof a!=="string")a=c(a).detach();return this.each(function(){var b=this.nextSibling,d=this.parentNode;c(this).remove();b?c(b).before(a):c(d).append(a)})}else return this.pushStack(c(c.isFunction(a)?a():a),"replaceWith",a)},detach:function(a){return this.remove(a,true)},domManip:function(a,b,d){function f(u){return c.nodeName(u,"table")?u.getElementsByTagName("tbody")[0]|| |
||||
u.appendChild(u.ownerDocument.createElement("tbody")):u}var e,j,i=a[0],o=[],k;if(!c.support.checkClone&&arguments.length===3&&typeof i==="string"&&ua.test(i))return this.each(function(){c(this).domManip(a,b,d,true)});if(c.isFunction(i))return this.each(function(u){var z=c(this);a[0]=i.call(this,u,b?z.html():w);z.domManip(a,b,d)});if(this[0]){e=i&&i.parentNode;e=c.support.parentNode&&e&&e.nodeType===11&&e.childNodes.length===this.length?{fragment:e}:sa(a,this,o);k=e.fragment;if(j=k.childNodes.length=== |
||||
1?(k=k.firstChild):k.firstChild){b=b&&c.nodeName(j,"tr");for(var n=0,r=this.length;n<r;n++)d.call(b?f(this[n],j):this[n],n>0||e.cacheable||this.length>1?k.cloneNode(true):k)}o.length&&c.each(o,Qa)}return this}});c.fragments={};c.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){c.fn[a]=function(d){var f=[];d=c(d);var e=this.length===1&&this[0].parentNode;if(e&&e.nodeType===11&&e.childNodes.length===1&&d.length===1){d[b](this[0]); |
||||
return this}else{e=0;for(var j=d.length;e<j;e++){var i=(e>0?this.clone(true):this).get();c.fn[b].apply(c(d[e]),i);f=f.concat(i)}return this.pushStack(f,a,d.selector)}}});c.extend({clean:function(a,b,d,f){b=b||s;if(typeof b.createElement==="undefined")b=b.ownerDocument||b[0]&&b[0].ownerDocument||s;for(var e=[],j=0,i;(i=a[j])!=null;j++){if(typeof i==="number")i+="";if(i){if(typeof i==="string"&&!jb.test(i))i=b.createTextNode(i);else if(typeof i==="string"){i=i.replace(Ka,Ma);var o=(La.exec(i)||["", |
||||
""])[1].toLowerCase(),k=F[o]||F._default,n=k[0],r=b.createElement("div");for(r.innerHTML=k[1]+i+k[2];n--;)r=r.lastChild;if(!c.support.tbody){n=ib.test(i);o=o==="table"&&!n?r.firstChild&&r.firstChild.childNodes:k[1]==="<table>"&&!n?r.childNodes:[];for(k=o.length-1;k>=0;--k)c.nodeName(o[k],"tbody")&&!o[k].childNodes.length&&o[k].parentNode.removeChild(o[k])}!c.support.leadingWhitespace&&V.test(i)&&r.insertBefore(b.createTextNode(V.exec(i)[0]),r.firstChild);i=r.childNodes}if(i.nodeType)e.push(i);else e= |
||||
c.merge(e,i)}}if(d)for(j=0;e[j];j++)if(f&&c.nodeName(e[j],"script")&&(!e[j].type||e[j].type.toLowerCase()==="text/javascript"))f.push(e[j].parentNode?e[j].parentNode.removeChild(e[j]):e[j]);else{e[j].nodeType===1&&e.splice.apply(e,[j+1,0].concat(c.makeArray(e[j].getElementsByTagName("script"))));d.appendChild(e[j])}return e},cleanData:function(a){for(var b,d,f=c.cache,e=c.event.special,j=c.support.deleteExpando,i=0,o;(o=a[i])!=null;i++)if(d=o[c.expando]){b=f[d];if(b.events)for(var k in b.events)e[k]? |
||||
c.event.remove(o,k):Ca(o,k,b.handle);if(j)delete o[c.expando];else o.removeAttribute&&o.removeAttribute(c.expando);delete f[d]}}});var kb=/z-?index|font-?weight|opacity|zoom|line-?height/i,Na=/alpha\([^)]*\)/,Oa=/opacity=([^)]*)/,ha=/float/i,ia=/-([a-z])/ig,lb=/([A-Z])/g,mb=/^-?\d+(?:px)?$/i,nb=/^-?\d/,ob={position:"absolute",visibility:"hidden",display:"block"},pb=["Left","Right"],qb=["Top","Bottom"],rb=s.defaultView&&s.defaultView.getComputedStyle,Pa=c.support.cssFloat?"cssFloat":"styleFloat",ja= |
||||
function(a,b){return b.toUpperCase()};c.fn.css=function(a,b){return X(this,a,b,true,function(d,f,e){if(e===w)return c.curCSS(d,f);if(typeof e==="number"&&!kb.test(f))e+="px";c.style(d,f,e)})};c.extend({style:function(a,b,d){if(!a||a.nodeType===3||a.nodeType===8)return w;if((b==="width"||b==="height")&&parseFloat(d)<0)d=w;var f=a.style||a,e=d!==w;if(!c.support.opacity&&b==="opacity"){if(e){f.zoom=1;b=parseInt(d,10)+""==="NaN"?"":"alpha(opacity="+d*100+")";a=f.filter||c.curCSS(a,"filter")||"";f.filter= |
||||
Na.test(a)?a.replace(Na,b):b}return f.filter&&f.filter.indexOf("opacity=")>=0?parseFloat(Oa.exec(f.filter)[1])/100+"":""}if(ha.test(b))b=Pa;b=b.replace(ia,ja);if(e)f[b]=d;return f[b]},css:function(a,b,d,f){if(b==="width"||b==="height"){var e,j=b==="width"?pb:qb;function i(){e=b==="width"?a.offsetWidth:a.offsetHeight;f!=="border"&&c.each(j,function(){f||(e-=parseFloat(c.curCSS(a,"padding"+this,true))||0);if(f==="margin")e+=parseFloat(c.curCSS(a,"margin"+this,true))||0;else e-=parseFloat(c.curCSS(a, |
||||
"border"+this+"Width",true))||0})}a.offsetWidth!==0?i():c.swap(a,ob,i);return Math.max(0,Math.round(e))}return c.curCSS(a,b,d)},curCSS:function(a,b,d){var f,e=a.style;if(!c.support.opacity&&b==="opacity"&&a.currentStyle){f=Oa.test(a.currentStyle.filter||"")?parseFloat(RegExp.$1)/100+"":"";return f===""?"1":f}if(ha.test(b))b=Pa;if(!d&&e&&e[b])f=e[b];else if(rb){if(ha.test(b))b="float";b=b.replace(lb,"-$1").toLowerCase();e=a.ownerDocument.defaultView;if(!e)return null;if(a=e.getComputedStyle(a,null))f= |
||||
a.getPropertyValue(b);if(b==="opacity"&&f==="")f="1"}else if(a.currentStyle){d=b.replace(ia,ja);f=a.currentStyle[b]||a.currentStyle[d];if(!mb.test(f)&&nb.test(f)){b=e.left;var j=a.runtimeStyle.left;a.runtimeStyle.left=a.currentStyle.left;e.left=d==="fontSize"?"1em":f||0;f=e.pixelLeft+"px";e.left=b;a.runtimeStyle.left=j}}return f},swap:function(a,b,d){var f={};for(var e in b){f[e]=a.style[e];a.style[e]=b[e]}d.call(a);for(e in b)a.style[e]=f[e]}});if(c.expr&&c.expr.filters){c.expr.filters.hidden=function(a){var b= |
||||
a.offsetWidth,d=a.offsetHeight,f=a.nodeName.toLowerCase()==="tr";return b===0&&d===0&&!f?true:b>0&&d>0&&!f?false:c.curCSS(a,"display")==="none"};c.expr.filters.visible=function(a){return!c.expr.filters.hidden(a)}}var sb=J(),tb=/<script(.|\s)*?\/script>/gi,ub=/select|textarea/i,vb=/color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week/i,N=/=\?(&|$)/,ka=/\?/,wb=/(\?|&)_=.*?(&|$)/,xb=/^(\w+:)?\/\/([^\/?#]+)/,yb=/%20/g,zb=c.fn.load;c.fn.extend({load:function(a,b,d){if(typeof a!== |
||||
"string")return zb.call(this,a);else if(!this.length)return this;var f=a.indexOf(" ");if(f>=0){var e=a.slice(f,a.length);a=a.slice(0,f)}f="GET";if(b)if(c.isFunction(b)){d=b;b=null}else if(typeof b==="object"){b=c.param(b,c.ajaxSettings.traditional);f="POST"}var j=this;c.ajax({url:a,type:f,dataType:"html",data:b,complete:function(i,o){if(o==="success"||o==="notmodified")j.html(e?c("<div />").append(i.responseText.replace(tb,"")).find(e):i.responseText);d&&j.each(d,[i.responseText,o,i])}});return this}, |
||||
serialize:function(){return c.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?c.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||ub.test(this.nodeName)||vb.test(this.type))}).map(function(a,b){a=c(this).val();return a==null?null:c.isArray(a)?c.map(a,function(d){return{name:b.name,value:d}}):{name:b.name,value:a}}).get()}});c.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "), |
||||
function(a,b){c.fn[b]=function(d){return this.bind(b,d)}});c.extend({get:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b=null}return c.ajax({type:"GET",url:a,data:b,success:d,dataType:f})},getScript:function(a,b){return c.get(a,null,b,"script")},getJSON:function(a,b,d){return c.get(a,b,d,"json")},post:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b={}}return c.ajax({type:"POST",url:a,data:b,success:d,dataType:f})},ajaxSetup:function(a){c.extend(c.ajaxSettings,a)},ajaxSettings:{url:location.href, |
||||
global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:A.XMLHttpRequest&&(A.location.protocol!=="file:"||!A.ActiveXObject)?function(){return new A.XMLHttpRequest}:function(){try{return new A.ActiveXObject("Microsoft.XMLHTTP")}catch(a){}},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},etag:{},ajax:function(a){function b(){e.success&& |
||||
e.success.call(k,o,i,x);e.global&&f("ajaxSuccess",[x,e])}function d(){e.complete&&e.complete.call(k,x,i);e.global&&f("ajaxComplete",[x,e]);e.global&&!--c.active&&c.event.trigger("ajaxStop")}function f(q,p){(e.context?c(e.context):c.event).trigger(q,p)}var e=c.extend(true,{},c.ajaxSettings,a),j,i,o,k=a&&a.context||e,n=e.type.toUpperCase();if(e.data&&e.processData&&typeof e.data!=="string")e.data=c.param(e.data,e.traditional);if(e.dataType==="jsonp"){if(n==="GET")N.test(e.url)||(e.url+=(ka.test(e.url)? |
||||
"&":"?")+(e.jsonp||"callback")+"=?");else if(!e.data||!N.test(e.data))e.data=(e.data?e.data+"&":"")+(e.jsonp||"callback")+"=?";e.dataType="json"}if(e.dataType==="json"&&(e.data&&N.test(e.data)||N.test(e.url))){j=e.jsonpCallback||"jsonp"+sb++;if(e.data)e.data=(e.data+"").replace(N,"="+j+"$1");e.url=e.url.replace(N,"="+j+"$1");e.dataType="script";A[j]=A[j]||function(q){o=q;b();d();A[j]=w;try{delete A[j]}catch(p){}z&&z.removeChild(C)}}if(e.dataType==="script"&&e.cache===null)e.cache=false;if(e.cache=== |
||||
false&&n==="GET"){var r=J(),u=e.url.replace(wb,"$1_="+r+"$2");e.url=u+(u===e.url?(ka.test(e.url)?"&":"?")+"_="+r:"")}if(e.data&&n==="GET")e.url+=(ka.test(e.url)?"&":"?")+e.data;e.global&&!c.active++&&c.event.trigger("ajaxStart");r=(r=xb.exec(e.url))&&(r[1]&&r[1]!==location.protocol||r[2]!==location.host);if(e.dataType==="script"&&n==="GET"&&r){var z=s.getElementsByTagName("head")[0]||s.documentElement,C=s.createElement("script");C.src=e.url;if(e.scriptCharset)C.charset=e.scriptCharset;if(!j){var B= |
||||
false;C.onload=C.onreadystatechange=function(){if(!B&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){B=true;b();d();C.onload=C.onreadystatechange=null;z&&C.parentNode&&z.removeChild(C)}}}z.insertBefore(C,z.firstChild);return w}var E=false,x=e.xhr();if(x){e.username?x.open(n,e.url,e.async,e.username,e.password):x.open(n,e.url,e.async);try{if(e.data||a&&a.contentType)x.setRequestHeader("Content-Type",e.contentType);if(e.ifModified){c.lastModified[e.url]&&x.setRequestHeader("If-Modified-Since", |
||||
c.lastModified[e.url]);c.etag[e.url]&&x.setRequestHeader("If-None-Match",c.etag[e.url])}r||x.setRequestHeader("X-Requested-With","XMLHttpRequest");x.setRequestHeader("Accept",e.dataType&&e.accepts[e.dataType]?e.accepts[e.dataType]+", */*":e.accepts._default)}catch(ga){}if(e.beforeSend&&e.beforeSend.call(k,x,e)===false){e.global&&!--c.active&&c.event.trigger("ajaxStop");x.abort();return false}e.global&&f("ajaxSend",[x,e]);var g=x.onreadystatechange=function(q){if(!x||x.readyState===0||q==="abort"){E|| |
||||
d();E=true;if(x)x.onreadystatechange=c.noop}else if(!E&&x&&(x.readyState===4||q==="timeout")){E=true;x.onreadystatechange=c.noop;i=q==="timeout"?"timeout":!c.httpSuccess(x)?"error":e.ifModified&&c.httpNotModified(x,e.url)?"notmodified":"success";var p;if(i==="success")try{o=c.httpData(x,e.dataType,e)}catch(v){i="parsererror";p=v}if(i==="success"||i==="notmodified")j||b();else c.handleError(e,x,i,p);d();q==="timeout"&&x.abort();if(e.async)x=null}};try{var h=x.abort;x.abort=function(){x&&h.call(x); |
||||
g("abort")}}catch(l){}e.async&&e.timeout>0&&setTimeout(function(){x&&!E&&g("timeout")},e.timeout);try{x.send(n==="POST"||n==="PUT"||n==="DELETE"?e.data:null)}catch(m){c.handleError(e,x,null,m);d()}e.async||g();return x}},handleError:function(a,b,d,f){if(a.error)a.error.call(a.context||a,b,d,f);if(a.global)(a.context?c(a.context):c.event).trigger("ajaxError",[b,a,f])},active:0,httpSuccess:function(a){try{return!a.status&&location.protocol==="file:"||a.status>=200&&a.status<300||a.status===304||a.status=== |
||||
1223||a.status===0}catch(b){}return false},httpNotModified:function(a,b){var d=a.getResponseHeader("Last-Modified"),f=a.getResponseHeader("Etag");if(d)c.lastModified[b]=d;if(f)c.etag[b]=f;return a.status===304||a.status===0},httpData:function(a,b,d){var f=a.getResponseHeader("content-type")||"",e=b==="xml"||!b&&f.indexOf("xml")>=0;a=e?a.responseXML:a.responseText;e&&a.documentElement.nodeName==="parsererror"&&c.error("parsererror");if(d&&d.dataFilter)a=d.dataFilter(a,b);if(typeof a==="string")if(b=== |
||||
"json"||!b&&f.indexOf("json")>=0)a=c.parseJSON(a);else if(b==="script"||!b&&f.indexOf("javascript")>=0)c.globalEval(a);return a},param:function(a,b){function d(i,o){if(c.isArray(o))c.each(o,function(k,n){b||/\[\]$/.test(i)?f(i,n):d(i+"["+(typeof n==="object"||c.isArray(n)?k:"")+"]",n)});else!b&&o!=null&&typeof o==="object"?c.each(o,function(k,n){d(i+"["+k+"]",n)}):f(i,o)}function f(i,o){o=c.isFunction(o)?o():o;e[e.length]=encodeURIComponent(i)+"="+encodeURIComponent(o)}var e=[];if(b===w)b=c.ajaxSettings.traditional; |
||||
if(c.isArray(a)||a.jquery)c.each(a,function(){f(this.name,this.value)});else for(var j in a)d(j,a[j]);return e.join("&").replace(yb,"+")}});var la={},Ab=/toggle|show|hide/,Bb=/^([+-]=)?([\d+-.]+)(.*)$/,W,va=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];c.fn.extend({show:function(a,b){if(a||a===0)return this.animate(K("show",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay"); |
||||
this[a].style.display=d||"";if(c.css(this[a],"display")==="none"){d=this[a].nodeName;var f;if(la[d])f=la[d];else{var e=c("<"+d+" />").appendTo("body");f=e.css("display");if(f==="none")f="block";e.remove();la[d]=f}c.data(this[a],"olddisplay",f)}}a=0;for(b=this.length;a<b;a++)this[a].style.display=c.data(this[a],"olddisplay")||"";return this}},hide:function(a,b){if(a||a===0)return this.animate(K("hide",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay");!d&&d!=="none"&&c.data(this[a], |
||||
"olddisplay",c.css(this[a],"display"))}a=0;for(b=this.length;a<b;a++)this[a].style.display="none";return this}},_toggle:c.fn.toggle,toggle:function(a,b){var d=typeof a==="boolean";if(c.isFunction(a)&&c.isFunction(b))this._toggle.apply(this,arguments);else a==null||d?this.each(function(){var f=d?a:c(this).is(":hidden");c(this)[f?"show":"hide"]()}):this.animate(K("toggle",3),a,b);return this},fadeTo:function(a,b,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,d)}, |
||||
animate:function(a,b,d,f){var e=c.speed(b,d,f);if(c.isEmptyObject(a))return this.each(e.complete);return this[e.queue===false?"each":"queue"](function(){var j=c.extend({},e),i,o=this.nodeType===1&&c(this).is(":hidden"),k=this;for(i in a){var n=i.replace(ia,ja);if(i!==n){a[n]=a[i];delete a[i];i=n}if(a[i]==="hide"&&o||a[i]==="show"&&!o)return j.complete.call(this);if((i==="height"||i==="width")&&this.style){j.display=c.css(this,"display");j.overflow=this.style.overflow}if(c.isArray(a[i])){(j.specialEasing= |
||||
j.specialEasing||{})[i]=a[i][1];a[i]=a[i][0]}}if(j.overflow!=null)this.style.overflow="hidden";j.curAnim=c.extend({},a);c.each(a,function(r,u){var z=new c.fx(k,j,r);if(Ab.test(u))z[u==="toggle"?o?"show":"hide":u](a);else{var C=Bb.exec(u),B=z.cur(true)||0;if(C){u=parseFloat(C[2]);var E=C[3]||"px";if(E!=="px"){k.style[r]=(u||1)+E;B=(u||1)/z.cur(true)*B;k.style[r]=B+E}if(C[1])u=(C[1]==="-="?-1:1)*u+B;z.custom(B,u,E)}else z.custom(B,u,"")}});return true})},stop:function(a,b){var d=c.timers;a&&this.queue([]); |
||||
this.each(function(){for(var f=d.length-1;f>=0;f--)if(d[f].elem===this){b&&d[f](true);d.splice(f,1)}});b||this.dequeue();return this}});c.each({slideDown:K("show",1),slideUp:K("hide",1),slideToggle:K("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(a,b){c.fn[a]=function(d,f){return this.animate(b,d,f)}});c.extend({speed:function(a,b,d){var f=a&&typeof a==="object"?a:{complete:d||!d&&b||c.isFunction(a)&&a,duration:a,easing:d&&b||b&&!c.isFunction(b)&&b};f.duration=c.fx.off?0:typeof f.duration=== |
||||
"number"?f.duration:c.fx.speeds[f.duration]||c.fx.speeds._default;f.old=f.complete;f.complete=function(){f.queue!==false&&c(this).dequeue();c.isFunction(f.old)&&f.old.call(this)};return f},easing:{linear:function(a,b,d,f){return d+f*a},swing:function(a,b,d,f){return(-Math.cos(a*Math.PI)/2+0.5)*f+d}},timers:[],fx:function(a,b,d){this.options=b;this.elem=a;this.prop=d;if(!b.orig)b.orig={}}});c.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this);(c.fx.step[this.prop]|| |
||||
c.fx.step._default)(this);if((this.prop==="height"||this.prop==="width")&&this.elem.style)this.elem.style.display="block"},cur:function(a){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];return(a=parseFloat(c.css(this.elem,this.prop,a)))&&a>-10000?a:parseFloat(c.curCSS(this.elem,this.prop))||0},custom:function(a,b,d){function f(j){return e.step(j)}this.startTime=J();this.start=a;this.end=b;this.unit=d||this.unit||"px";this.now=this.start; |
||||
this.pos=this.state=0;var e=this;f.elem=this.elem;if(f()&&c.timers.push(f)&&!W)W=setInterval(c.fx.tick,13)},show:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.show=true;this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur());c(this.elem).show()},hide:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(a){var b=J(),d=true;if(a||b>=this.options.duration+this.startTime){this.now= |
||||
this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;for(var f in this.options.curAnim)if(this.options.curAnim[f]!==true)d=false;if(d){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;a=c.data(this.elem,"olddisplay");this.elem.style.display=a?a:this.options.display;if(c.css(this.elem,"display")==="none")this.elem.style.display="block"}this.options.hide&&c(this.elem).hide();if(this.options.hide||this.options.show)for(var e in this.options.curAnim)c.style(this.elem, |
||||
e,this.options.orig[e]);this.options.complete.call(this.elem)}return false}else{e=b-this.startTime;this.state=e/this.options.duration;a=this.options.easing||(c.easing.swing?"swing":"linear");this.pos=c.easing[this.options.specialEasing&&this.options.specialEasing[this.prop]||a](this.state,e,0,1,this.options.duration);this.now=this.start+(this.end-this.start)*this.pos;this.update()}return true}};c.extend(c.fx,{tick:function(){for(var a=c.timers,b=0;b<a.length;b++)a[b]()||a.splice(b--,1);a.length|| |
||||
c.fx.stop()},stop:function(){clearInterval(W);W=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){c.style(a.elem,"opacity",a.now)},_default:function(a){if(a.elem.style&&a.elem.style[a.prop]!=null)a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit;else a.elem[a.prop]=a.now}}});if(c.expr&&c.expr.filters)c.expr.filters.animated=function(a){return c.grep(c.timers,function(b){return a===b.elem}).length};c.fn.offset="getBoundingClientRect"in s.documentElement? |
||||
function(a){var b=this[0];if(a)return this.each(function(e){c.offset.setOffset(this,a,e)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);var d=b.getBoundingClientRect(),f=b.ownerDocument;b=f.body;f=f.documentElement;return{top:d.top+(self.pageYOffset||c.support.boxModel&&f.scrollTop||b.scrollTop)-(f.clientTop||b.clientTop||0),left:d.left+(self.pageXOffset||c.support.boxModel&&f.scrollLeft||b.scrollLeft)-(f.clientLeft||b.clientLeft||0)}}:function(a){var b= |
||||
this[0];if(a)return this.each(function(r){c.offset.setOffset(this,a,r)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);c.offset.initialize();var d=b.offsetParent,f=b,e=b.ownerDocument,j,i=e.documentElement,o=e.body;f=(e=e.defaultView)?e.getComputedStyle(b,null):b.currentStyle;for(var k=b.offsetTop,n=b.offsetLeft;(b=b.parentNode)&&b!==o&&b!==i;){if(c.offset.supportsFixedPosition&&f.position==="fixed")break;j=e?e.getComputedStyle(b,null):b.currentStyle; |
||||
k-=b.scrollTop;n-=b.scrollLeft;if(b===d){k+=b.offsetTop;n+=b.offsetLeft;if(c.offset.doesNotAddBorder&&!(c.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(b.nodeName))){k+=parseFloat(j.borderTopWidth)||0;n+=parseFloat(j.borderLeftWidth)||0}f=d;d=b.offsetParent}if(c.offset.subtractsBorderForOverflowNotVisible&&j.overflow!=="visible"){k+=parseFloat(j.borderTopWidth)||0;n+=parseFloat(j.borderLeftWidth)||0}f=j}if(f.position==="relative"||f.position==="static"){k+=o.offsetTop;n+=o.offsetLeft}if(c.offset.supportsFixedPosition&& |
||||
f.position==="fixed"){k+=Math.max(i.scrollTop,o.scrollTop);n+=Math.max(i.scrollLeft,o.scrollLeft)}return{top:k,left:n}};c.offset={initialize:function(){var a=s.body,b=s.createElement("div"),d,f,e,j=parseFloat(c.curCSS(a,"marginTop",true))||0;c.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"});b.innerHTML="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>"; |
||||
a.insertBefore(b,a.firstChild);d=b.firstChild;f=d.firstChild;e=d.nextSibling.firstChild.firstChild;this.doesNotAddBorder=f.offsetTop!==5;this.doesAddBorderForTableAndCells=e.offsetTop===5;f.style.position="fixed";f.style.top="20px";this.supportsFixedPosition=f.offsetTop===20||f.offsetTop===15;f.style.position=f.style.top="";d.style.overflow="hidden";d.style.position="relative";this.subtractsBorderForOverflowNotVisible=f.offsetTop===-5;this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==j;a.removeChild(b); |
||||
c.offset.initialize=c.noop},bodyOffset:function(a){var b=a.offsetTop,d=a.offsetLeft;c.offset.initialize();if(c.offset.doesNotIncludeMarginInBodyOffset){b+=parseFloat(c.curCSS(a,"marginTop",true))||0;d+=parseFloat(c.curCSS(a,"marginLeft",true))||0}return{top:b,left:d}},setOffset:function(a,b,d){if(/static/.test(c.curCSS(a,"position")))a.style.position="relative";var f=c(a),e=f.offset(),j=parseInt(c.curCSS(a,"top",true),10)||0,i=parseInt(c.curCSS(a,"left",true),10)||0;if(c.isFunction(b))b=b.call(a, |
||||
d,e);d={top:b.top-e.top+j,left:b.left-e.left+i};"using"in b?b.using.call(a,d):f.css(d)}};c.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),d=this.offset(),f=/^body|html$/i.test(b[0].nodeName)?{top:0,left:0}:b.offset();d.top-=parseFloat(c.curCSS(a,"marginTop",true))||0;d.left-=parseFloat(c.curCSS(a,"marginLeft",true))||0;f.top+=parseFloat(c.curCSS(b[0],"borderTopWidth",true))||0;f.left+=parseFloat(c.curCSS(b[0],"borderLeftWidth",true))||0;return{top:d.top- |
||||
f.top,left:d.left-f.left}},offsetParent:function(){return this.map(function(){for(var a=this.offsetParent||s.body;a&&!/^body|html$/i.test(a.nodeName)&&c.css(a,"position")==="static";)a=a.offsetParent;return a})}});c.each(["Left","Top"],function(a,b){var d="scroll"+b;c.fn[d]=function(f){var e=this[0],j;if(!e)return null;if(f!==w)return this.each(function(){if(j=wa(this))j.scrollTo(!a?f:c(j).scrollLeft(),a?f:c(j).scrollTop());else this[d]=f});else return(j=wa(e))?"pageXOffset"in j?j[a?"pageYOffset": |
||||
"pageXOffset"]:c.support.boxModel&&j.document.documentElement[d]||j.document.body[d]:e[d]}});c.each(["Height","Width"],function(a,b){var d=b.toLowerCase();c.fn["inner"+b]=function(){return this[0]?c.css(this[0],d,false,"padding"):null};c.fn["outer"+b]=function(f){return this[0]?c.css(this[0],d,false,f?"margin":"border"):null};c.fn[d]=function(f){var e=this[0];if(!e)return f==null?null:this;if(c.isFunction(f))return this.each(function(j){var i=c(this);i[d](f.call(this,j,i[d]()))});return"scrollTo"in |
||||
e&&e.document?e.document.compatMode==="CSS1Compat"&&e.document.documentElement["client"+b]||e.document.body["client"+b]:e.nodeType===9?Math.max(e.documentElement["client"+b],e.body["scroll"+b],e.documentElement["scroll"+b],e.body["offset"+b],e.documentElement["offset"+b]):f===w?c.css(e,d):this.css(d,typeof f==="string"?f:f+"px")}});A.jQuery=A.$=c})(window); |
||||
@ -0,0 +1,8 @@
|
||||
/* |
||||
// Infinite Scroll jQuery plugin
|
||||
// copyright Paul Irish, licensed GPL & MIT
|
||||
// version 1.5.100504
|
||||
|
||||
// home and docs: http://www.infinite-scroll.com
|
||||
*/ |
||||
(function(A){A.fn.infinitescroll=function(R,O){function E(){if(B.debug){window.console&&console.log.call(console,arguments)}}function H(T){for(var S in T){if(S.indexOf&&S.indexOf("Selector")>-1&&A(T[S]).length===0){E("Your "+S+" found no elements.");return false}return true}}function N(S){S.match(C)?S.match(C)[2]:S;if(S.match(/^(.*?)\b2\b(.*?$)/)){S=S.match(/^(.*?)\b2\b(.*?$)/).slice(1)}else{if(S.match(/^(.*?)2(.*?$)/)){if(S.match(/^(.*?page=)2(\/.*|$)/)){S=S.match(/^(.*?page=)2(\/.*|$)/).slice(1);return S}E("Trying backup next selector parse technique. Treacherous waters here, matey.");S=S.match(/^(.*?)2(.*?$)/).slice(1)}else{if(S.match(/^(.*?page=)1(\/.*|$)/)){S=S.match(/^(.*?page=)1(\/.*|$)/).slice(1);return S}E("Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.");K.isInvalidPage=true}}return S}function L(){return B.localMode?(A(K.container)[0].scrollHeight&&A(K.container)[0].scrollHeight):A(document).height()}function F(){var S=0+L()-(B.localMode?A(K.container).scrollTop():(A(K.container).scrollTop()||A(K.container.ownerDocument.body).scrollTop()))-A(B.localMode?K.container:window).height();E("math:",S,K.pixelsFromNavToBottom);return(S-B.bufferPx<K.pixelsFromNavToBottom)}function M(){K.loadingMsg.find("img").hide().parent().find("div").html(B.donetext).animate({opacity:1},2000).fadeOut("normal");B.errorCallback()}function D(){if(K.isDuringAjax||K.isInvalidPage||K.isDone){return }if(!F(B,K)){return }A(document).trigger("retrieve.infscr")}function G(){K.isDuringAjax=true;K.loadingMsg.appendTo(B.contentSelector).show();A(B.navSelector).hide();K.currPage++;E("heading into ajax",Q);J=A(B.contentSelector).is("table")?A("<tbody/>"):A("<div/>");P=document.createDocumentFragment();J.load(Q.join(K.currPage)+" "+B.itemSelector,null,I)}function I(){if(K.isDone){M();return false}else{var T=J.children().get();if(T.length==0){return A.event.trigger("ajaxError",[{status:404}])}while(J[0].firstChild){P.appendChild(J[0].firstChild)}A(B.contentSelector)[0].appendChild(P);K.loadingMsg.fadeOut("normal");if(B.animate){var S=A(window).scrollTop()+A("#infscr-loading").height()+B.extraScrollPx+"px";A("html,body").animate({scrollTop:S},800,function(){K.isDuringAjax=false})}O.call(A(B.contentSelector)[0],T);if(!B.animate){K.isDuringAjax=false}}}A.browser.ie6=A.browser.msie&&A.browser.version<7;var B=A.extend({},A.infinitescroll.defaults,R),K=A.infinitescroll,J,P;O=O||function(){};if(!H(B)){return false}K.container=B.localMode?this:document.documentElement;B.contentSelector=B.contentSelector||this;var C=/(.*?\/\/).*?(\/.*)/,Q=A(B.nextSelector).attr("href");if(!Q){E("Navigation selector not found");return }Q=N(Q);if(B.localMode){A(K.container)[0].scrollTop=0}K.pixelsFromNavToBottom=L()+(K.container==document.documentElement?0:A(K.container).offset().top)-A(B.navSelector).offset().top;K.loadingMsg=A('<div id="infscr-loading" style="text-align: center;"><img alt="Loading..." src="'+B.loadingImg+'" /><div>'+B.loadingText+"</div></div>");(new Image()).src=B.loadingImg;A(document).ajaxError(function(T,U,S){E("Page not found. Self-destructing...");if(U.status==404){M();K.isDone=true;A(B.localMode?this:window).unbind("scroll.infscr")}});A(B.localMode?this:window).bind("scroll.infscr",D).trigger("scroll.infscr");A(document).bind("retrieve.infscr",G);return this};A.infinitescroll={defaults:{debug:false,preload:false,nextSelector:"div.navigation a:first",loadingImg:"http://www.infinite-scroll.com/loading.gif",loadingText:"<em>Loading the next set of posts...</em>",donetext:"<em>Congratulations, you've reached the end of the internet.</em>",navSelector:"div.navigation",contentSelector:null,extraScrollPx:150,itemSelector:"div.post",animate:false,localMode:false,bufferPx:40,errorCallback:function(){}},loadingImg:undefined,loadingMsg:undefined,container:undefined,currPage:1,currDOMChunk:null,isDuringAjax:false,isInvalidPage:false,isDone:false}})(jQuery); |
||||
@ -0,0 +1,27 @@
|
||||
/* |
||||
* This is just a utitlity script so we can
|
||||
* add random content to mercutio-ed layouts |
||||
*/ |
||||
|
||||
var
|
||||
|
||||
loremStr = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu interdum odio. Cras lobortis mauris vitae tellus consectetur sit amet cursus ipsum vestibulum. Duis facilisis sodales tristique. Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Donec gravida faucibus magna, nec laoreet nibh placerat et. Cras magna lorem, faucibus vitae rhoncus ac, tincidunt vel velit. Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Curabitur sagittis libero eu augue luctus ullamcorper. Phasellus sed tortor sed nunc elementum rutrum. Maecenas eu enim a nulla faucibus commodo iaculis tempor orci. Integer at ligula id mauris semper bibendum at eu erat. Integer vestibulum sem nec risus iaculis eu rhoncus tellus tempor. Suspendisse potenti. Sed bibendum nibh non velit blandit eu adipiscing ligula consectetur. Vivamus turpis quam, fringilla a elementum a, condimentum non purus. Pellentesque sed bibendum ante. Fusce elit mauris, pulvinar sed rutrum eget, malesuada in nisi. Etiam sagittis pretium ligula. Aliquam a metus orci, a molestie lacus. Suspendisse potenti. Mauris vel volutpat nunc. In condimentum imperdiet scelerisque. Cras aliquam tristique velit non iaculis. Aliquam pulvinar sagittis sodales. Aenean risus orci, elementum quis accumsan eget, elementum cursus tellus. Nunc vel laoreet odio. Maecenas sollicitudin, tellus vel bibendum ornare, tellus nibh hendrerit lorem, quis volutpat turpis odio ac ligula. Etiam tempus neque id libero feugiat fringilla. Nullam posuere consequat vehicula. Mauris in lorem eget sem tempor condimentum. Integer rhoncus accumsan elit eu gravida. Donec dictum ante ac nisl adipiscing vel tempor libero luctus. Praesent bibendum augue at erat semper rutrum. Fusce vel orci nulla. Vivamus condimentum, odio vel condimentum tempus, mauris ipsum gravida odio, sed viverra dolor velit sit amet magna. Donec aliquam malesuada ipsum ut suscipit. Vivamus porttitor posuere iaculis. Vestibulum lectus lorem, tincidunt at sodales et, euismod vel quam. Sed eget urna nunc. In quis felis nunc. Aliquam erat volutpat. Cras ut dui ac leo aliquet placerat faucibus in nulla. Mauris pharetra ligula et tortor ultricies eget elementum libero blandit. Praesent tincidunt, mi quis aliquam faucibus, leo risus placerat odio, ac adipiscing ante urna at tortor.', |
||||
|
||||
lorem = loremStr.split("."), |
||||
|
||||
loremLen = lorem.length, |
||||
|
||||
randoLoremText = function() { |
||||
var
|
||||
loremText = '', |
||||
sentences = Math.random() * 5 |
||||
; |
||||
for (var j=0; j < sentences; j++ ) { |
||||
var whichSentence = Math.floor( Math.random() * loremLen ); |
||||
loremText += lorem[whichSentence] + '. '; |
||||
} |
||||
return loremText; |
||||
} |
||||
|
||||
; |
||||
|
||||
@ -0,0 +1,208 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
itemSelector: '.box' |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,190 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
itemSelector: '.box' |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,182 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
itemSelector: '.box' |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,185 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › 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 Mercutio</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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#demo').mercutio({ |
||||
columnWidth: 100, |
||||
itemSelector: '.box' |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,252 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>jQuery Mercutio › Tumblelog example</title> |
||||
|
||||
<link rel="stylesheet" href="css/style.css" media="screen" /> |
||||
|
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<div id="site-nav"> |
||||
<h1>jQuery Mercutio</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 Mercutio.</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>).mercutio({ 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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4155700&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&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>— 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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6185327&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7174318&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&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 — 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 Mercutio 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.mercutio.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
$('#tumblelog').mercutio({columnWidth: 240}) |
||||
}) |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,92 @@
|
||||
/************************************************* |
||||
** jQuery Mercutio version 0.1 |
||||
** Copyright David DeSandro, licensed MIT |
||||
** http://desandro.com/resources/jquery-mercutio
|
||||
**************************************************/ |
||||
(function($){
|
||||
|
||||
/*! |
||||
* smartresize: debounced resize event for jQuery |
||||
* http://github.com/lrbabe/jquery-smartresize
|
||||
* |
||||
* Copyright (c) 2009 Louis-Remi Babe |
||||
* Licensed under the GPL license. |
||||
* http://docs.jquery.com/License
|
||||
* |
||||
*/ |
||||
var $event = $.event, |
||||
resizeTimeout; |
||||
|
||||
$event.special.smartresize = { |
||||
setup: function() { |
||||
$(this).bind( "resize", $event.special.smartresize.handler ); |
||||
}, |
||||
teardown: function() { |
||||
$(this).unbind( "resize", $event.special.smartresize.handler ); |
||||
}, |
||||
handler: function( event, execAsap ) { |
||||
// Save the context
|
||||
var context = this, |
||||
args = arguments; |
||||
|
||||
// set correct event type
|
||||
event.type = "smartresize"; |
||||
|
||||
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } |
||||
resizeTimeout = setTimeout(function() { |
||||
jQuery.event.handle.apply( context, args ); |
||||
}, execAsap === "execAsap"? 0 : 100 ); |
||||
} |
||||
}; |
||||
|
||||
$.fn.smartresize = function( fn ) { |
||||
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); |
||||
}; |
||||
|
||||
|
||||
var mercutioMethods = { |
||||
|
||||
init : function( options, callback ) { |
||||
|
||||
return this.each(function() {
|
||||
|
||||
console.log( this ) |
||||
|
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
// mercutio code begin
|
||||
$.fn.mercutio = function( firstArg ) {
|
||||
|
||||
// Method calling logic
|
||||
var method = mercutioMethods[ firstArg ]; |
||||
if ( method ) { |
||||
// remove firstArg, which is a string of the function name, from arguments
|
||||
var args = Array.prototype.slice.call( arguments, 1 ); |
||||
return method.apply( this, args ); |
||||
|
||||
} else if ( !firstArg || typeof firstArg === 'object' ) { |
||||
return mercutioMethods.init.apply( this, arguments ); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
|
||||
// Default plugin options
|
||||
$.fn.mercutio.defaults = { |
||||
singleMode: false, |
||||
columnWidth: undefined, |
||||
itemSelector: undefined, |
||||
appendedContent: undefined, |
||||
saveOptions: true, |
||||
resizeable: true, |
||||
animate: false, |
||||
animationOptions: {} |
||||
}; |
||||
|
||||
})(jQuery); |
||||
Loading…
Reference in new issue