Rotating an element based on cursor position in a separate element

Question

I've been Working on a breadcrumbs directory feature recently that requires an element to rotate based on the cursor x position within the breadcrumbs container element. Long story short, I need the arrow in the lower '#pointer-box' to always point at the cursor when it's within the '#target-box'.

I'm looking for two separate formulas that will a.) set the initial left-most position of the arrow when the '#target-box' cursor x position is at 0, and b.) keep the arrow's left-most and right-most rotation properties proportional at any browser width or on window resize.

Any help is greatly appreciated.

Here's the live demo. http://jsfiddle.net/HeFqh/

Thank you

Update

With help from Tats_innit I was able to get the arrow pointing at the cursor when it's inside the '#target-box'. Now I have two specific issues to solve.

a.) When the window is resized the arrow and cursor are no longer aligned.

b.) The 'var y' on 'mousemove' is not deducting the top offset

var y = e.pageY - this.offsetTop

The updated live demo. http://jsfiddle.net/HeFqh/11/

Thank you

Solution

Hiya from @brenjt's :) response above pasting this as answer post & here is a sample demo http://jsfiddle.net/JqBZb/

Thanks and further helpful link here: jQuery resize to aspect ratio & here How to resize images proportionally / keeping the aspect ratio?

Please let me know if I missed anything! Hope this helps! have a nice one, Cheers!

jquery code

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

​

Comments

[Tats_innit]

Try this man- might help you - jsfiddle.net/22Feh/5 cheerios!

[ifthatdoesntdoit]

Thanks for the response. Any chance you can take a stab at the live demo? I'll give it a go as soon as I can tomorrow. Cheerios!

[Tats_innit]

Sure man no worries! take it easy! cheers!

[ifthatdoesntdoit]

Tats_innit - Any idea how I can reset the proportions on window resize so the arrow and cursor stay aligned? Thanks again.

[Tats_innit]

Hiya saweet man- stackoverflow.com/questions/3971841/… OR stackoverflow.com/questions/1682495/… might help.

[craniumonempty]

update the var offset on resize like this: jsfiddle.net/HeFqh/12 ... whoever solved the original question should submit an answer (even if it's the op) so it can be accepted

[brenjt]

@Tats_innit Hey post you comment as the answer so we can upvote you!

[Tats_innit]

Hiya @brenjt thank-you! :) I have posted my reply below bruv! have a nice one, cheers!

[Mike]

Is there any way you can activate on press and deactivate on realease?

[Tats_innit]

@mugur sure :) I am replying after loooong in SO: demo for you jsfiddle.net/dPDF3/1 have fun! how it will work click on the needle and then rotate your mouse/mice; now click again and it will unbind the move and so forth!

[Wessam El Mahdy]

@Tats_innit if you are using JQuery prior to version 1.7.2 you could then just use img.css('transform', 'rotate('+degree+'deg)'); without any prefixes as new versions of JQuery add the prefixes automatically, hope this helps someone.

[AzizAhmad]

biggggg like :)