commit b09c2ec7f022d6c2c8c6f782502dce9c54fdee23 Author: desandro Date: Sat Oct 2 16:01:40 2010 -0400 Tabula rasa; built out of jQuery Masonry diff --git a/README.md b/README.md new file mode 100644 index 0000000..00b1991 --- /dev/null +++ b/README.md @@ -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 \ No newline at end of file diff --git a/docs/animating-css-transitions.html b/docs/animating-css-transitions.html new file mode 100644 index 0000000..66ca29c --- /dev/null +++ b/docs/animating-css-transitions.html @@ -0,0 +1,196 @@ + + + + + jQuery Mercutio › Animating with CSS transitions + + + + + + + + + + + +
+ +

Animating with CSS transitions

+ +
+ +

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.

+

In your script, leave out the animate option.

+
$('#demo').mercutio({ columnWidth: 100 });
+ +

In the CSS, add transition properties. Mercutio will add a class of masoned to the container after the first arrangement so transitions can be applied afterward.

+
#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;
+}
+ + +
+ +
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ + + + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ + + +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ + +
+ + + +
+ + + + + + + + + \ No newline at end of file diff --git a/docs/animating-jquery.html b/docs/animating-jquery.html new file mode 100644 index 0000000..27b4efb --- /dev/null +++ b/docs/animating-jquery.html @@ -0,0 +1,202 @@ + + + + + jQuery Mercutio › Animating with jQuery + + + + + + + + + + +
+ +

Animating with jQuery

+ +
+

As of version 1.1, rearrangements can be animated when the container is resized.

+ +
$('#demo').mercutio({
+  columnWidth: 100, 
+  animate: true
+});
+ +

Animation options are set with animationOptions. See the jQuery API for animate options for details on available animation options.

+ +
$('#demo').mercutio({
+  columnWidth: 100, 
+  animate: true,
+  animationOptions: {
+    duration: 750,
+    easing: 'linear',
+    queue: false
+  }
+});
+ + +
+ +
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ + + + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ + + +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/docs/appending.html b/docs/appending.html new file mode 100644 index 0000000..21e1abc --- /dev/null +++ b/docs/appending.html @@ -0,0 +1,181 @@ + + + + + jQuery Mercutio › Appending new elements + + + + + + + + + + +
+ +

Appending new elements

+ +
+

New elements can be appended to ‘masoned’ containers and then arranged to the layout using the appendedContent option. appendedContent accepts the a jQuery object of the newly appended elements. In this example, each time the button is clicked, new box 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 .mercutio() call. Finally, using the callback function, the new boxes are dynamically styled.

+

In the click function, appendedContent was the only option to specify in the mercutio configuration since Mercutio saves all previous options. Using appendedContent, the Mercutio script saves some processing time as it only rearranges the box(es) inside that appended container.

+ +
// 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' });
+      }    
+    )
+  ;
+}
+ + + +
+ + + +
+ +

+ +
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ + +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+ +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/docs/basic-multi-column.html b/docs/basic-multi-column.html new file mode 100644 index 0000000..68384b3 --- /dev/null +++ b/docs/basic-multi-column.html @@ -0,0 +1,268 @@ + + + + + jQuery Mercutio › Basic multi-column example + + + + + + + + + + +
+ +

Basic multi-column example

+ +
+

This example demonstrates the basic effect of jQuery Mercutio. All ‘bricks’ have outerWidths (width + padding + border + margin) that are multiples of 100 pixels. columnWidth is set to 100.

+ +
$('#demo').mercutio({
+  columnWidth: 100, 
+  itemSelector: '.box' 
+});
+ + +

itemSelector is specified to rearrange all box elements, including the ones inside another div.

+ +
<div id="demo" class="wrap">
+  <div class="box col2">...</div>
+  <div class="box col3">...</div>
+  <div class="box col1">...</div>
+  <div class="box col1">...</div>
+  <div>
+    <div class="box col2">...</div>
+    <div class="box col2">...</div>
+    <div class="box col1">...</div>
+  </div>
+</div> <!-- #demo -->
+ + + +
+ +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

This is the box with no width set

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/basic-single-column.html b/docs/basic-single-column.html new file mode 100644 index 0000000..3727460 --- /dev/null +++ b/docs/basic-single-column.html @@ -0,0 +1,264 @@ + + + + + jQuery Mercutio › Basic single-column example + + + + + + + + + + +
+ +

Basic single-column example

+ +
+

This example demonstrates the basic effect of jQuery Mercutio. All ‘bricks’ have the same width, so singleMode is set to true.

+ +
$('#demo').mercutio({
+  singleMode: true, 
+  itemSelector: '.box' 
+});
+ + +

itemSelector is specified to rearrange all box elements, including the ones inside another div.

+ +
<div id="demo" class="wrap">
+  <div class="box col1">...</div>
+  <div class="box col1">...</div>
+  <div class="box col1">...</div>
+  <div class="box col1">...</div>
+  <div>
+    <div class="box col1">...</div>
+    <div class="box col1">...</div>
+    <div class="box col1">...</div>
+  </div>
+</div> <!-- #demo -->
+ + + +
+ +
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+

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.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet,

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ + +
+
+

Sit amet mi ullamcorper vehicula

+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+ +
+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ + + +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+
+
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+
+ +

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/css/style.css b/docs/css/style.css new file mode 100755 index 0000000..65c9ae6 --- /dev/null +++ b/docs/css/style.css @@ -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; +} diff --git a/docs/filtering-hashes.html b/docs/filtering-hashes.html new file mode 100644 index 0000000..32e14f2 --- /dev/null +++ b/docs/filtering-hashes.html @@ -0,0 +1,406 @@ + + + + + jQuery Mercutio › Filtering hashes + + + + + + + + + + + +
+ +

Filtering hashes

+ +
+

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 #red. On $(window).load 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.

+ +
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;
+});
+ +
+ +
+ + + + +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

This is the box with no width set

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+
+

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

+
+ + +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula adipiscing varius

+
+
+

Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

+
+ + +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + + +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+ +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/filtering.html b/docs/filtering.html new file mode 100644 index 0000000..00ee6f9 --- /dev/null +++ b/docs/filtering.html @@ -0,0 +1,354 @@ + + + + + jQuery Mercutio › Filtering + + + + + + + + + + + +
+ +

Filtering

+ +
+

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: gray, red, and black. 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 invis is added and removed to each element. In this example, the mercutio settings have itemSelector as '.box:not(.invis)', so only visible elements will be arranged in the layout. After the proper elements are hidden and the others shown, .mercutio() is called and the layout is rearranged.

+ +
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;
+});
+ +
+ +
+ + + + +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

This is the box with no width set

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+
+

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

+
+ + +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula adipiscing varius

+
+
+

Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

+
+ + +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + + +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+ +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/img/loader.gif b/docs/img/loader.gif new file mode 100755 index 0000000..da6a6f3 Binary files /dev/null and b/docs/img/loader.gif differ diff --git a/docs/index.html b/docs/index.html new file mode 100755 index 0000000..37d4ad8 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,376 @@ + + + + + jQuery Mercutio › Primer + + + + + + + + + + +
+

Primer

+ +
+

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.

+ +
+ +
+

Comparison Example

+
+

CSS Floats

+
+
+
1
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

+
+ +
+
2
+

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

+
+ +
+
3
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

+
+ +
+
4
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

+
+ +
+
5
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

+
+ +
+
6
+

Cadipiscing in, lacinia vel, tellus.

+
+ +
+
7
+

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

+
+ +
+
8
+

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.

+
+ +
+
9
+

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.

+
+ +
+
10
+

Etiam pellen tesque mauris ut lectus.

+
+ +
+
11
+

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

+
+ +
+
12
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+
+ +
+

Mercutio

+
+
+
1
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

+
+ +
+
2
+

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

+
+ +
+
3
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

+
+ +
+
4
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

+
+ +
+
5
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

+
+ +
+
6
+

Cadipiscing in, lacinia vel, tellus.

+
+ +
+
7
+

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

+
+ +
+
8
+

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.

+
+ +
+
9
+

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.

+
+ +
+
10
+

Etiam pellen tesque mauris ut lectus.

+
+ +
+
11
+

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

+
+ +
+
12
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+
+ +
+ + + +
+ +

Minimum recommended configuration

+ +

Configuring Mercutio is fairly easy. Simply call the .mercutio() method on the container element. Depending on the layout, you’ll most likely need to specify one option.

+ +

For layouts with elements that span multiple widths, like the basic multi-column example:

+ +
$('#wrapper').mercutio({ columnWidth: 200 });
+ +

For layouts with elements that span the same width, like the basic single-column example:

+ +
$('#wrapper').mercutio({ singleMode: true });
+ +

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 outerWidth() and innerWidth() methods, Mercutio appropriately accounts for the space of any margin, padding, and border-width set with CSS.

+ +

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.

+ +

Plugin options

+ +
$('#wrapper').mercutio({
+
+  singleMode: false,
+  // Disables measuring the width of each floated element.
+  // Set to true if floated elements have the same width.
+  // default: false
+
+  columnWidth: 240,
+  // Width in pixels of 1 column of your grid.
+  // default: outer width of the first floated element.
+
+  itemSelector: '.box:visible',
+  // Additional selector to specify which elements inside
+  // the wrapping element will be rearranged.
+  // Required for Infinite Scroll with window resizing.
+
+  resizeable: true,
+  // Binds a Mercutio call to window resizes 
+  // so layout appears fluid.
+  // default: true
+
+  animate: true,
+  // Animates layout rearrangements.
+  // default: false
+
+  animationOptions: {},
+  // A map of options for animation.
+
+  appendedContent: $('.new_content'),
+  // Additional container element for appended content.
+  // Useful for Infinite Scroll integration.
+
+  saveOptions: true,
+  // Mercutio will use the options from previous Mercutio
+  // calls by default, so you only have to enter in options once
+  // default: true
+
+},  function() {}
+  // Optional callback.
+  // 'this' will refer to the applicable elements Mercutio just rearranged
+
+);
+ + +

Code repository

+ +

This project lives on GitHub at github.com/desandro/mercutio, 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.

+ +

There you can find an issue tracker where you can look through other people’s resolved issues or submit a new one for yourself. If you’re still having trouble, try looking over the FAQ.

+ +

Window resizing

+ +

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.

+ +

Handling images & other media

+ +

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.

+ +
<img src="img_file.jpg" width="280" height="160" />
+ +

If you’re using a PHP-based CMS, you can use the getimagesize function.

+ +

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 $(window).load() instead of $(document).ready().

+ +
$(window).load(function(){
+  $('#wrapper').mercutio({ columnWidth: 200 });
+});
+ + + +

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.

+ +
$(window).load(function(){
+  if ( window.location.hash ) {
+    var destination = $( window.location.hash ).offset().top;
+    $('html:not(:animated),body:not(:animated)').scrollTop( destination );
+  }
+});
+ +

This will set the window of the document to the appropriate place. These couple lines were taken from Cedric Dugas’s anchorAnything.

+ +

Examples in the wild

+ +

In addition to the examples below, see delicious links tagged with jquerymercutio and jQuery Mercutio Collection on Ember for screenshots.

+ + + +

Changelog

+ +
+
v1.3 3 Sep 2010
+
Revamped appendedContent to work with container elements. Plays nice with latest Infinite Scroll.
+
Revised layout for documentation to allow for more pages.
+ +
v1.2 12 Jun 2010
+
Support for filtering added
+ +
v1.1: 29 Apr 2010
+
Add animation
+ +
v1.0: 7 Dec 2009
+
Multi-column width support
+
Appending elements and Infinite Scroll support
+
Less obstrusive layout. No inserting additional markup.
+
Automatically binds event to window resizing
+ +
v0.4: 14 Jun 2009
+
Better fluid rearrangement support
+ +
v0.1: Feb 2009
+
Original release
+
+ +

Acknowledgments

+ +
    +
  • Paul Irish for his Infinite Scroll plugin, which served as a template I used to produce a plugin of my own. The appendedContent option was design to work specifically with Infinite Scroll. Infinite Scroll is packaged with these docs.
  • +
  • Louis-Rémi Babé and Paul Irish for the jQuery SmartResize plugin. This adds a special smartresize event to jQuery, so window resize events do not have to be executed on every frame. This plugin is used within jQuery Mercutio.
  • +
+ +

License

+ +

jQuery Mercutio is licensed under the MIT license, just like jQuery itself. It may be used for personal and commercial applications.

+ +
+

The MIT License

+ +

Copyright © 2010 David DeSandro

+ +

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:

+ +

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

+ +

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.

+ +
+ +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/docs/infinite-scroll.html b/docs/infinite-scroll.html new file mode 100755 index 0000000..f899174 --- /dev/null +++ b/docs/infinite-scroll.html @@ -0,0 +1,355 @@ + + + + + jQuery Mercutio › Infinite Scroll + + + + + + + + + + +
+

Infinite Scroll

+ +
+

Mercutio integrates well with auto-paging scripts like Infinite Scroll by Paul Irish. Using the appendedContent 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.

+ +

Setting up the Mercutio call is just the same as normally would be. Since this layout uses both Infinite Scroll and resizable, itemSelector is recommended.

+ +
var $wall = $('#demo');
+
+$wall.mercutio({ 
+  columnWidth: 100, 
+  itemSelector: '.box:visible' 
+});
+ +

In the Infinite Scroll configuration, call Mercutio as a callback. Infinite Scroll provides the newly loaded elements as an argument, newElements 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 appendedContent.

+ +
$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 ) }); 
+  }
+);
+ +

Images and Infinite Scroll (a.k.a The Tumblr Issue)

+ +

As recommended in the primer, the best solution to handle images is to have the size attributes defined in the img tag, especially when using Infinite Scroll. This is the solution employed in the example below.

+ +

Of course, this is not a viable option in some CMSs, most notably Tumblr. In this situation, Mercutio needs to be called after the newly-appended images are fully loaded. This is done by delaying the Mercutio callback.

+ +
// call mercutio as a callback, after 1000 milliseconds
+function( newElements ) {
+  setTimeout(function() {
+    $wall.mercutio({ appendedContent: $(newElements) });
+  }, 1000);
+}
+ +
+ + +
+ +
+

+ Clarendon Metro +

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

+ Whitlow's on Wilson +

+
+ + +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ + + +
+ +

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.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ +
+ +
+

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.

+

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.

+ +
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+ +

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.

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ + +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

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.

+ +
+ + +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ + +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+ + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/docs/js/.DS_Store b/docs/js/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/docs/js/.DS_Store differ diff --git a/docs/js/jquery-1.4.2.min.js b/docs/js/jquery-1.4.2.min.js new file mode 100644 index 0000000..7c24308 --- /dev/null +++ b/docs/js/jquery-1.4.2.min.js @@ -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)[^>]*$|^#([\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
a"; +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="";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-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=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=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-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;j0){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":function(g,h){var l=typeof h==="string";if(l&&!/\W/.test(h)){h=h.toLowerCase();for(var m=0,q=g.length;m=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 hl[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=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";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=""; +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="

";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="
";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=0===d})};c.fn.extend({find:function(a){for(var b=this.pushStack("","find",a),d=0,f=0,e=this.length;f0)for(var j=d;j0},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-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=/"},F={option:[1,""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_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
","
"];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;b0||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;e0?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]===""&&!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=//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("
").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").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=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.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); diff --git a/docs/js/jquery.infinitescroll.min.js b/docs/js/jquery.infinitescroll.min.js new file mode 100755 index 0000000..eae3df3 --- /dev/null +++ b/docs/js/jquery.infinitescroll.min.js @@ -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"):A("
");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('
Loading...
'+B.loadingText+"
");(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:"Loading the next set of posts...",donetext:"Congratulations, you've reached the end of the internet.",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); \ No newline at end of file diff --git a/docs/js/rando-lorem-text.js b/docs/js/rando-lorem-text.js new file mode 100644 index 0000000..fa55014 --- /dev/null +++ b/docs/js/rando-lorem-text.js @@ -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; + } + +; + diff --git a/docs/pages/2.html b/docs/pages/2.html new file mode 100755 index 0000000..0691acd --- /dev/null +++ b/docs/pages/2.html @@ -0,0 +1,208 @@ + + + + + jQuery Mercutio › Page 2 + + + + + + + + + + +
+ +

Page 2

+ +

This is a page used for the Infinite Scroll example.

+ +
+ + +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ +
+

Silver Diner +

+ + +

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.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/pages/3.html b/docs/pages/3.html new file mode 100755 index 0000000..f381a34 --- /dev/null +++ b/docs/pages/3.html @@ -0,0 +1,190 @@ + + + + + jQuery Mercutio › Page 3 + + + + + + + + + + +
+ +

Page 3

+ +

This is a page used for the Infinite Scroll example.

+ +
+ +
+
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Vestibulum volutpat, lacus a ultrices sagittis,

+
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero

+
+ + +
+

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.

+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+

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.

+
+ + +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+
+ +
+

Sit amet mi ullamcorper vehicula

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+

+ Mercedes Benz Jukebox +

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ + +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/pages/4.html b/docs/pages/4.html new file mode 100755 index 0000000..d1218c1 --- /dev/null +++ b/docs/pages/4.html @@ -0,0 +1,182 @@ + + + + + jQuery Mercutio › Page 4 + + + + + + + + + + +
+ +

Page 4

+ +

This is a page used for the Infinite Scroll example.

+ +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + +

+ Arlington Arts Center +

+ +

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.

+ +
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ +
+ + + +
+ + + + + + + + + \ No newline at end of file diff --git a/docs/pages/5.html b/docs/pages/5.html new file mode 100755 index 0000000..a301e6b --- /dev/null +++ b/docs/pages/5.html @@ -0,0 +1,185 @@ + + + + + jQuery Mercutio › Page 5 + + + + + + + + + + +
+ +

Page 5

+ +

This is a page used for the Infinite Scroll example.

+ +
+ +
+

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.

+
+ +
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Vestibulum volutpat, lacus a ultrices sagittis,

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

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. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

+
+ +
+ +
    +
  • Lacus a ultrices sagittis
  • +
  • Democratis
  • +
  • Plummus
  • +
+
+
+

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.

+ +
+ +
+

Silver Diner +

+ + +

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.

+
+ +
+

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.

+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.

+
+ +
+

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

+

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.

+
+ +
+

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

+
+ +
+

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

+
+ +
+

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.

+

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.

+
+ +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/docs/tumblelog.html b/docs/tumblelog.html new file mode 100755 index 0000000..2296442 --- /dev/null +++ b/docs/tumblelog.html @@ -0,0 +1,252 @@ + + + + + jQuery Mercutio › Tumblelog example + + + + + + + + + +
+

Tumblelog example

+ + +
+

A tumblelog is a good example of a typical use case for Mercutio.

+

There are three sizes of columns used:

+
    +
  • .col1 : 220px
  • +
  • .col2 : 460px
  • +
  • .col3 : 700px
  • +
+

With 10px of margin on right and left sides that makes for a grid with columns 240px wide.

+ +
$(function(){
+  $('#tumblelog').mercutio({ columnWidth: 240 });
+});
+ + +

All videos and images have width and height specified inline.

+ +
+ + +
+ +
+

Last Day Dream

+

+ +

+ +

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+ + +
+
+

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.

+
+

— Marcus Aurelius

+
+ +
+

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.

+

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet.

+ +
+ +
+

+ +

+
+ +
+

+ + + +

+

[PARENTS MAGAZINE, GIRL WITH CAT]

+
+ +
+
+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

+
+ +

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.

+
+ + +
+ +
+ +
+

Ut enim ad minim veniam

+
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • +
  • Aliquam tincidunt mauris eu risus.
  • +
  • Vestibulum auctor dapibus neque.
  • +
+

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

+
+ +
+

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.

+ + +

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.

+
+ +
+

feugiat vitae, ultricies eget

+ +
+ +
+

A Tremendous Celebration

+

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.

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

+

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

+
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. +
  3. Aliquam tincidunt mauris eu risus.
  4. +
  5. Vestibulum auctor dapibus neque.
  6. +
+ +
+ + +
+

And of Deliberate Consequences

+ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. +
  3. Aliquam tincidunt mauris eu risus.
  4. +
  5. Vestibulum auctor dapibus neque.
  6. +
+ +

Aenean ultricies mi

+ +

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.

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

+ +

Vestibulum tortor quam

+ +

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

+ +
+ +
+
+

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. + +

+
+
+ +
+

+ +

+

+ + 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 +

+
+ +
+

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. +

+
+ +
+

+ +

+
+ + +
+ +
+ +
+
+

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.

+
+ + Homer — The Iliad +
+ +
+

Aliens attack South Dakota

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

Yes, it did happen.

+ +

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. +

+ + + +
+ +
+

McCall Cover, Joan Caulfield

+

And then, there is this.

+

McCall Cover, Joan Caulfield by Nickolas Muray

+

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.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/jquery.mercutio.js b/jquery.mercutio.js new file mode 100755 index 0000000..985a155 --- /dev/null +++ b/jquery.mercutio.js @@ -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); \ No newline at end of file