syamnath
10/6/2016 - 11:45 AM

This plugin is used to set equal height to only the elements that are floated ie it will skip all the mobile resolutions.

This plugin is used to set equal height to only the elements that are floated ie it will skip all the mobile resolutions.

style.css
content_copyfile_download
p {
  padding: 10px;
  margin-right: 10px;
  background: #999;
  float: left;
  width: 20%;
}
index.html
content_copyfile_download
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="equalheight.js"></script>

</head>
</body>

<h2>Floated elements</h2>
<p class="eq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsum, sequi sed, quo sint amet neque obcaecati magni modi commodi recusandae, necessitatibus odio mollitia iste dolorum ex, qui accusantium dolor.</p>
<p class="eq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsum, sequi sed, quo sint amet neque obcaecati magni modi commodi recusandae, iste dolorum ex, qui accusantium dolor.</p>
<p class="eq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsum, sequi sed, quo sint amet neque obcaecat.</p>
<p class="eq">Lorem ipsum dolor sitRerum ipsum, sequi sed, quo sint amet neque obcaecati magni modi commodi recusandae, necessitatibus odio mollitia iste dolorum ex, qui accusantium dolor.</p>
</body>
  
</html>
equalheight.js
content_copyfile_download
$(document).ready(function() {
  $.fn.equalheight = function() {
    if ($(this).css('display') != 'block' || $(this).css('float') != 'none') {
      var maxHeight = -1;
      $(this).each(function() {
        if ($(this).height() > maxHeight) {
          maxHeight = $(this).innerHeight();
        }
      });
    }
    $(this).height(maxHeight);
  };
  
  $('p').equalheight();
});