Favelet test page

Thanks to Simon who sorted out a bug for me (it req’d an anonymous function that I’d ommitted). It now works a treat in Firefox. I can’t be arsed to make it work for anything else, but you’re more than welcome to have a go :-D Also, any other comments to make it work better are appreciated.

One solution is to use attribute selectors, like so: input [type="text"] {border:1px solid gray;} but IE doesn’t understand that concept, so you’re nback to square one. Well, unless you use the power of the DOM (cue dramatic drum roll). So here’s a little script that takes care of things for you:

function addEvent(elm, evType, fn, useCapture)
{
if(elm.addEventListener)
  {
  elm.addEventListener(evType, fn, useCapture);
  return true;
  }
else if (elm.attachEvent)
  {
  var r = elm.attachEvent(\'on\' + evType, fn);
  return r;
  }
else
  {
  elm[\'on\' + evType] = fn;
  }
}

// removes the square border that IE
// insists on adding to checkboxes and radio
function removeCheckBoxBorders()
{
var el = document.getElementsByTagName(\"input\");
for (i=0;i<el.length;i++)
  {
  var type = el[i].getAttribute(\"type\");
  if((type==\"checkbox\")||(type==\"radio\"))
    {
   el[i].style.border = \"none\";
    }
  }
}

addEvent(window, \'load\', removeCheckBoxBorders, false);

If you like this idea, why not Digg it (or whatever else it is you cool kids do these days)?

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.

Why might you use this? Well, the inspiration came from a page of interest rates from banking and savings products. Customers have often complained that the interest rates were split up on different sections – they wanted everything in one page. But what about those people who only want to print out the section that relates to them? One solution is to build the page using include files with separate printer-friendly pages that are linked to. This solution uses DOM scripting to dynamically apply print CSS styles depending on the link that has been clicked on – if the user clicks on ‘print this section’, all other sections are set to display none for print.

This technique could be use in

• FAQs
• Product information pages
• … well, wherever you feel it has value

This has been tested and works in

• Windows
  • Firefox 1.5
  • Netscape 6.2
  • Netscape 8
  • Opera 7.0
  • Opera 8.5
  • IE 6
• Mac
  • Firefox 1.5
  • Camino 1.0
  • Opera 7.54

Notes:

The ‘print this section’ links are dynamically inserted for any section that is marked with the class name of section and are hidden using print CSS. No JavaScript, no see the links!

I have had to double up on the attribute setters in the script so that IE didn’t get upset. It’s not perfect, but it works and isn’t really nasty. No, honestly, it isn’t ;-)

el[i].setAttribute("className","section print");
el[i].setAttribute("class","section print");

View the Example Here »

And if you like what you see, why not digg it for me? Thanks

Copy the Code Here

Get the JavaScript here and the HTML here