Showing posts with label max-height. Show all posts
Showing posts with label max-height. Show all posts

Tuesday 29 April 2014

jQuery equalise height plugin

Sometimes we just want a group of element to be the same height. It's more visually pleasing. This plugin is designed to do just that.
First the HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>equalise height</title>
    <link rel="stylesheet" type="text/css" href="style.css">  
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliud igitur esse censet gaudere, aliud non dolere. Ad eos igitur converte te, quaeso. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Ut optime, secundum naturam affectum esse possit. Videsne quam sit magna dissensio? Duo Reges: constructio interrete. Sed quanta sit alias, nunc tantum possitne esse tanta. At enim hic etiam dolore. Facile est hoc cernere in primis puerorum aetatulis.</p>
    </article>
    <article>
      <p>Summus dolor plures dies manere non potest? At ego quem huic anteponam non audeo dicere; Nemo nostrum istius generis asotos iucunde putat vivere. Pugnant Stoici cum Peripateticis. Istam voluptatem perpetuam quis potest praestare sapienti? Quid sequatur, quid repugnet, vident.</p>
    </article>
    <article>
      <p>Nihil opus est exemplis hoc facere longius. Quam illa ardentis amores excitaret sui! Cur tandem? Sic enim censent, oportunitatis esse beate vivere.</p>
    </article>
    <footer>
      <p>footer</p>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="equaliseheight.plugin.js"></script>
    <script>
    (function()
    {
      $('article').equaliseheight();
    })();
    </script>
  </body>
</html>
Now the CSS (style.css):
body
{
  font: 90%/1.618 sans-serif;
  padding-top:2em;
}
article
{
float:left;
margin:1em;
padding:1em;
width:15em;
background:red;
color:white;
}
footer
{
clear:left;
}
And finally the jQuery plugin (equaliseheight.plugin.js):
(function($)
{
  $.fn.equaliseheight = function()
  {
    var maxHeight = 0;
    $(this).each(function()
    {
      if($(this).height() > maxHeight)
      {
        maxHeight = $(this).height();
      }
    });
    $(this).height(maxHeight);
  }
})(jQuery);