-
Notifications
You must be signed in to change notification settings - Fork 13
Setup
Mottie edited this page Jan 3, 2013
·
1 revision
Add the following code inside of the <head> of your document.
It is usually recommended to include the inline css and javascript, the code inside of the <style> and <script> tags, in external files; but it is shown here for simplicity.
<!-- Required CSS styling, but do whatever you want with the overflow and other styling -->
<style>
.overflowed { overflow: auto; }
</style>
<!-- Required script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.equalizer.min.js"></script>
<script>
// use $(window).load(function(){ ... }); if there are images,
// or define all image dimensions <img width="100" height="100" src="...">
$(function() {
$('.wrapper').equalizer();
});
</script><div class="wrapper">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
<div>Block 6</div>
</div>or, if using HTML5:
<section class="wrapper">
<article>Block 1</article>
<article>Block 2</article>
<article>Block 3</article>
<article>Block 4</article>
<article>Block 5</article>
<article>Block 6</article>
</section>// target the wrapper of all of the elements to equalize,
// in this case the divs inside of .wrapper
$('.wrapper').equalizer({
// height = type of height to use
// "o" or "outer" = "outerHeight" - includes height + padding + border + margin
// "i" or "inner" = "innerHeight" - includes height + padding + border
// default = "height" - use just the height
columns : '> div', // elements inside of the wrapper
useHeight : 'height', // height measurement to use
resizeable : true, // when true, heights are adjusted on window resize
min : 0, // Minimum height applied to all columns
max : 0, // Max height applied to all columns
breakpoint : null, // if browser less than this width, disable the plugin
disabled : 'noresize', // class applied when browser width is less than the breakpoint value
overflow : 'overflowed' // class applied to columns that are taller than the allowable max
});if using the HTML5 from the above example, make sure to set the columns option to article:
// target the wrapper of all of the elements to equalize,
// in this case the article elements inside of .wrapper
$('.wrapper').equalizer({
columns : 'article' // elements inside of the wrapper
});