Compass needle effect. Image stays fixed and rotates according to the position of the mouse

Question

I have found a working example of what I am trying to achieve. http://jsfiddle.net/JFZ7a/. I tried it insert this function into my web page, but I ran into many issues. I tried to take this back to the basics and I copied the HTML in a standard empty HTML document body. I then saved the file as test.html. I am doing my programming using Arachnophilia. I then load the page in IE and it shows me the image as it should. I then inserted the CSS script into the head, a straight one to one copy from jsFiddle. The CSS positioned the image as it should. I then inserted the javascript and that is when it showed me that I was doing something wrong. I have tweeked with this document and for the life of me it will not work. I have searched for hidden characters by pasting it first into notepad and then copying it out again. Could someone please look at this and advise me what I am missing, I would be most in your debt. Here is the code from my page:

<!doctype html>
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var img = $('.image');
if (img.length > 0) {
    var offset = img.offset();

function mouse(evt) {
   var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-o-transform', 'rotate(' + degree + 'deg)');
    img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}
$(document).mousemove(mouse);
}
     </script>  
     <style type="text/css">
     #apDiv1 {
position:absolute;
width:400px;
height:327px;
z-index:1;
left: 105px;
top: 98px;
}  
</style>  </head>

<body>
<div id="apDiv1">
 <img src="http://i347.photobucket.com/albums/p472/lcope24/corgi.jpg" class="image" />
 <br>(Not actual picture I'm trying to rotate, but it'll do for now)</div>
 </body>
  </html>

What version of IE are you using I think that the transfor CSS only works in IE9 and above: http://stackoverflow.com/questions/4865167/css3-transform-rotate-in-ie9 — Billy Moat, Feb 14 '13 at 17:02
I am using IE 9. I have same problem in Firefox. His example works, mine doesnt. — David La Rue, Feb 14 '13 at 17:06

score 2 · Accepted Answer · answered Feb 14 '13 at 16:59

2

You forgot $(document).ready( function(){ });. That fiddle already has $(window).load( function(){ }); which equivalent to $(document).ready( function(){ });

answered Feb 14 '13 at 16:59

Muhammad Talha Akbar

9,952
6
38
62

Thank you for this bit of information. I have added the function and still it is on strike. Could you please advise where I should add this in the script. I think I am having an understanding issue of the syntax placement. – David La Rue Feb 14 '13 at 17:23
I got it to work. I had a bracket not placed correctly. Thank you for your direction. – David La Rue Feb 14 '13 at 17:39
1

From now don't forget to add it ;) @DavidLaRue – Muhammad Talha Akbar Feb 15 '13 at 09:02

Compass needle effect. Image stays fixed and rotates according to the position of the mouse

1 Answers1