Question

I had a look here http://novitskisoftware.com/test/multiplecolumnsEms.html and at various other sites for making a multi column list and it works fine.

What I wonder is if let’s say I have a dynamic list and if there are for example 10 list items I want to keep eight of them in the first column and the rest in the second, i.e. always 8 items in first columns if there are more than 8 of them.

I assume this is not possible with only CSS/HTML so is it something I can do with JavaScript/jQuery? I prefer to keep the plugin’s to a minimum.

Thanks in advance.

Answer 1

Suppose the HTML page generated contains:

<ul>
    <li class="item1">A</li>
    <li class="item2">B</li>
    <li class="item3">C</li>
    <li class="item4">D</li>
    <li class="item5">E</li>
    <li class="item6">F</li>
    <li class="item7">G</li>
    <li class="item8">H</li>
    <li class="item9">I</li>
    <li class="item10">J</li>
    <li class="item11">K</li>
    <li class="item12">L</li>
    <li class="item13">M</li>
    <li class="item14">N</li>
    <li class="item15">O</li>
</ul>

You may now use JavaScript to generate the required CSS as follows:

/*
    unorderedList: the HTML ul element
    columnSize:    the number of items per column
    columnGap:     the distance between 2 columns in ems
    offset:        the offset of the first column in ems
*/

function generateMultiColumnLayout(unorderedList, columnSize, columnGap, offset) {
    var items = unorderedList.getElementsByTagName("li");

    for (var i = 0, l = items.length; l--; i++) {
        var itemStyle = items[i].style;
        itemStyle.lineHeight = "1.2em";

        if (!i && i % columnSize) {                   // old column
            itemStyle.marginLeft = offset + "em";
        } else {                                      // start of new column
            offset += columnGap;
            itemStyle.marginLeft = offset + "em";
            itemStyle.marginTop = -columnSize + "em";
        }
    }
}

window.onload = function () {
    var items = document.getElementsByClassName("item1");

    for (var i = 0, l = items.length; l--; i++) {
        generateMultiColumnLayout(items[i].parent, 8, 10, 5);
    }
};