So I was checking up on my twitter feed yesterday and saw a tweet that direceted me to this: http://devthought.com/wp-content/projects/mootools/BSOD/:
The script BSOD.js provides an easy-to-use class to boost the error reporting user experience of your websites.
To fully understand the characteristics of this technique please refer to this external article
I thought to myself… I can do that. I will use jQuery. So I spent most of yesterday after work learning up on how to make a jQuery extension (I wanted to be able to call it the same way as the moo-tools one)
$.bsod();
I got a bit carried away. I didn’t want just a bsod, I wanted each user to feel like the error was specifically made for them, so I added in os detection and os specific styles. I liked the way that he incorporated Spyjax (ajax for evil!), so I added that by default (you can turn it off of course if you want, it will blame a random site that is in the list). I also liked the colour changing, so that is in there too (it works only for the windows bsod though because linux and mac have images). Here are the options:
- color: the background colour (win only, others are all black)
- font_color: the font colour
- error: the error message you want to display
- os: the os (default is to guess the user’s os)
- blame_url: boolean – true = blame a specific url
- url_array: an array of urls you are looking to blame
- error_array: a bunch of errors that you would like to use (one is randomly choosen)
Dependencies
Right now, the images and jQuery (tested with 1.3.1).
There is also a style that is compressed using cssTidy and inserted with the bsod.
Without further ado:
The demo (click on a word to see the bsod)
bsod.1.0.zip (with the dependencies included so you can use it right away!)
And some screen shots:
Tested in:
- IE 8, IE 7
- Firefox 3
- Opera 9.63
- Chrome 1.0.154.48
In case you missed it:
The demo (click on a word to see the bsod)
bsod.1.0.zip (with the dependencies included so you can use it right away!)