2

I'm trying to get the example code in this SO question running on my system

getting the X/Y coordinates of a mouse click on an image with jQuery

It displays the position of the mouse on a click inside a div. It works fine on Firefox and Safari but doesn't update on Chrome and I'm wondering if I've done something wrong. I'm using Google Chrome Version 23.0.1271.101

Here's the code I'm using.

<html>

<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
<p>Click to see the position!</p>
<div class="box" style="width: 200px; height: 200px; background: #F00">&nbsp;</div>
<p id="position">Position will go here</p>
<script>
$(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));
    });
});
</script>

</body>
</html>

Update: Here is the error I see on Chrome's JavaScript console Uncaught ReferenceError: $ is not defined but I'm not sure what to make of it.

enter image description here

Update2:

I cleared the browser cache and reloaded the page while having the JavaScript console open and noticed an error I had not seen before

[blocked] The page at https://<mywebsite>/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
Uncaught ReferenceError: $ is not defined

So, I downloaded jquery.min.js and placed it in the same directory as index.html and changed the loading of the script to

<script src="./jquery.min.js" type="text/javascript"></script>

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 and I had the JavaScript console open.

Community
  • 1
  • 1
amdn
  • 11,314
  • 33
  • 45

1 Answers1

4

The error you are getting is that jQuery is not loaded when executing your script. So therefore $ is not defined when you try to use it.

Also, your screenshot is not showing the same markup as your example.

Cyrus
  • 344
  • 1
  • 8
  • yes I had made some changes trying to fix the problem after posting the markup and before taking the screenshot... good observation... those changes (moving the script into the head) didn't make a difference. – amdn Mar 10 '13 at 23:34
  • +1 for the observation that `$ is not defined when you try to use it`, that was in fact the problem, the root cause though was that it had not downloaded jQuery for some security related reason (which I don't understand). – amdn Mar 10 '13 at 23:37
  • @amdn The error you see is generated because you're trying to load from a unsecure HTTP protocol and inject into a page on secure HTTPS protocol. If you remove the protocol from the script tag, the browser shouldn't complain anymore. – Ragnarokkr Mar 10 '13 at 23:40
  • @Ragnarokkr I think you are right, however, if I remove HTTPS from the url it gets inserted anyways on all three browsers, yet Chrome is the only one that complains about it the url for jquery being insecure. – amdn Mar 10 '13 at 23:58
  • @Cyrus if you remove the suggestion `Move your script tag to the end of the body tag` - which didn't fix the problem - I'll chose your answer. – amdn Mar 11 '13 at 13:17