index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>equalize.js</title>
  <link href="css/style.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Lato:700italic,900italic' rel='stylesheet' type='text/css'>
</head>
<body>


<div id="wrapper">
  <h1>equalize.js</h1>
  <h3>The jQuery plugin for equalizing the height <span>or width</span> of elements</h3>
  <div id="author"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=tsvensen&amp;show_count=false&amp;show_screen_name=true&amp;size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe> <span>Created by <a href="http://timsvensen.com" target="_blank">Tim Svensen</a></span></div>

  <a href="https://github.com/tsvensen/equalize.js/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>


  <h2>Download</h2>
  <p>Equalize.js <a href="https://github.com/tsvensen/equalize.js/" target="_blank">on github</a>. Download it <a href="https://github.com/tsvensen/equalize.js/zipball/master/" target="_blank">here</a>.</p>


  <h2>How to Use</h2>
  <p>Call the plugin on the parent of the elements to equalize their height.</p>
  <pre>$('#height-example').equalize();</pre>

  <p>Equalize will accept any of the <a target="_blank" href="http://api.jquery.com/category/dimensions/">jQuery Dimension</a> methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.</p>

  <pre>$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');</pre>


  <h2>Advanced Usage</h2>
  <p>Equalize will now accept a settings object to get the "minimum max dimension". By setting reset to true the height/width will be removed before determining the max. See the <a href="#run-advanced">advanced example</a> below.</p>

  <pre>$('.parent').equalize({reset: true}); // default to height
$('.parent').equalize({equalize: 'width', reset: true});</pre>

  <p>This advanced usage is for dynamic instances where equalize is ran after elements are added or removed to maintain minimum max height or width.</p>

  <p>Equalize the .parent's child element. See @larsbo's <a href="http://jsfiddle.net/4QTNP/3/">example</a>.</p>
  <pre>$('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent</pre>

  <p>By setting clear to true the height/width will be removed.</p>
  <pre>$('.parent').equalize({clear: true}); // default to clear height
$('.parent').equalize({equalize: 'width', clear: true}); // clear width</pre>

  <h2>Height Example <a id="run-height" href="#height-example">run »</a></h2>
  <pre>$('#height-example').equalize(); // defaults to height</pre>

  <div id="height-example" class="example">
    <div>equalize</div>
    <div>equalize content height</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content height</div>
    <div>equalize</div>
  </div>


  <h2>Width Example <a id="run-width" href="#width-example">run »</a></h2>
  <pre>$('#width-example').equalize('width');</pre>

  <div id="width-example" class="example">
    <div>Example</div>
    <div>equalizing</div>
    <div>the</div>
    <div>width</div>
  </div>


  <h2>Advanced Example <a id="run-advanced" href="#advanced-example">run »</a></h2>
  <pre>$('#advanced-example').equalize({reset: true});</pre>
  <p>Below the tallest div has a height of 200px, this will be removed before determining the max height, otherwise all elements would have a height of 200px.</p>

  <div id="advanced-example" class="example">
    <div>equalize</div>
    <div>equalize content height</div>
    <div style="height:200px;">equalize</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content height</div>
    <div>equalize</div>
  </div>

  <h2>Clear Example <a id="run-clear" href="#clear-example">run »</a></h2>
  <pre>$('#clear-example').equalize({reset: true});</pre>
  <p>Below the tallest div has a height of 200px, this will be cleared.</p>

  <div id="clear-example" class="example">
    <div>equalize</div>
    <div>equalize content height</div>
    <div style="height:200px;">equalize</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content</div>
    <div>equalize</div>
    <div>equalize</div>
    <div>equalize content height</div>
    <div>equalize</div>
  </div>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.11.0.min.js"><\/script>')</script> </script>

<script src="js/equalize.js" type="text/javascript"></script>

<script>
  $(document).on('click', 'h2 a', function(e) {
    e.preventDefault();

    if (this.id === 'run-advanced') {
      // reset all the heights to get the minimum max height
      $('#advanced-example').equalize({reset: true});
    } else if (this.id === 'run-clear') {
      $('#clear-example').equalize({clear: true}); // defaults to height
    } else if (this.id === 'run-height') {
      $('#height-example').equalize(); // defaults to height
    } else {
      $('#width-example').equalize('width');
    }

    $(this).replaceWith('<span>ran</span>');
  });
</script>


<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34991331-1']);
  _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>

</body>
</html>