Pimping my blog #2

After observing that most of my visitors (45% currently) use Internet Explorer, I've made a little modification so that they to can enjoy the <q> tag. A more detailed discussion and other solutions can be found at the List Apart site. I'll only present in short my version.

My version consists of two parts: a style using the underscore hack to make the contents of the tag italic for the security conscious users (those who don't have Javascript enabled) and then a script written in unobtrusive style which (a) adds a " before and after each tag and (b) disables the italic style. You can find the sources below.

GeSHi © 2004, Nigel McNie

1. <style type="text/css"><!--
2.   Q { _font-style: italic; }
3. --></style>

GeSHi © 2004, Nigel McNie

1.   var quoteResolver = {
2.     addEvent : function (obj, evType, fn) {
3.       //taken from: http://www.scottandrew.com/weblog/articles/cbs-events
4.       if (obj.addEventListener){
5.         obj.addEventListener(evType, fn, false);
6.         return true;
7.       } else if (obj.attachEvent){
8.         var r = obj.attachEvent("on"+evType, fn);
9.         return r;
10.       } else {
11.         return false;
12.       }  
13.     },
14.    
15.     doWork: function () {
16.       //add a " before and after each q
17.       var qs = document.getElementsByTagName('q');
18.       for (var i = 0; i < qs.length; i++) {
19.         var before = document.createTextNode('"');
20.         var after = document.createTextNode('"');
21.         qs[i].parentNode.insertBefore(before, qs[i]);
22.         qs[i].parentNode.insertBefore(after, qs[i].nextSibling);
23.       }
24.      
25.       //deactivate the font-style: italic rule     
26.       for (var i = 0; i < document.styleSheets.length; i++) {
27.         //the standard would be cssRules, but IE uses rules
28.         //and we are targeting IE only
29.         var ruleList = document.styleSheets[i].rules;
30.         for (var j = 0; j < ruleList.length; j++)
31.           if ('Q' == ruleList[j].selectorText && 'italic' == ruleList[j].style.fontStyle) {
32.             //this is the style we wish to disable
33.             ruleList[j].style.fontStyle = '';
34.             break;      
35.           }
36.       }         
37.     },
38.    
39.     init : function () {
40.       //try to determine if this is an IE browser
41.       var userAgent = /MSIE/; var nonUserAgent = /Opera/; var os = /Windows/;
42.       if ( userAgent.exec(navigator.userAgent) && !nonUserAgent.exec(navigator.userAgent) && os.exec(navigator.userAgent) ) { 
43.         //register a function to do the work after we finish loading
44.         this.addEvent(window, 'load', this.doWork);
45.       }
46.     }
47.   }.init();