Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
193 lines (173 sloc) 11.9 KB
<!DOCTYPE html>
<html>
<head>
<title>stalactite : A jQuery plugin</title>
<meta name="keywords" content="stalactite, jquery, plugin, packing, javascript, lazy, image, grid, sorting, minimal" />
<meta name="author" content="jonobr1" />
<meta name="description" content="stalactite is a jQuery plugin to lazily sort and pack an elements' contents." />
<link href="c/gs.css" media="screen" rel="stylesheet" type="text/css" />
<link href="c/style.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="j/jquery.stalactite.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#css-example-a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$('#css-example').stalactite({
fluid: false,
cssPrep: false
});
updateLoader(function() {
$('#css-example').fadeIn();
});
});
$('#fluid-example-a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$('#fluid-example').stalactite();
updateLoader(function() {
$('#fluid-example').fadeIn();
});
});
$('#static-example').stalactite({
fluid: false
});
updateLoader();
function updateLoader(callback) {
setTimeout(function() {
$('.stalactite-loader')
.css({
position: 'fixed',
background: '#fff',
padding: '20px 20px 15px 20px',
top: 0,
left: 0
});
if (callback) {
callback.call(this);
}
}, 1);
}
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5927630-16']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
</head>
<body>
<div class="container_9 section">
<h1>stalactite</h1>
</div>
<div id="static-example" class="content container_9">
<h2 class="slogan grid6">
A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, <a href="http://github.com/jonobr1/stalactite"><strong>stalactite</strong></a> takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser's decisions.
</h2>
<div style="width:240px">
<center>
<a id = "download" href = "https://github.com/jonobr1/stalactite/raw/gh-pages/j/jquery.stalactite.min.js"><img src = "i/download.png" width = "90" height = "90" alt = "Download" /></a>
<br />
<span class = "mute">Download the minified version (4kb)</span>
</center>
</div>
<img src="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" />
<img src="http://s3.amazonaws.com/resized-images-new/B60650DF-65F1-4D13-9286-408387FD137B" />
<img src="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" />
<img src="http://s3.amazonaws.com/resized-images-new/1262D972-148C-41E8-AD2A-AB4C1AD2D222" />
<img src="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" />
<img src="http://s3.amazonaws.com/resized-images-new/E8DF490E-9546-482B-9B0B-4F831E6058A5" />
<h2 class="slogan grid4">
It sorts all types of content and is especially diligent about <code>images</code>, <code>videos</code>, and <code>iframes</code> making sure to load all media before assessing proper widths and heights.
</h2>
<iframe src="http://player.vimeo.com/video/7133029?title=0&amp;byline=0&amp;portrait=0&amp;color=985a89" width="470" height="294" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<img src="http://s3.amazonaws.com/resized-images-new/C8C44FD6-C258-41B4-B2EA-F2E6057F210B" />
<img src="http://s3.amazonaws.com/resized-images-new/14E944F1-8255-4B8F-B6BA-79B57096855F" />
<img src="http://s3.amazonaws.com/resized-images-new/2B826972-5723-4EAC-B1CC-11E789B1B89B" />
<img src="http://s3.amazonaws.com/resized-images-new/BAD77894-3B95-4120-B4A6-E3D777DFDD90" />
<img src="http://s3.amazonaws.com/resized-images-new/31A6302B-EAAE-4593-8C2A-83EF0EE194D5" />
<img src="http://s3.amazonaws.com/resized-images-new/589361ED-4309-4ADD-9B97-833431B279F0" />
<img src="http://s3.amazonaws.com/resized-images-new/E01073EC-8CDD-4A01-B872-4E46D7F42831" />
<h2 style="width:600px;">
It does this by setting all children of an element to <code>display: inline-block;</code> As a result this plugin requires a modern browser and plays well with Ben Barnett's <a href="http://playground.benbarnett.net/jquery-animate-enhanced/">Animate Enhanced</a>. Scroll to the bottom to see usage.
</h2>
<img src="http://s3.amazonaws.com/resized-images-new/B7D4B10B-8425-4405-A7AE-446357B90E07" />
<img src="http://s3.amazonaws.com/resized-images-new/92E053FE-133A-43DB-9FBA-D4C95F2FC33A" />
<img src="http://s3.amazonaws.com/resized-images-new/BF12BE28-2A48-43BE-A5B9-AE54F08D11F8" />
<img src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A" />
<img src="http://s3.amazonaws.com/resized-images-new/5CD7C91C-CB3D-43BB-83B2-1B79422AF771" />
<img src="http://s3.amazonaws.com/resized-images-new/9541AEC1-C0C0-4B76-A535-41E1290C1A6C" />
<img src="http://s3.amazonaws.com/resized-images-new/170C9FEB-7376-412B-BCD3-017485160F0F" />
<img src="http://s3.amazonaws.com/resized-images-new/3C74773F-4AFA-4893-967B-7362102798E1" />
<img src="http://s3.amazonaws.com/resized-images-new/017C75E8-F1E4-4301-93A2-4DE09F26B4CF" />
</div>
<div class="container_9 section">
<p style="width: 100%;">
<h3><center>Usage</center></h3>
<div style="background: #ffc; padding: 25px;">
<code>
$("#container").stalactite({<br />
<span style="margin-left: 25px;">duration: 350,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Duration of animation.</span><br />
<span style="margin-left: 25px;">easing: 'swing',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Easing method.</span><br />
<span style="margin-left: 25px;">cssPrefix: '.stalactite',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The css naming convention.</span><br />
<span style="margin-left: 25px;">cssPrep: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Should stalactite structurally modify css of children?</span><br />
<span style="margin-left: 25px;">fluid: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Should stalactite recalculate on window resize?</span><br />
<span style="margin-left: 25px;">loader: '&lt;img /&gt;',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The contents of the loader. Defaults to a dataURL animated gif.</span><br />
<span style="margin-left: 25px;">styles: {}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// A style object to place on the child elements</span><br />
<span style="margin-left: 25px;">complete: function(v) { return v; }&nbsp;&nbsp;// Callback function</span><br />
});<br /><br />
// or $("#container").stalactite(); &mdash; these are all optional params.
</code>
</div>
</p>
<div>
Examples (click to see example):
<h3><center><a id="fluid-example-a" href="#">Fluid Example</a></center></h3>
<h3><center><a id="css-example-a" href="#">Custom CSS</a></center></h3>
</div>
</div>
<div id="css-example" class="container_9 section content" style="display: none; text-align: center;">
<img src="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" />
<img src="http://s3.amazonaws.com/resized-images-new/B60650DF-65F1-4D13-9286-408387FD137B" />
<img src="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" />
<img src="http://s3.amazonaws.com/resized-images-new/1262D972-148C-41E8-AD2A-AB4C1AD2D222" />
<img src="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" />
<img src="http://s3.amazonaws.com/resized-images-new/E8DF490E-9546-482B-9B0B-4F831E6058A5" />
<img src="http://s3.amazonaws.com/resized-images-new/B7D4B10B-8425-4405-A7AE-446357B90E07" />
<img src="http://s3.amazonaws.com/resized-images-new/92E053FE-133A-43DB-9FBA-D4C95F2FC33A" />
<img src="http://s3.amazonaws.com/resized-images-new/BF12BE28-2A48-43BE-A5B9-AE54F08D11F8" />
<img src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A" />
<img src="http://s3.amazonaws.com/resized-images-new/5CD7C91C-CB3D-43BB-83B2-1B79422AF771" />
<img src="http://s3.amazonaws.com/resized-images-new/9541AEC1-C0C0-4B76-A535-41E1290C1A6C" />
<img src="http://s3.amazonaws.com/resized-images-new/170C9FEB-7376-412B-BCD3-017485160F0F" />
<img src="http://s3.amazonaws.com/resized-images-new/3C74773F-4AFA-4893-967B-7362102798E1" />
<img src="http://s3.amazonaws.com/resized-images-new/017C75E8-F1E4-4301-93A2-4DE09F26B4CF" />
</div>
<div id="fluid-example" class="content" style="display: none; text-align: center;">
<img src="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" />
<img src="http://s3.amazonaws.com/resized-images-new/B60650DF-65F1-4D13-9286-408387FD137B" />
<img src="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" />
<img src="http://s3.amazonaws.com/resized-images-new/1262D972-148C-41E8-AD2A-AB4C1AD2D222" />
<img src="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" />
<img src="http://s3.amazonaws.com/resized-images-new/E8DF490E-9546-482B-9B0B-4F831E6058A5" />
<img src="http://s3.amazonaws.com/resized-images-new/B7D4B10B-8425-4405-A7AE-446357B90E07" />
<img src="http://s3.amazonaws.com/resized-images-new/92E053FE-133A-43DB-9FBA-D4C95F2FC33A" />
<img src="http://s3.amazonaws.com/resized-images-new/BF12BE28-2A48-43BE-A5B9-AE54F08D11F8" />
<img src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A" />
<img src="http://s3.amazonaws.com/resized-images-new/5CD7C91C-CB3D-43BB-83B2-1B79422AF771" />
<img src="http://s3.amazonaws.com/resized-images-new/9541AEC1-C0C0-4B76-A535-41E1290C1A6C" />
<img src="http://s3.amazonaws.com/resized-images-new/170C9FEB-7376-412B-BCD3-017485160F0F" />
<img src="http://s3.amazonaws.com/resized-images-new/3C74773F-4AFA-4893-967B-7362102798E1" />
<img src="http://s3.amazonaws.com/resized-images-new/017C75E8-F1E4-4301-93A2-4DE09F26B4CF" />
</div>
<div class = "container_9 section">
By <a href = "http://jonobr1.com/">jonobr1</a> &mdash; only for <a href = "http://jquery.com/">jQuery</a>. Images from <a href = "https://gimmebar.com/user/jonobr1/collection/firehose">Gimmebar</a>.
</div>
</body>
</html>