CODEWITHSUNDEEP
jquerycssmultiple-columns
Tim Wayne
Tim Wayne

Reputation: 39

flow 3 columns of text automatically with CSS and jQuery

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

Upvotes: 3

Views: 1658

Answers (2)

Nate
Nate

Reputation: 4958

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.

Upvotes: 1

user2216267
user2216267

Reputation: 491

Alternatively you can use CSS3 Multiple Columns:

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

Upvotes: 2

Related Questions