title: Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function
body: <p>I am building a web widget on jquery from the tutorial found <a href="http://alexmarandon.com/articles/web_widget_jquery/" rel="nofollow">here</a>.</p>
  
  <p>Basically, it checks if jQuery is loaded otherwise loads it. My widget merely shows a button and onClick shows a fancybox which loads an iframe.</p>
  
  <pre><code>(function() {
  
  // Localize jQuery variable
  var jQuery;
  
  /******** Load jQuery if not present *********/
  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
      var script_tag = document.createElement('script');
      script_tag.setAttribute("type","text/javascript");
      script_tag.setAttribute("src",
          "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
      if (script_tag.readyState) {
          script_tag.onreadystatechange = function () { // For old versions of IE
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
            }
          };
      } else { // Other browsers
          script_tag.onload = scriptLoadHandler;
      }
      // Try to find the head, otherwise default to the documentElement
      (document.getElementsByTagName("head")[0] ||      document.documentElement).appendChild(script_tag);
  } else {
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
      main();
  }
  
  /******** Called once jQuery has loaded ******/
  function scriptLoadHandler() {
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      jQuery = window.jQuery.noConflict(true);
      // Call our main function
      main(); 
  }
  
  /******** Our main function ********/
  function main() { 
      jQuery(document).ready(function($) { 
          // We can use jQuery 1.4.2 here
  
          /**** LOAD FANCYBOX ******/
          $.getScript("fancyboxURL");
  
          // I also tried loading fancybox here but that didnt work either
          $(".fancybox").fancybox();
      });
  }
  
  })(); // We call our anonymous function immediately
  </code></pre>
  
  <p>When loading the page I am getting the below errors.</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2
  Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js?v=1.0.7:19
  Uncaught TypeError: Property '$' of object [object Object] is not a function 
  </code></pre>
  
  <p><strong>Some attempts</strong></p>
  
  <p>In the file which the error <code>Property "$" ....</code> error is coming from, it currently reads</p>
  
  <pre><code>$(document).ready(function(){
    $(".fancybox").fancybox();
  });
  </code></pre>
  
  <p>From other threads I have found that I should try with </p>
  
  <pre><code>jQuery(function($){
    $(".fancybox").fancybox();
  });
  </code></pre>
  
  <p>but that only gave me <code>Property "jQuery" of object is not a function</code>.</p>
  
  <p>I know the code works fine because if I manually include <code>jQuery</code> in my html file it works.</p>
  
  <p>My HTML file below:-</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!-- IF I UNCOMMENT THE BELOW LINE IT WORKS! Add jQuery library --&gt;
  &lt;!-- &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;    &lt;/script&gt;--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- load widget --&gt;
  &lt;script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="widget-container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the markup generated when I Inspect Element on Chrome seems to indicate that jQuery is loaded.</p>