The difference between using a self invoking function and document ready
<p>How come this doesn't work in loading header content...</p>

<pre><code>(function ($) {
    var mheaderwrapper = '&lt;div id="header"&gt;&lt;/div&gt;&lt;div class="header-menu"&gt;&lt;/div&gt;';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
})(jQuery);
</code></pre>

<p>but this does...</p>

<pre><code>  $.mheader = function() {
    var mheaderwrapper = '&lt;div id="header"&gt;&lt;/div&gt;&lt;div class="header-menu"&gt;&lt;/div&gt;';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
   }

$(function() {
  $.mheader();
});
</code></pre>
