Get number of columns created by css column-width

css, javascript, jquery

Solution

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;
}

Problem

Original source

Related problems

• How to get css3 multi-column count in Javascript
• How to get css3 multi-column count in Javascript