How to Get CSS3 Multi-Column Count in JavaScript

How to get css3 multi-column count in Javascript

The secret is to put a small marker at the end of the content. You can programmatically add an empty span:

<span id="mymarker"></span>

then grab the span using a jquery $("#mymarker") and get the "left" property. Divide that number by the width of the columns (adjusted for column-gap), and that will tell you what column this last element is in. Math.ceil() on the value and you have the column count.

Get number of columns created by css column-width

Your questions and fiddle ignore vendor prefixes; larssin's answer is a good direction but isn't complete.

I created a small helper function for you, which goes over currently implemented prefixes for these values, fetches the actual values with .css() and returns the correct number. Works cross-browser, including non-supporting browsers which always return 1.

I chose to ignore the iframe case, which just makes things more complicated but as I understand isn't related directly to your question.

Update: Now accounts for border and padding.

Code on jsFiddle and here:

function getColumnsNumber(el){
    var $el = $(el),
        width = $el.innerWidth(),
        paddingLeft, paddingRight, columnWidth, columnGap, columnsNumber;

    paddingLeft = parseInt( $el.css('padding-left'), 10 );
    paddingRight = parseInt( $el.css('padding-right'), 10 );

    $.each(['-webkit-','-moz-',''], function(i, prefix){
        var _width = parseInt( $el.css(prefix+'column-width'), 10 );
        var _gap =   parseInt( $el.css(prefix+'column-gap'), 10 );
        if (!isNaN(_width)) columnWidth = _width;
        if (!isNaN(_gap))   columnGap = _gap;
    });

    columnsNumber = Math.floor( (width - paddingLeft - paddingRight) / (columnWidth + columnGap) );
    if (isNaN(columnsNumber) || columnsNumber < 1) columnsNumber = 1;
    return columnsNumber;
}

how to get the column count in multi-column layout in webkit

The solution turned out to be much simpler than I thought. It was just a matter of getting the actual width of the page using bodyID.scrollWidth and then dividing by desiredWidth to get the actual number of pages.

Hope this helps somebody.

CSS3 multi-column list

Making your parent <li> display: inline-block; seems to "fix" this:

Here is a demo http://jsfiddle.net/DczVL/1/

ul {    list-style: none;    margin:0;    padding:0;}ul > li {    display: inline-block;    width: 100%;}ul > li > ul >li {    color: red;}div {    -webkit-column-count:3;    -moz-column-count:3;    -ms-column-count:3;    -o-column-count:3;    column-count:3;    -webkit-column-gap:15px;    -moz-column-gap:15px;    -ms-column-gap:15px;    -o-column-gap:15px;    column-gap:15px;    columns:3;}

<div>    <ul>        <li>List-item            <ul>                <li>Sub-list-item</li>                <li>Sub-list-item</li>            </ul>        </li>        <li>List-item            <ul>                <li>Sub-list-item</li>                <li>Sub-list-item</li>                <li>Sub-list-item</li>                <li>Sub-list-item</li>            </ul>        </li>         <li>List-item            <ul>                <li>Sub-list-item</li>                <li>Sub-list-item</li>                <li>Sub-list-item</li>                <li>Sub-list-item</li>            </ul>        </li>    </ul></div>

How to split into new column via multi-column layout only when text is overflowing

You need to set height to .text so it would know when to move to the next column:

.content {
  height: 90vh;
}

.text {
  height:100%;
  width: 300px;
  column-count: 1;
}

<div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>

Multiple column lists from one ul, CSS and maybe a bit of JS

The column-count property

To get the effect you are after, you can use column-count: <number>:

The column-count CSS property describes the number of columns of the
element.

<number> Is a strictly positive integer describing the ideal number
of columns into which the content of the element will be flowed. If
the column-width is also set to a non-auto value, it merely indicates
the maximum allowed number of columns.

How the columns display is highly customizable, you can also configure column properties using: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns (see above linked MDN article)

Demo

ul {  -webkit-column-count: 5;  column-count: 5;}

<ul>  <li><a href="/link.html">Link1</a>  </li>  <li><a href="/link.html">Link2</a>  </li>  <li><a href="/link.html">Link3</a>  </li>  <li><a href="/link.html">Link4</a>  </li>  <li><a href="/link.html">Link5</a>  </li>  <li><a href="/link.html">Link6</a>  </li>  <li><a href="/link.html">Link7</a>  </li>  <li><a href="/link.html">Link8</a>  </li>  <li><a href="/link.html">Link9</a>  </li>  <li><a href="/link.html">Link10</a>  </li></ul>

---

Related Topics