flow 3 columns of text automatically with CSS and jQuery

Question

I am trying to figure out how to flow text automatically, using CSS and jQuery.

Here is how to make text flow into two stacks (which I found on this page):

<script type="text/javascript">
  $(document).ready(function() {
    var size = $("#data > p").size();
 $(".Column1 > p").each(function(index){
  if (index >= size/2){
   $(this).appendTo("#Column2");
  }
 });
  });
</script>

<div id="data" class="Column1" style="float:left;width:300px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

Is there a way to convert the JS above so that if flows into three columns instead of just two?

I was thinking maybe

<script type="text/javascript">
   $(document).ready(function() {
     var size = $("#data > p").size();
     $(".Column1 > p").each(function(index){
        if (index >= size/3){
           $(this).appendTo("#Column2");
    }
      });
     $(".Column2 > p").each(function(index){
        if (index >= size*2/3){
           $(this).appendTo("#Column3");
        }
      });
    });
</script>

<div id="data" class="Column1" style="float:left;width:250px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:250px;"></div>
<div id="Column3" style="float:left;width:250px;"></div>

But that doesn't work - it still just splits it into two columns.

I'm pretty sure I'm missing something very simple and small, but I'm confounded.

I'd like to make the above work, rather than use the Columnizer jQuery Plugin, which is far too much for my meager needs.

Thank you! -Tim

I was able to solve this with the Columnizer jQuery Plugin I mentioned in my question. However, I'd still like to know how to accomplish a three-column layout with this more simple approach above. — Tim Wayne
– Tim Wayne, Commented Apr 28, 2013 at 23:31
I've added an addendum to my answer to explain why your code isn't working. — Nate
– Nate, Commented Apr 28, 2013 at 23:35

user2216267 · Accepted Answer · 2013-04-28 23:03:38Z

2

Alternatively you can use CSS3 Multiple Columns:

#column
{
    moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

answered Apr 28, 2013 at 23:03

user2216267

4913 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Wayne Over a year ago

I'd love to use the #column CSS3 tag, but I'm reading that Internet Explorer 9, and earlier versions, does not support the multiple columns properties. w3schools.com/css3/css3_multiple_columns.asp

cimmanon Over a year ago

Does it matter? Native implementation is going to be better than anything you can cook up with JS. If you need to fake it, there's always a polyfill out there.

Nate · Accepted Answer · 2013-04-28 23:35:00Z

Here's a simple way you can divide your paragraphs between any number of columns:

http://jsfiddle.net/nate/F8zPs/1/

<div class="column">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data End-->
</div>

<div class="column"></div>
<div class="column"></div>

$(document).ready(function() {
    var $columns = $('.column'),
        $data = $columns.first().find('p'),
        size = $data.size(),
        columnSize = size / $columns.length;

    $data.each(function (index) {
        var column = Math.floor(index / columnSize);
        $(this).appendTo($columns.eq(column));
    });
});

Also, if you'd like to know why your code isn't working, throw a console.log in your two each statements to check the values you're getting. You run one loop on the first column, then a second loop on the second column. But remember: when you run the second loop, what used to be the third, fourth, fifth, and sixth options are now the first, second, third, and fourth, which means they never exceed four.

Collectives™ on Stack Overflow

flow 3 columns of text automatically with CSS and jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related