Google Analytics: track clicks on #hash anchor links

If on your website you want to treat different page anchors as different pages (e.g. if you load your pages using Ajax), then you need a way to tell GA (Google Analytics) about this. Unfortunately there's no simple settings change you can make in the GA tracking code snippet - you actually have to run some GA code yourself when the event occurs. It turns out this is quite simple:

_gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);

But where do you use this? You could add it to the click event (either in your JavaScript, or in the markup, using the onClick attribute). But if you want a global solution, you need to fire it for all hashchanges. This can be done using the jQuery hashchange plugin:

$(window).hashchange(function() {
    // put any other hashchange magic you might want to do here
    _gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);
});

REFERENCES
http://www.searchenginepeople.com/blog/how-to-track-clicks-on-anchors-in-google-analytics.html

jQuery slideDown() doesn't work on elements with CSS min-height

jQuery v1.6.2

I have an empty div with min-height defined in the CSS. When I use jQuery's slideDown() on it, it doesn't work - the div just instantly appears. Here is the workaround:

var myMinHeight = myElement.css("minHeight");
myElement.css({minHeight: 0}).animate({height: myMinHeight}, "fast", function() {
   $(this).css({minHeight: "", height: ""});
});

First we grab the CSS min-height value. Then we overide it, setting it to 0, and animate our div to the given min-height. At this point, we have what we want, but our CSS is messed up (e.g. say our CSS min-height was originally 120px, now our div will have a fixed height of 120px). This means if we add more content to the div, it cannot grow like we want it to (the very reason we were using min-height in the first place). The solution is simply to reset jQuery's inline style values (see line 3), after which it seamlessly reverts to your original CSS values.


REFERENCES
http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
http://jsfiddle.net/jitter/mLHb9/1/

Load event for Google Maps Javascript API V3

Use this JavaScript event listener to know when your Google Map finishes initialising.

google.maps.event.addListener(map, 'idle', function() {
   ...
});

REFERENCES
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1516

Minify JavaScript in Eclipse with Google Closure Compiler

Recently I decided it was time to start minifying my jQuery scripts before deploying them to decrease download time. After lots of research, I found Google Closure Compiler, which not only minifies, it also obfuscates and even optimises your scripts (dead code removal etc)! The best place to get this done is within Eclipse, and you can do it using a plugin by Rock Star Apps. Details here: http://update.rockstarapps.com/index.html.

Basically, add this URL to your Eclipse Software Sites: http://update.rockstarapps.com, and install Rockstar Web Optimizer. You should then be able to right click a Javascript file and go Rockstarapps > Compress and you get loads of options like Google Closure Compiler, YUI Compressor etc.

You can even tell it to auto-build. When you are on the options screen, select "Automatically recreate file when one of it's dependencies changes", and then it will rebuild every time you save the source file.

UPDATE: sadly it appears rockstarapps are no more. If anyone knows of another way to achieve this, I would be very grateful!

Drupal 6: Different ways of adding JavaScript to a page

REMEMBER

• Always use drupal_add_js() as this lets Drupal handle it i.e. preprocess/cache it.
• All of the examples assume your JS is in a script file, but you can also include an "inline" script by sending it as a string for the first argument, and setting the second to "inline" e.g. drupal_add_js('alert("Hello!")', 'inline');
• If your script is in your theme directory, you can use path_to_theme() and then the relative path from there (with a preceding slash) e.g. path_to_theme().'/js/myscript.js'

1) Add a script to all pages
a) using template.php

drupal_add_js('sites/all/scripts/tweaks.js');

b) using your theme's .info file (the script needs to be somewhere within your theme directory)

scripts[] = script.js

2) Add a script to page(s) with a specific URL / URL pattern using template.php (the following will only add the script on site.com/my/page)
NOTE: if you are using URL aliases, you need to know the un-aliased version for this (see site.com/admin/build/path)

function mytheme_preprocess_page(&$vars) {
  if (arg(0) == 'my' && arg(1) == 'page' && arg(2) == null) {
    drupal_add_js(path_to_theme().'/js/myscript.js');
    $vars['scripts'] = drupal_get_js();
  }
}

OR use the following condition to add it to any pages that start with the URL site.com/my/page e.g. /my/page/1, /my/page/2, /my/page/2/edit etc.

if (arg(0) == 'my' && arg(1) == 'page') {...}

OR use the node ID

if (isset($vars['node']) && $vars['node']->nid == 23) {...}

OR apply to all nodes of a specific content type

if (isset($vars['node']) && $vars['node']->type == 'book') {...}

3) Add a script to a specific page by editing the page in Drupal, and setting the input format to "PHP code"

drupal_add_js('sites/all/scripts/tweaks.js');

4) Add a script to a block, which you can then setup to be included in a specific page or set of pages

drupal_add_js('sites/all/scripts/tweaks.js');

Also note that it is very similar to add stylesheets to pages. The function is drupal_get_css().


REFERENCES
http://drupal.org/node/304178
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
http://stackoverflow.com/questions/61735/include-css-or-javascript-file-for-specific-node-in-drupal-6