For some reason never really needed to do this before until now. It's something porn sites seem to do well.
I am aware of CSS3 columns, but there seems to be no support for these in IE which makes it a no go for me (IE, sigh).
The page I've managed to generate is here:
http://www.scirra.com/tutorials/all
If you view the source of generated content, the basic format of it is:
Code:
<table class="alph-table">
<tr>
<td valign="top">
<h2>B</h2>
<ul class="alph-list">
<li><a href="tutorials/40/basic-loops-and-arrays" title="A tutorial on loops and arrays. For those unfamiliar with the basic programming concepts.">Basic Loops and Arrays</a>
</li>
</td>
<td></td>
<td></td>
</tr>
</table>
I know using tables here will probably get a bit of backlash but for simple things such as this I just find it easier so w/e imo.
It drops them in 3 columns with appropriate first character headers, seems to look good and work fine. The code for this is pretty gross though.
Code:
// Get all articles
ArticleOverview[] AllTutorials = ArticlesCommon.GetAlphabeticalArticleList(Settings.TutorialSectionID);
int CountPerColumn = AllTutorials.Count() / 3;
string CurrentChar = "";
StringBuilder b = new StringBuilder();
bool ListOpen = false;
bool NewCol = false;
int Temp;
int TotalProcessed = 0;
foreach (ArticleOverview A in AllTutorials)
{
// Process first character of title
string Firstchar = A.Title.Substring(0, 1).ToUpper();
if (int.TryParse(Firstchar, out Temp))
Firstchar = "#";
// We are on a new chracter, initialise it
if (CurrentChar != Firstchar)
{
if (ListOpen)
{
b.Append("</ul><br />");
ListOpen = false;
}
CurrentChar = Firstchar;
b.Append("<h2>" + Firstchar + "</h2>");
// Block the new col space
NewCol = false;
}
// Print link
if (NewCol)
b.Append("<div class=\"topspacer\"></div>");
if (!ListOpen)
{
b.Append("<ul class=\"alph-list\">");
ListOpen = true;
}
// Work out if this article is considered new or not
TimeSpan ts = DateTime.Now - A.DateAdded;
bool IsBold = ts.Days < 5;
// Create the link
b.Append("<li>");
if (IsBold)
b.Append("<strong>");
b.Append("<a href=\"tutorials/" + A.ID + "/" + SEO.FriendlyURL(A.Title) + "\" title=\"" + A.Description + "\">" + A.Title + "</a>");
if (IsBold)
b.Append(" <em>(New!)</em></strong>");
b.Append("</li>");
TotalProcessed++;
// Reset col value once used
NewCol = false;
// New column
if (TotalProcessed > CountPerColumn)
{
if (ListOpen)
{
b.Append("</ul>");
ListOpen = false;
}
b.Append("</td><td valign=\"top\">");
TotalProcessed = 0;
NewCol = true;
}
}
if (ListOpen)
{
b.Append("</ul>");
ListOpen = false;
}
Now for this sort of thing is this standard? I can't really think of any other way to do it. The code is pretty ugly but works. I doubt I'm going to change it any time soon but was just wondering if anyone would approach this problem in a different way?