logo

Accessible Server-Side Stylesheet Switching

One of the things I've never liked about using cookies is the apparent need for so much JavaScript to manage them. I'd always assumed this was the only way to do it. It wasn't until I noticed that the help for @SetHTTPHeader talks about using the Set-Cookie response parameter that I realised you could set them server-side as well and, obviously, JavaScript isn't the only way.

It seemed logical that you could also set cookies from Agents, like so:

Print "Set-Cookie: style=contrast; expires=Friday, 11-Jan-2030 01:10:00 GMT; path=/;"

Which, it turns out, you can. By using server-side code we don't rely on JavaScript and so we can provide an accessible entry point to our databases. For example, look again at the calendar "view". Notice the new links, top right. These links call an agent to set a cookie to define the preferred style you want to see the whole application in. The chosen style will stick across all pages until you choose another style option.

Give it a go and see what you think. The high-contrast colour scheme might not be exactly what a visually challenged user would like, but you get the idea. Store most CSS in a global.css file and then all those that govern colour and other aspects of appearance go in other CSS files.

I should mention, the other side to this is in the computed $$HTMLHead field where you add the following code:

"<link rel=\"stylesheet\" href=\"styles/"
 +@Middle(HTTP_COOKIE; "style="; ";")
 +".css\" type=\"text/css\">"

I know I promised that database for download today, but I keep thinking of new things to add to it, whereas I should be tidying up the code to the point where I'm happy to release it. I go away next Wednesday for a week, so that now is my deadline to make it available. I might try and squeeze some more goodies in before then...

Comments

  1. Hello Jake. Really nice stuff. May I suggest putting <table border="1"> on your calendar? Then the table is more readable when CSS is switched off. When using CSS however, you can disable the border: table{border-collapse:collapse;border:0}

    To make the page even better readable without CSS, you could also separate sections with the divider: <hr /> and hide it in CSS with: hr{display:none}. With CSS switched off, you would end up with a really cool retro HTML page.

    • avatar
    • Jake Howlett
    • Fri 17 Aug 2007 07:34 AM

    Nice idea Michel. Take another look - it should include table borders and HRs now.

    • avatar
    • Patrick Ryan
    • Fri 17 Aug 2007 08:07 AM

    Very nice.

    While you're tidying up the code, you might want to fix a small problem with the HTML ...

    The SPANs which have a class of "entry" also have an ID (which presumably is the UNID of the document for that calendar entry). The ID cannot begin with a number - it must begin with a letter.

    • avatar
    • Jake Howlett
    • Fri 17 Aug 2007 08:32 AM

    Hi Patrick. Thanks.

    Yeah, I noticed HTML Tidy producing 40-odd warnings for the calendar page. I was torn between the side of me that likes to follow rules and the other side that just thinks what the heck, it works doesn't it!?

    Fixed now though!

    For future reference -- W3C page on ID attr: {Link} -- all IDs and names of elements must begin with a letter.

    • avatar
    • andy
    • Fri 17 Aug 2007 11:59 AM

    watch out for the old ]]> combination in the subject field it breaks the XML Rss feed

    : )

  2. Pure retro beauty!

    Jake, can you share the LotusScript that makes the calendar with us? At last a script that makes the week start on a Monday :-)

    • avatar
    • Jake Howlett
    • Mon 20 Aug 2007 05:02 AM

    All code will be made available tomorrow Michel.

  3. Using formula, has any one found a way to remove a cookie?

    • avatar
    • Jake Howlett
    • Mon 24 Sep 2007 03:38 PM

    Just the same as setting one Darin but you give it a date in the past.

  4. Hi Jake,

    One more thing in the download i couldn't find the mootools js script for which it is giving error.

    Could you share the script and the method to implement???

  5. Hi Jake. I know this has been forever but your serverside stylesheet function switching works exactly as I am looking for. I saw that all the code would be available for download but I don't see a link.

    I am actually not looking for the js but the asp. It is honestly not my forte so I would like to have a read and see how you made it work. Beautiful job.

    Thanks so much.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 17 Aug 2007

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content