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
.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;
}
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')
}
});
}