Question

Possible Duplicate:
How to get css3 multi-column count in Javascript

I have a long dynamic text which is going to be split into columns by using CSS

div
{
    -moz-column-width: 500px;
    -moz-column-gap: 20px;
}

Is it possible to get how many columns are created? I’m using jQuery in the client side.

Answer 1

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