14

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

ifthatdoesntdoit
  • 211
  • 1
  • 3
  • 8
  • 5
    Try this man- might help you - http://jsfiddle.net/22Feh/5/ cheerios! – Tats_innit Apr 02 '12 at 07:40
  • 1
    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! – ifthatdoesntdoit Apr 02 '12 at 07:51
  • 1
    Sure man no worries! take it easy! cheers! – Tats_innit Apr 02 '12 at 07:53
  • 1
    Tats_innit - Any idea how I can reset the proportions on window resize so the arrow and cursor stay aligned? Thanks again. – ifthatdoesntdoit Apr 02 '12 at 21:33
  • 1
    Hiya saweet man- http://stackoverflow.com/questions/3971841/how-do-i-resize-images-and-keep-the-proportion-aspect-ratio-with-jquery **OR** http://stackoverflow.com/questions/1682495/jquery-resize-to-aspect-ratio might help. – Tats_innit Apr 02 '12 at 21:55
  • 1
    update the var `offset` on resize like this: http://jsfiddle.net/HeFqh/12/ ... whoever solved the original question should submit an answer (even if it's the op) so it can be accepted – craniumonempty Apr 06 '12 at 01:34
  • 2
    @Tats_innit Hey post you comment as the answer so we can upvote you! – brenjt Apr 19 '12 at 17:28
  • 1
    Hiya @brenjt thank-you! :) I have posted my reply below bruv! have a nice one, cheers! – Tats_innit Apr 19 '12 at 19:25

1 Answers1

13

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

​
Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • 1
    Is there any way you can activate on press and deactivate on realease? – Mike Sep 03 '13 at 10:19
  • 2
    @mugur sure `:)` I am replying after loooong in SO: **demo for you** http://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! – Tats_innit Sep 03 '13 at 22:09
  • 1
    @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. – Wessam El Mahdy Mar 27 '16 at 16:08
  • 1
    biggggg like :) – AzizAhmad Sep 13 '16 at 18:26