JAVASCRIPT QUESTION (makeing a yahoo style section list appear in columns)

[jk358]

I was wandering if anyone on this board might know how to make a yahoo secion list appear in 2 columns. Chris helped me get the code to make a yahoo section list with images, but I would like for it to be arranged in 2 columns, here is the code:

<!--@act NETQUOTEVAR:SECTIONTREE_RAW -->

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function YahooSections(ar)
{
var strIDs = '';
for (var i=1;i<=ar.length;i++)
{
if (ar[i].sURL !=null)
{
strIDs += '<a href=' + ar[i].sURL + '><img src="' + ar[i].sImage + '" alt="'+ ar[i].sName + '" width=' + ar[i].nImageWidth + ' height=' + ar[i].nImageHeight + ' border=0></a><a href="' + ar[i].sURL + '"><span class="actregular">' + ar[i].sName + '</span></a><br>';
{
if (ar[i].pChild)
{
for (var j=1;j<=ar[i].pChild.length;j++)
{
if (j < ar[i].pChild.length)
{
strIDs += '<a href="' + ar[i].pChild[j].sURL + '"><span class="actxsmall">' + ar[i].pChild[j].sName + '</span></a>, ';
}
else
{
strIDs += '<a href="' + ar[i].pChild[j].sURL + '"><span class="actxsmall">' + ar[i].pChild[j].sName + '</span></a>, ...';
}
}
}
}
strIDs += '<br><br>'
}
}
return strIDs
}
//-->
</SCRIPT>

An example of a site that uses this layout is www.mcmaster.com. Also, the orignal post began here:
http://community.actinic.com/showthread.php?s=&threadid=5592

Thanks,

Jonathan

[NormanRouxel]

Try this:-

<!--@act NETQUOTEVAR:SECTIONTREE_RAW -->

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function YahooSections(ar)
{
var col = 1;
var strIDs = '<table width="100%"><tr><td valign=top width="50%">';
for (var i=1;i<=ar.length;i++)
{
if (ar[i].sURL !=null)
{
strIDs += '<a href=' + ar[i].sURL + '><img src="' + ar[i].sImage + '" alt="'+ ar[i].sName + '" width=' + ar[i].nImageWidth + ' height=' + ar[i].nImageHeight + ' border=0></a><a href="' + ar[i].sURL + '"><span class="actregular">' + ar[i].sName + '</span></a><br>';
{
if (ar[i].pChild)
{
for (var j=1;j<=ar[i].pChild.length;j++)
{
if (j < ar[i].pChild.length)
{
strIDs += '<a href="' + ar[i].pChild[j].sURL + '"><span class="actxsmall">' + ar[i].pChild[j].sName + '</span></a>, ';
}
else
{
strIDs += '<a href="' + ar[i].pChild[j].sURL + '"><span class="actxsmall">' + ar[i].pChild[j].sName + '</span></a>, ...';
}
}
}
}
if ( col == 1 )
{
strIDs += '</td><td valign=top width="50%">';
col++;
}
else
{
strIDs += '</td></tr><tr><td valign=top width="50%">';
col = 1;
}
}
}
if ( col == 1 ) strIDs += '</td><td>';
return strIDs + '</td></tr></table>';
}
//-->
</SCRIPT>


This lays out consecutive items side-by-side. It cannot deal with some being longer than others so there may be some spaces that creeep in.


Norman

p.s. If you'd post indented JavaScript within [ code ] and [ /code ] tags it would be much more readable.

[jk358]

Norman,

Your a genius! By the number of post you have on this board, and the number of solutions I have read by searching this board that you solved you probably hear that all the time. :cool:

Thanks so much.

Jonathan

[jk358]

Norman,

Almost forgot, is there any way to change the Font color for the Main Headings and possibly make them BOLD?

Thanks,

Jonathan

[NormanRouxel]

The fragment

<span class="actregular">' + ar[i].sName + '</span></a><br>'


Displays the Heading text

so instead try

<font color=red><b>' + ar[i].sName + '</b></font></a><br>'

instead.

If that doesn't work use the original and replace the class="actregular" with your own CSS rule.

Norman

[jk358]

Norman, Chris, or anyone willing

One last request with this ongoing issue (I think)

Instead of a comma between the subsections I would like a Bullet. Im not sure the HTML for a bullet, but like a bulleted list symbol if that makes since (a round bold ball) . I would also like a space before and after the "bullet"

Example

MAIN HEADING
Subsection1 () Subsection2 () Subsection3


Obviously () represents my bullet.

Thanks for you help.

Jonathan

[garyhay]

+ '</span></a>, ';


The comma after </a> is where you need to put your bullet