1

I've looked around for any questions similar to this one, and haven't really found anything other than this.

I've tried using the code above, and have failed miserably on my own.

Here is a working Snippet

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);
}

//Code is directly from https://stackoverflow.com/questions/9972449/rotating-an-element-based-on-cursor-position-in-a-separate-element
#header {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: lighter;
  text-shadow: 0 0 3px #777;
  margin-top: 75px;
  text-align: center;
  min-width: 800px;
}
#main-circle {
  text-align: center;
  min-width: 800px;
  z-index: 2;
}
#needle {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: lighter;
  text-shadow: 0 0 3px #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<head>
  <h1 id="header">It works here, but not on my page!</h1>
</head>

<body>
  <div id="main-circle">
    <img src="@Resources/@img/UnitCircle.png">
  </div>
  <div id="needle">
    <img class="image" src="@Resources/@img/Needle.png">
    <p>These are direct links to the images on my PC, but they'll do for now...</p>
    <p>I'm using Dreamweaver CS6, and I have my code written as shown, and using jQuery.min 1.11.1</p>
  </div>
</body>

This works perfectly in the snippet! No issues at all!

BUT

The second I take this code and put it into Dreamweaver, that's when nothing is working. I know for a fact that jQuery is running on my version of the code (I made a test to see if jQuery would change some text, and it did). I've also taken the jQuery code from above and tried to place it in the HTML code, and that still didn't work :/

Is jQuery just not wanting to run this? Is HTML having trouble with this? Does the code flat out hate me?

Thanks in advance!

– Emir Čurtović

Community
  • 1
  • 1
Emir
  • 15
  • 6

1 Answers1

1

You are looking for .image class objects with jquery but none are found because the page's HTML body hasn't had a chance to load before your script runs. As a result, your if(img.length > 0) condition is never true as jquery is searching for an object that doesn't exist yet. Move your script to just before the closing </body> tag and it will run after the page's HTML is loaded. You'll get your rotating image after this adjustment is made.

ThisClark
  • 14,352
  • 10
  • 69
  • 100
  • Thank you for this, I would've spent days looking for an answer! Seems I just forgot about the way code loads... – Emir Nov 29 '15 at 03:41
  • Alternatively, you can register an event to fire after the page is ready using `$(document).ready(/* your function here */)` and in that case you could keep the logic in the header. However, it is regarded as best practice for high performing websites to move scripts to the bottom of the page so they may load after the HTML. Reference: [High Performance Web Sites: Rule 6 Move Scripts to the Bottom](https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html) – ThisClark Nov 29 '15 at 04:01