title: "Uncaught ReferenceError: $ is not defined" error on Google Chrome (but works on Firefox and Safari)
body: <p>I'm trying to get the example code in this SO question running on my system</p>
  
  <p><a href="https://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery">getting the X/Y coordinates of a mouse click on an image with jQuery</a></p>
  
  <p>It displays the position of the mouse on a click inside a <code>div</code>.  It works fine on <code>Firefox</code> and <code>Safari</code> but doesn't update on <code>Chrome</code> and I'm wondering if I've done something wrong.
  I'm using Google Chrome Version 23.0.1271.101</p>
  
  <p>Here's the code I'm using.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt;Click to see the position!&lt;/p&gt;
  &lt;div class="box" style="width: 200px; height: 200px; background: #F00"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;p id="position"&gt;Position will go here&lt;/p&gt;
  &lt;script&gt;
  $(document).ready(function() {
      $('.box').click(function(e) {
          var offset = $(this).offset();
          $('#position').html(Math.round(e.clientX - offset.left) + ", " + Math.round(e.clientY - offset.top));
      });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update:</strong>
  Here is the error I see on Chrome's JavaScript console <code>Uncaught ReferenceError: $ is not defined</code> but I'm not sure what to make of it.</p>
  
  <p><img src="https://i.stack.imgur.com/vEYgd.png" alt="enter image description here"></p>
  
  <p><strong>Update2:</strong></p>
  
  <p>I cleared the browser cache and reloaded the page while having the JavaScript console open and noticed an error I had not seen before</p>
  
  <pre><code>[blocked] The page at https://&lt;mywebsite&gt;/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
  Uncaught ReferenceError: $ is not defined 
  </code></pre>
  
  <p>So, I downloaded <code>jquery.min.js</code> and placed it in the same directory as <code>index.html</code> and changed the loading of the script to</p>
  
  <pre><code>&lt;script src="./jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It now works on all three browsers.... so for some reason Chrome was the only one that complained about the url for jquery.min.js being insecure.  To compound the problem, it didn't give me that error when I went into the JavaScript console, and I didn't see it until I had cleared the cache <em>and</em> I had the JavaScript console open.</p>