Add & Remove the SyntaxHighlighter Toolbar on MouseOver,MouseOut Events
The Syntax Highlighter Iam using here is syntaxhighlighter_2.0.296 made by alexgorbatchev It’s an amazing syntax highlighter actually nevertheless I had comment from one of my friends that the toolbar is hiding the code which is a little bit distracting so I decided to add a functionality on it so that the toolbar is initially not visible then it becomes visible when the mouse comes over the code section like that it will maintain the functionality and it will look nicer.
My first thought to do this was to edit the code highlighter my self then I decided to make it as an add on so that any updates in the original code doesn’t make me to re do the modification.
- First you need to have a utility file I made (click here) to have it
- Put a reference to the javascript file in the head of your html
- Place the following code in the head element
//Here I attach to the window onload event the method RbmInit to be called when the event is fired RbmBindEvent(window,'load',RbmInit); //Those are the two lines of initializing the SyntaxHighlighter SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); function RbmInit() { var tags = RbmGetElementsByTagName(document,'div'); for (var i = 0; i < tags.length; i++) { var x = tags[i].className; if(RbmIsExists(x) && RbmStringContains(x,'syntaxhighlighter')) { //on mouse over I set the toolbar div visibility to visible tags[i].onmouseover = function(){ var childTags = RbmGetElementsByTagName(this,'div'); for (var j = 0; j < childTags.length; j++){ var y = childTags[j].className; if(RbmIsExists(y) && y == 'toolbar') { childTags[j].visible = true; childTags[j].style.visibility = 'visible'; } } } //on mouse out I set the toolbar div visibility to hidden tags[i].onmouseout = function(){ var childTags = RbmGetElementsByTagName(this,'div'); for (var j = 0; j < childTags.length; j++){ var y = childTags[j].className; if(RbmIsExists(y) && y == 'toolbar') { childTags[j].visible = false; childTags[j].style.visibility = 'hidden'; } } } } //Remove all div's with class toolbar if(RbmIsExists(x) && x == 'toolbar') { tags[i].visible = false; tags[i].style.visibility = 'hidden'; } } }
you could check the effect on any code section in my site hope you enjoy this feature 
Solving ga_shade problem from Google Analytics
I have placed the Google Analytics Script in my site however today I have encountered a weird problem an overlay div called ga_shade
have been placed on top of my site disallowing me from using it. This was little bit scary since oops are my site viewers seeing what I see so I have tried to view the site on several browsers I found that this problem only arouses in my Firefox browser so I have made a little research and I found that this problem only arouses when you are logging in your analatycs account and it happens only to the owner of the account after you try to view the statistics of the page to know the traffic on each part of the page. Then to solve the problem I only cleared my browser cache and every thing worked for me.