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();
, ,

Leave a Reply

Your email address will not be published.