I

received a client request last night asking if there was any way to provide some sort of additional highlighting to the currently-selected module in the left navigation. You’re probably already aware that when you click on a link in the left nav that link changes to a bold text. The client wanted to add a background highlight color in addition to the bolded text so that the selected module would be easier to see. The end result of this customization looks something like this…


This customization obviously isn’t for everybody, but I think it does demonstrate a good use of UI scripts. The script below needs to be set up as a Global UI script so that it will run throughout the user session. Within the script I check to see if the navigation pane is being loaded or not so we can cut down on a lot of the unnecessary code when the main frame is loading content. If the script finds the navigation pane it attaches an event to each menu item. This event is triggered when the item is clicked and it adds the highlight color to that item. In addition, it removes the highlight color from the previously-selected menu item.

You can change the highlight color by modifying the ‘lightskyblue’ text below to whatever color you want!

‘AddNavMenuHighlight’ UI script
Name: AddNavMenuHighlight
Global: True
Description: Adds a highlight color to the background of the last-selected module in the left navigation.
Script:

var lastAppLinkColor;
var menuCheckCount = 0;

addLoadEvent( function() {
   //Attach an event to the click of any nav menu item
   var menuCheckInterval = setInterval(function(){checkMenu()},1000);
   function checkMenu(){
      try{
         if(window.frames[1]){
            var menuItems = window.frames[1].document.getElementsByTagName('a');
            if (menuItems.length != 0 || menuCheckCount > 10) {
               clearInterval(menuCheckInterval);
               setHighlight(menuItems);
            }
            else{
               menuCheckCount++;
            }
         }
      }catch(e){}
   }
   function setHighlight(menuItems){
      for (i=0; i < menuItems.length; i++) {
         if(menuItems[i].className == 'menu'){
            Event.observe(menuItems[i], 'click', function(event) {
               //Remove the highlight from the previously-highlighted menu item
               if (lastAppLinkColor) {
                  lastAppLinkColor.style.backgroundColor = "";
               }
               //Get the parent table row of the link clicked
               var elt = Event.findElement(event, 'div'); //If UI11 target 'tr' instead of 'div'
               if (elt != document) {
                  //Add the highlight color
                  $(elt).style.backgroundColor = "lightskyblue";
                  lastAppLinkColor = elt;
               }
            });
         }
      }
   }
});