Blog Standard Stuff

Just over two years ago, I made a point of calling in to the offices of SitePoint in Melbourne , Australia . I was in town, passing through as part of my year-long world travels, and wanted to meet some of the people there who I’d emailed and written a few articles for in the past. We did lunch. We spoke about writing. And I said that I didn’t think that I was up to writing a book by myself but I’d like the chance to do something.

That something turned out to be a job of tech-editing a book by Shirley Kaiser. I got the offer to do it about a week after we did lunch and thought ‘why not?’. It was a job I could do while on the travels – all I’d need to do was call in at Internet Cafes from time to time to get chapters for review and send back my comments changes.

The travels ended, I got back to the UK , but there was no sign of Shirley’s book. Then, in February last year, I got an email from SitePoint entitled ‘Potential Writing Opportunity’. That was then, and this is now – the potential writing opportunity was fulfilled, but what happened to Shirley’s book?

I have just received my complimentary copy of her book Deliver First Class Web Sites: 101 Essential Checklists, after my own book which I began writing months after editing hers. It’s strange that it worked out like that, and I feel for Shirley having to wait that long for publication (I was just itching to get my hands on the printed copy of my own book!).

A peremptory scan through the book this morning suggests that it’s not that different a beast from the versions that I originally reviewed, but after a year and a half my mind is a little hazy on the fine details, so I could be wrong!

What this book does really well, if I’m allowed to pass comment on something that I had a hand in, is that it cuts out a lot of the waffle and gets to the point very quickly. I’m a fan of the checklist approach (especially if the person reading knows some background info and is not a total newbie) and with this book you can also download easily printable PDF checklists, rather than scribble on the pages themselves (or break the spine of the book by photocopying pages … which obviously you wouldn’t do for copyright reasons, nudge., nudge, wink?).

I’m looking forward to finding some time to re-read the book from start to finish. Who knows, I might even read it in the van and pretend that I’m somewhere exotic, just to take me back to where I was when I originally worked on it!

Just a quick note to say I’ve had a little bit of time off and have just come back from Prague, my second time there. In traditional fashion, I’ve spent far too much of my free time after the event documenting it before it all evaporates. Note: the design of this travelogue isn’t up to much (I simply grabbed an old one and re-purposed it), but it’s the content I was really interested in. So, if you’re interested in finding out about Prague, try one of the links below:

• Prague travel diary
• All the Prague photos
• The Bone Church - photo set
• Prague Metro stations - photo set

I recently picked up a copy of Professional CSS - aka "the Where’s Durstan book" - somewhat overdue, it should be noted! I was having a read through the chapter regarding style switching and found myself wanting to tweak the code I was looking at. What was wrong with the code/markup? Actually, nothing major, to be honest. The code worked jus’ fine but what niggled me was that while JavaScript was being used to store set the preferred style (and store a cookie to remember that selection), the links on the page that triggered the style switcher code were written in plain ole HTML with onclick event handlers. These days, whenever I see that sort of thing I just want to take them out and replace with an unobtrusive alternative.

So, that’s what I did.

Here, then, is my take on the style switcher doohicky. My aims were as follows:

• If you changed the (alternate) styles associated with the page, it should not be necessary to also change the switcher links. I thought it would be great if the script automatically found any available alternate styles and created the links accordingly
• Discoverability - style switcher links may be too subtle (depending on design), so I thought it would be cool if there was an element of prompting, ie, "you’ve been to the page x amount of times - wanna give these alternative styles a try?" (Note - I did think that maybe you should prompt on the first visit but I thought that asking if someone wants to try another style out when they’ve seen the site for the first time was not really giving them time to decide what they do or don’t like about the site).
• If JavaScript is disabled, the style switcher links should simply not be displayed to the user
• Finally, I wanted the script to be customizable, such that with a couple of variables you could specify where on the the page the switcher should be inserted.

So, here’s the script (at least my additions) but you really should see it in context. Note: the ¬ character means that the line break is displayed here for formatting reasons only (should not be like this in the actual source code)

/*
This style switcher enhancement was written by Ian Lloyd (http://lloydi.com/).
The basis for this addition comes from Ethan Marcotte's style switcher as
documented in the Wrox book professional CSS.

Feel free to use on your site but please leave comment as-is (adding your
own comments regarding further modifications that you may choose to make.
*/

// VARIABLES - uncomment and customise to suit needs
var ContainerID = "content"; //Add the name of the container that you ¬
  want the switcher tool to be written into here
var Position = "first"; // If you enable this, the switcher will be  ¬
  inserted as either the first item in the parent container, otherwise  ¬
  it'll add as last item
var PromptMessage = "Did you notice that you can change the display of  ¬
  this site using these links above? [This note will not be displayed  ¬
  after you hit refresh or visit another page]";
var promptTrigger = 20; //how many page views until the prompt to check  ¬
  out the other styles appears;
// End variables

function findCSS() {
//check for previous visits to site/page
var visitCount = readCookie("visitCount");
if ((typeof visitCount=="undefined")||(visitCount=="NaN")){
 visitCount=0;
 }
else{
 visitCount = parseInt(visitCount);
 visitCount+=1;
 }
//log another visit to the page, store in cookie - to be used for prompt mechanism
setCookie("visitCount", visitCount, 365);

var altCSS = false;//no alternative style sheets found
var CSSlinks = document.getElementsByTagName("link");
if (CSSlinks.length>0)
 {
 var switcherDiv = document.createElement("div");
 switcherDiv.setAttribute("id","switcher");
 var ul = document.createElement("ul");

 //write in link to default style
 var defaultLI = document.createElement("li");
 defaultLI.setAttribute("class","first");
 defaultLI.setAttribute("className","first");
 var defaultLItext = document.createTextNode("Default style");
 var defA = document.createElement("a");
 defA.setAttribute("href","#");
 defA.setAttribute("title","default");
 defA.onclick = doSwitch;
 defA.appendChild(defaultLItext);
 defaultLI.appendChild(defA);
 ul.appendChild(defaultLI);

 //loop through all CSS links - look for alternate styles
 for (i=0;i<CSSlinks.length;i++) {
  if (CSSlinks[i].rel=="alternate stylesheet") {
   altCSS = true;//there are alternative style sheets here
   var newLI 		= document.createElement("li");
   var newA		= document.createElement("a");
   newA.setAttribute("href","#");
   newA.setAttribute("title",CSSlinks[i].title);
   newA.onclick = doSwitch;
   var newLItext 	= document.createTextNode(CSSlinks[i].title);
   newA.appendChild(newLItext);
   newLI.appendChild(newA);
   ul.appendChild(newLI);
   }
  }
 if (altCSS) { //alternate stylesheets were found - add to document
  //add navigation list to switcher container
  switcherDiv.appendChild(ul);
  //add prompt text for *this visit only*
  if (typeof promptTrigger!='undefined') {
   if (visitCount==promptTrigger) {
    var promptP = document.createElement("p");
    var promptPtext = document.createTextNode(PromptMessage);
    promptP.setAttribute("class","style-switch-prompt");
    promptP.setAttribute("className","style-switch-prompt");
    promptP.appendChild(promptPtext);
    switcherDiv.appendChild(promptP);
    }
   }
   //what parent container is switcher to go into?
   if (typeof ContainerID!='undefined') {//place in container set in variables
    var container = document.getElementById(ContainerID);
    }
   else {//drop into body of document
    var container = document.getElementsByTagName("body");
    container = container[0];
    }
   //where in parent container should it go?
   if (typeof Position!='undefined') {
    container.insertBefore(switcherDiv, container.firstChild );
    }
   else {
    container.appendChild(switcherDiv);
    }
   }
  }
}
function doSwitch(e) {
activeCSS(this.title);
return false;
}
addEvent(window,'load',findCSS, false);

So, that was the idea - have a play, see if it works for you (try disabling javascript, download the .js file yourself, try it out on your own site). Whatever your experiences with this, please do add a comment if you have a suggestion or question.