How to split dynamically generated buttons into columns using Javascript?

Question

I have Javascript code that generates buttons of two types. A header button then a varying amount of content buttons underneath. I was using CSS3 to split the buttons into columns with '-webkit-column-break' but this does not function properly in Internet Explorer or Safari.

I have an approach for custom Javascript in mind. I'm just wondering if it's possible, and how I might accomplish it. Here is my pseudo code;

create 3 divs - 1, 2, and 3

count header array.
divide count by 3 to find number to place in each column.

create a counter.
for each header placed increase count by 1.
if count is equal to column maximum then use div 2.
if div2 count is equal to column maximum then use div 3.

I can see that one problem with this approach is that it doesnt account for the varying number of columns underneath the headers. I would like column 1 and 2 to be equal length or all 3 to be equal if possible.

blarg · Accepted Answer · 2013-03-18 10:29:17Z

1

Fixed. Here's how I did it

JS Fiddle here

 var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
mycars[3] = "Porsche";
mycars[4] = "Daewoo";
mycars[5] = "MG";

var arrayCount = mycars.length;

var columnLength = arrayCount / 3;

for (var i=0; i < mycars.length; i++)
{

if (i<columnLength)
{
      document.getElementById('carList').innerHTML += '<button class="countryButtons"> '+       mycars[i]+' </button><br />';
}
else if(i< columnLength*2)
{
 document.getElementById('carList2').innerHTML += '<button class="countryButtons"> '+    mycars[i]+' </button><br />';
 }
    else if(i< columnLength*3)
{
 document.getElementById('carList3').innerHTML += '<button class="countryButtons"> '+      mycars[i]+' </button><br />';
   }
  }

answered Mar 18, 2013 at 10:29

blarg

3,92311 gold badges47 silver badges75 bronze badges

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

Collectives™ on Stack Overflow

How to split dynamically generated buttons into columns using Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related