Hi

I am really not good with javascript but I have a script that retrieves a list of state names with this code:

map.objectList = new AmCharts.ObjectList("listdiv");

Apparantly it is withouth any format retrieved in a UL LI format.

I need to "catch" this list (I know it has 51 names) and display it in columns with CSS.
I was able to find some similar code, but I am not sure as to how to use it. The #listdiv refers to my CSS div.

// generate list
        var cnt = AmCharts.maps.usaLow.svg.g.path.length;
        var brk = Math.ceil(cnt / 2);
        var i = 0;
        $(AmCharts.maps.usaLow.svg.g.path).each(function () {
          var col = i > brk ? 2 : 1;
          $('#listdiv #col'+col).append('<label><input type="checkbox" value="'+this.id+'" onclick="updateMap();" /> <span>'+this.title+'</span></label><br />');
          i++;
        });
/* end of list */

I tried css:

<div id="listdiv"> 
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
</div>

I really need help because I do not want a longgggg list with scroll bars. How do I do this?

never mind. I just deleted the code I found and used simple css to devide in columns.
My code is this:

map.objectList = new AmCharts.ObjectList("listdiv");

and css this:

#listdiv ul{width:100%;margin:0;}
#listdiv li{width:20%;float:left;display:inline}

It just give the <UL> 100% of whatever the width it gets from it's parent, then I devided this in 5 so <LI> gets 20% of that. Then I have my list in columns. Sometimes we overlook the simplest things:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.