6

We're using the new css3 multi-column layout properties to get our text into newspaper columns. Each column gets a fixed width, and the column-count defaults to "auto", which means that the browser decides how many columns there are.

How do we get the actual number of columns as an integer in Javascript?

If we query the css "column-count" (or -moz-column-count) we get either "auto" or a blank as a result.

ccleve
  • 15,239
  • 27
  • 91
  • 157

4 Answers4

17

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.

ccleve
  • 15,239
  • 27
  • 91
  • 157
  • 2
    +1 very helpful, however you should use `Math.floor(value)+1` to properly account for the case when there are no rounding errors in the division. Also, if you're programatically inserting an element, it's a crime against the laws of common sense to use jQuery to select it by ID. – Niet the Dark Absol Feb 07 '13 at 21:28
  • Very good idea... an example of implemenation on this question http://stackoverflow.com/questions/8354786/determine-the-width-of-a-dynamic-css3-multicolumn-div-width-fixed-column-width/18644269#18644269 – GibboK Sep 05 '13 at 19:24
  • 1
    I think in some cases this marker can jump to another column. Isn't is better to get last child instead of adding new marker? – Adam Pietrasiak Aug 25 '14 at 07:53
1

Divide the column container's scrollable width by visible width:

container.scrollWidth / container.offsetWidth
Naveen
  • 623
  • 9
  • 20
0

Try this:

$.fn.howMuchCols = function(){
  return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};

$('.my-stuff-with-columns').howMuchCols();

Code explanation:

This code will create a function 'howMuchCols ' to each jQuery element.

You can't get the width of a element with columns using the conventional way, because his width is used to define each inner column size. To know how many columns the element have inside, you need to get his real width and divide by the columns size, then you will have the column amount.

The way to get the real width is to sum the X offset of the last child element of the columns container with it width, then, subtract it with the sum of the column container X offset.

In the code, I have added the size of one column after make the subtraction and division rather than use the pixel unit before the division (it does not make difference).

The Math.round must be there because not always the container size will be exactly divisible by his inner columns width.

Ricardo Azzi Silva
  • 17
  • 3
-1

could you set a class to each column such as class="another-column" and then use Jquery to select the classes and iterate them.

var count = 0;
$('.another-column').each(function(){
    count++;
});

Warning, this is untested. If you could supply with some html/css3 code I could test it on jsfiddle

Nathaniel Wendt
  • 1,194
  • 4
  • 23
  • 49