cactimurray
10/24/2018 - 2:48 AM

List Columnizer

JQuery function that checks unordered lists to see if average text length is over or under a certain buffer and applies a columned layout to

    elements below that buffer.

columnizeLists.css
content_copyfile_download
.ul-column {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.ul-column li {
    /* Make sure list item doesn't break across columns */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
columnizeLists.js
content_copyfile_download
function columnizeLists(selector = "ul", max = 30) {
    var total;
    var $listitems;
    $(selector).each(function() {
      total = 0;

      $listitems = $(this).find('li');
      $listitems.each(function() {
        total += $(this).text().length;
      });
      
      if ((total / $listitems.length) < max) {
       $(this).addClass('ul-column')
      } else {
        $(this).addClass('no-ul-column')
      }
    });
}