This is a customization of Rebecca Murphey’s script:

   1  $('a').each(function() {
   2  	var $a = $(this);
   3  	var href = $a.attr('href');
   4  	
   5  	if(typeof pageTracker == 'undefined') { return; }
   6  
   7  	// Link is external
   8  	if (href.match(/^http/) && !href.match(document.domain)) {
   9  		$a.click(function() {
  10  			pageTracker._trackPageview('/external/' + href);
  11  		});
  12  	} else {
  13  		$a.click(function() {
  14  			pageTracker._trackPageview('/internal' + href);
  15  		});
  16  	}
  17  });

Note that clicks are shown as page views in reports, so you should exclude them from all reports. A future version of Google Analytics will allow you to track events, such as mouse clicks, without affecting page view reporting, see this page on the new event tracking beta feature for more information.

Usually you would do this with target=’blank’, but that attribute has been removed, so use this instead:

   1  $('a[rel=external]').click(function() {
   2  	window.open(this.href); 
   3  	return false;
   4  });

This example uses the jQuery JavaScript library.

First, create an Ajax icon using the AjaxLoad site.

Then add the following to your HTML :

   1  <img src="/images/loading.gif" id="loading-indicator" style="display:none" />

And the following to your CSS file:

   1  #loading-indicator {
   2    position: absolute;
   3    left: 10px;
   4    top: 10px;
   5  }

Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:

   1  $(document).ajaxSend(function(event, request, settings) {
   2    $('#loading-indicator').show();
   3  });
   4  
   5  $(document).ajaxComplete(function(event, request, settings) {
   6    $('#loading-indicator').hide();
   7  });

I got the inspiration for this simple menu from this blog post. It’s based on the hover intent jQuery plugin by Brian Cherne.

The requirements:

On mouse out hide menu:

Categories

On mouse over display menu:

Categories

-Edit

-Delete

The HTML

   1  <div id="categories-menu" class="hover-menu">
   2    <h2>Categories</h2>
   3    <ul class="actions no-style" style="display: none">
   4      <li><a href="">Add</a></li>
   5      <li><a href="">Edit</a></li>
   6      <li><a href="">Delete</a></li>
   7    </ul>
   8  </div>

The JavaScript

   1  <script type="text/javascript">
   2  $(document).ready(function() {
   3  
   4    function show() {
   5      var menu = $(this);
   6      menu.children(".actions").slideDown();
   7    }
   8   
   9    function hide() { 
  10      var menu = $(this);
  11      menu.children(".actions").slideUp();
  12    }
  13  
  14    $(".hover-menu").hoverIntent({
  15      sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
  16      interval: 50,   // number = milliseconds for onMouseOver polling interval
  17      over: show,     // function = onMouseOver callback (required)
  18      timeout: 300,   // number = milliseconds delay before onMouseOut
  19      out: hide       // function = onMouseOut callback (required)
  20    });
  21   
  22  });
  23  </script>

Positioning the hover menu over the content

The above example will show the menu inline with the content, effectively pushing it down. To avoid that, use this HTML :

   1  <div id="categories-menu" class="hover-menu" style="position: relative">
   2              <h2>Categories</h2>
   3              <ul class="actions no-style" style="position: absolute; background: white; display: none;">
   4                <li><a href="" id="edit-mode">Edit mode</a></li>
   5                <li><a href="" class="last">Add</a></li>
   6              </ul>
   7            </div>

Note that this only works from a Firefox extension:

   1  function openTab(url, focus) 
   2    {
   3      var tab = getBrowser().addTab(url);
   4  
   5      if(focus)
   6      {
   7        getBrowser().selectedTab = tab;
   8      }
   9     
  10      return tab;
  11    }
  12