Open Side Menu Go to the Top
Register
HTML/C# to print a list in 3 columns HTML/C# to print a list in 3 columns

09-06-2011 , 08:14 PM
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?
HTML/C# to print a list in 3 columns Quote
09-06-2011 , 08:25 PM
This will help alleviate your table guilt for this layout:
http://meyerweb.com/eric/thoughts/20...layout-system/

As for the rest, are you using a framework? Don't know C# but most web frameworks should have helper functions that would clean that code up for you.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 01:32 AM
Initial reaction:

Your code is barely readable.

Why can't you just drop each content piece into a div, all with the same class, and then use CSS to make each div display with width=33%. Put all of that inside a div with width set to an appropriate number of pixels. If you want to change to 2 or 4 columns you just change width percent.



After more thought:

Your code isn't bad because of the HTML structure you are building, it sucks because you are building HTML in a stringbuilder. Is your website in asp.net? There should be some file format that allows you to intersperse code and HTML, which should make reading what you are trying to do easier.

Last edited by tabako; 09-07-2011 at 01:50 AM.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 02:02 AM
tabako, without modern browsers and the multi-column css property, you can't just change width on divs if you want to a multi column layout where the content flows from col1 to col2 to col3. that is, if you must support older version of ie, you are ****ed and have calculate and layout the content with a script like Gullanian did. At least, I don't see any way around it.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 09:41 AM
I'm not sure I appreciate the whole problem here, but wouldn't this be easier in JS?

There's gotta be a jquery plugin for this.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 09:57 AM
You can use JS yes, but I don't like using it as I've designed the whole site to degrade nicely as possible. The code based solution looks exactly right for everyone and if the list gets big people might experience page load delay as it sorts the data.

There might be a .NET thing to do this but I'm not aware of one.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 10:06 AM
What do you mean by "degrade nicely as possible"?

I don't think there would be any performance penalty to using js. You can still use the server to do all of the sorting of your data and just leave the actual presentation (building of the DOM) to the javascript.

I'm not saying you should do it (given where you're already at it seems like a poor idea) but it seems like the better way to me if you were to start from scratch.
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 10:08 AM
I mean if a client has Javascript disabled (of which is quite common now with the advent of NoScript and other fear mongering plugins!</rant>) then best case scenario for those people the page would be on single ugly column.

If you have 1,000+ links viewing on your iPhone as well, I wouldn't be surprised if it took a couple of seconds to sort it into columns. (JS sucks on iPhone at the moment)
HTML/C# to print a list in 3 columns Quote
09-07-2011 , 10:12 AM
Quote:
Originally Posted by Gullanian
I mean if a client has Javascript disabled (of which is quite common now with the advent of NoScript and other fear mongering plugins!</rant>) then best case scenario for those people the page would be on single ugly column.
Fair enough, you know your users better than I do (I've never built something for the general public, so no-js hasn't really been an issue for me).

Quote:
Originally Posted by Gullanian
If you have 1,000+ links viewing on your iPhone as well, I wouldn't be surprised if it took a couple of seconds to sort it into columns. (JS sucks on iPhone at the moment)
You could still sort the data into columns on the server or use js to display only a single column when you're on mobile device (which could actually be very nice).

I'm also not very up to speed on js for mobile devices - so I could be underestimating how much it sucks.
HTML/C# to print a list in 3 columns Quote
09-09-2011 , 07:00 PM
I would recommend using a Datalist Control. It will basically do all of this for you.

First Drop an ObjectDataSourceControl onto your form.
Point it to ArticlesCommon.GetAlphabeticalArticleList(Settings .TutorialSectionID);

Drop a Datalist control on your form and set the Datasource to the ObjectDataSource.

Create a template for each Item which in this case would be the article link, the comment image and link.

Create a Separator Template.
Set RepeatDirection to Vertical and RepeatColumns to 3.

Code:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Vertical">
        <SeparatorTemplate></SeparatorTemplate>
        <ItemTemplate></ItemTemplate>

        </asp:DataList>
You could do 90% of this at design time and only have to add a little code to handle to A, B, C stuff etc... which i would place in the SeparatorTemplate.

If you have questions/need help let me know. I have done this quite a bit.
HTML/C# to print a list in 3 columns Quote
09-09-2011 , 07:25 PM
Hey Rubix thanks for that solution, if I try something similar in future I'll refer back to this and attempt it.

I don't actually use design view at all, I'm so used to just coding I do it all that way, am I missing out on much?
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 01:53 AM
I guess word-nittery, but graceful degradation only means that if someone has JS/CSS turned off, they can still reasonably use your site, ie, they can still use the links, everything collapses to the left side of the page, the background color doesn't wipe out all the text, etc.

I think it's absurd -- and hard to believe -- that anyone would turn on noScript then bitch about how your site doesn't have a spinning globe on it. They have noScript on all the time: they are used to seeing the 1992 version of the web.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 10:27 AM
Quote:
Originally Posted by daveT
I guess word-nittery, but graceful degradation only means that if someone has JS/CSS turned off, they can still reasonably use your site, ie, they can still use the links, everything collapses to the left side of the page, the background color doesn't wipe out all the text, etc.

I think it's absurd -- and hard to believe -- that anyone would turn on noScript then bitch about how your site doesn't have a spinning globe on it. They have noScript on all the time: they are used to seeing the 1992 version of the web.
I agree. Anyone that is using noscript knows what it does and how it affects web pages.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 10:41 AM
I don't think a lot of people who use it think like that.

Also if a visitor comes onto your site and it looks kinda funky, then they go on a competitors site and it looks kinda cool you're going to lose out. It might seem nitty that we are talking about 3 column layouts here but it's because I've tried really hard to make it consistent with JS disabled that we are talking about 3 column layouts, it could easily of been much bigger features if I was more liberal about it.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 03:24 PM
I remember reading a really good article about how its often good business to turn away your toughest customers.

If we're talking 1-2% of customers not using javascript - I think that applies here. Why handicap yourself for a very small marginal gain. If we're talking 10-20% of customers - then that's a different story.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 03:46 PM
I don't think JS disabled visitors = toughest customers. I think there's a ton of misinformation out there and a lot of people just do it because they think it's making their computer more secure.

If we assume 2% of customers don't have Javascript enabled, and let's assume a small site of 10,000 unique visitors a month, before you've even pitched to them that's 200 potential customers a month you've just blocked. Yearly that's 2,400 customers, at a 1% conversion rate selling something for $50 profit you're insta blocking out ~$1,200 of profit annually. x10 these numbers if you're growing and you end up talking about someone's yearly salary. It's far far easier to design something right the first time, upwards, than realise a lot of customers can't access your site/features and try and work downwards on it. I've been in a job they try and do that before and it takes 10x longer.

This is the extreme where they can't even access your site without JS enabled, but I honestly think if visitors are browsing your site and it looks glitchy/some features don't work it's going to reflect really badly on your product so a majority of them are as good as dead.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 05:12 PM
If the following are true (I believe 1 is true, and assume 2 is true - but both are probably debatable):

1. It's easier to implement a site using JS for many features
2. You have a reasonably long list of features you'd like to implement on your site

Then your logic doesn't hold. You could spend the time you save (based on (1)) to implement new features that would improve your site for the other 98% of users and increase overall js visitors or improve the conversion rate - thereby offsetting the no-js users that you lost.

As far as your point about trying to downgrade something later - it's unlikely that the percentage of people not using javascript is going to be increasing, so you likely won't be trying to serve them later on anyway.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 06:01 PM
also, if it takes "10x longer" to retro-fit the no-js version, but there's only a 10% chance your site gets huge enough to really need it, it's a wash.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 06:44 PM
So you have two groups of people:

A - noScript user, who is hyper-vigilant about security, and ~probably won't give you his or her cc and paypal info.~

B - Wants all the bells and whistles, quite likely to give you cc and paypal information.

You want to create a good experience for A (2%) and downgrade the experience for B (98%) to accommodate A? Who do you think is more likely to go to another site because it is missing bells and whistles? Who do you think is your bread and butter?
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 07:41 PM
That's the point though, what I'm doing doesn't downgrade the experience for anyone, it's the same experience. The 98% aren't suffering, the 2% aren't suffering. It's the same for everyone. No one is losing out here.

The point about time is a good one, but the code I wrote took all of 15 minutes, doing a Jquery one would take around the same time and has much more downside to it. So this example is a no brainer imo. It's also going to save buckets of time in the future when I do look back and want to change it.

Retro fitting is a really ill advised way to go about developing it. My point is it's already big enough to make a difference, any extra profit >$1k is good news.

I don't want this to turn into a big discussion because to progressively enhance like this is what I thought was considered good design, and what I think most people should be doing most of the time!

There's also the point about less fortunate users who are unable to see who may want to access your site, depending in niche of course, but a progressively enhanced site is much more likely to be able to be used by sight impaired than one where dynamic scripts are used at will.

Last edited by Gullanian; 09-10-2011 at 07:47 PM.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 07:49 PM
bah sorry if I come off tetchy it's late and I'm exhausted.

Basically my thought is progressive enhancement is a good (the best?) design pattern to get in to for web development, for the reasons of time saved in the future and accessibility. That's about it really.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 09:44 PM
I think you're spot on Gullanian, but then I'm a noscript user. I certianly diasgree with the statement that a noscript user is unlikey to fork over their payment info due to security concerns. in fact a site working properly will greatly improve my opinion of them. maybe if you're selling acai berry free trial rebills, yeah you probably don't need to give a damn about anyone but the IE6-9 users - but if you're selling a html5 game creation engine I think tech savvy users might be part of your demographic worth considering.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 09:59 PM
Quote:
Originally Posted by _dave_
I'm a noscript user.
why?
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 10:19 PM
it makes my old computer run hugely faster when I got a ton of tabs open not executing hundreds of scripts, stops all manner of supposedly malicious exploits (only a few months ago I managed to get "Antivirus XP" malware browsing just one big-name hardware vendor site without noscript, was a right pain to clean). it's selective IFRAME blocking is great too if you're not so keen on having facebook etc. know your browsing history. yesterday it blocked a suspected XSS exploit browsing OOT, no idea what it was probably a false positive, was a rare sight though.
HTML/C# to print a list in 3 columns Quote
09-10-2011 , 11:46 PM
It doesn't make sense to me that "tech savvy" users who want to build games use IE6.

It doesn't make sense to me that a security-minded noScript user would be willing to put up their cc information on the web at all, considering injection attacks are far more serious and likely than XXS (btw, even if you don't have noScript on global block, it still blocks XXS).

I also think there are far better indications of careless coding than finding a site that isn't up to 100% with noScript on. How many times have you seen pages load out of order, put you into autofocus, and when you are 4 fields in, see the entire page reload and see your information erased? That is one very common and, IMO, a huge indication of careless coding, and one you wouldn't see if you have noScript on. Grant it, this is a front-end issue and not a back-end issue, but still.

Now I'm derailing, sorry.

=======================================

Here's an awesome ff plug-in if you are interested in screen-reader accessibility issues.

https://addons.mozilla.org/en-US/fir...ader-emulator/
HTML/C# to print a list in 3 columns Quote

      
m