Where do I add my own javascript or jquery so that it executes after the DOM is ready in Drupal 7? The site I'm working on is here.  The theme is modified Bartik theme.

Here is the code I ended up with.  The actual script inside the function works in Chrome console.

//Scripts that are required to run after DOM is ready
jQuery(document).ready(function)() {

    // Make the parent menu item of the active sub-menu item also active.
    jQuery('#block-system-main-menu li.active-trail &gt; a').addClass('active');
}


I read a few articles and eventually ended up making a new file here:
/sites/all/themes/brainfx/js/brainfx.js

And I call this file from the theme's template.php file inside the brainfx_preprocess_html function with this code:

drupal_add_js('sites/all/themes/brainfx/js/brainfx.js');


You'll see it shows up in the head tag on the site.  But its not working.  What do I need to do to correct this?
There is a syntax error in above code. Change the js file contents to below. It will work as you expected !

jQuery(document).ready(function () {

    // Make the parent menu item of the active sub-menu item also active.
    jQuery('#block-system-main-menu li.active-trail &gt; a').addClass('active');
});