Issue
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ć
Solution
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.
Answered By - ThisClark Answer Checked By - Terry (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.