Mental Masturbation, Musings, and Methods

The Mind of Alex Beutel

Hacking the New Facebook Design with Greasemonkey

July 9th, 2008 · No Comments

In the seemingly never endless wait yet quickly approaching wake of the Facebook redesign I decided I should update my Greasemonkey Quick Links script.  Unfortunately, hacking this new version of Facebook was not quite as simple as appending some HTML to a div.  Because of Facebook's push towards more AJAX integration, even their menu system is far more Javascript than CSS dependent and now requires running a few of their functions to add event listeners appropriately for new menus.  Because this seemed like a bit of work, I decided to make a nice clean function that others can use should they want to make their own menus in Greasemonkey.  The full new Quick Links script can be found here.  The function to add a menu is below or viewable as its own file.

JavaScript:
  1. /*
  2. This method adds a new menu to the top menu bar
  3. string title - The title of the menu
  4. hrefs - array of strings that contains the URLs for the menu items
  5. links - text to be displayed for the link.  if you would like a menu seperator, pass '<hr />' as the string
  6. */
  7. function buildAndInsertMenu(title, hrefs, links)
  8. {
  9.     var cond = title.replace(" ", "_");
  10.     var menu = document.createElement('div');
  11.     var html = "";
  12.     menu.id = 'fb_menu_'+cond;
  13.     menu.setAttribute('class', 'fb_menu');
  14.     html += "<div class=\"fb_menu_title\"><a href=\"#\" id=\"nav_" + cond +"\">" + title +"</a></div>";
  15.     html += "<div id=\"fb_menu_" + cond + "_dropdown\" class=\"fb_menu_dropdown hidden_elem\">";
  16.     var i;
  17.     for(i = 0; i <hrefs.length; i++)
  18.     {
  19.         if (hrefs[i] == null || links[i] == null)
  20.             continue;
  21.         if (links[i] == "<hr>")
  22.             html += "<div class='fb_menu_separator'></div>";
  23.         else
  24.             html += "<div class=\"fb_menu_item\"><a href='" + hrefs[i] + "'>" + links[i] + "</a></div>";
  25.     }
  26.     html += "</div>";
  27.     menu.innerHTML = html;
  28.     if(document.getElementById('fb_menubar_core') != null)
  29.         document.getElementById('fb_menubar_core').appendChild(menu);
  30.     var dropdown_id=menu.id+'_dropdown';
  31.     var menu_anchor=menu.firstChild.firstChild;
  32.     if(typeof dropmenu == 'function')
  33.         hover_menu(menu_anchor).registerHTMLMenu(dropdown_id).setPosition(dropmenu.ALIGN_LEFT).setTimeoutInterval(objMenubar.timeout).addHook('show',bind(objMenubar,'_onShowCallback',menu_anchor,dropdown)).addHook('hide',bind(objMenubar,'_onHideCallback',menu_anchor)).initialize();
  34.  
  35. }

Tags: Facebook · Javascript · Programming

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment