jQuery mousemove direction, get correct distance

Question

Howdey, i need to create a direction aware hovering effect, but stuck at the correct calculation. (Is it a calculation problem or rather a wrong markup?)

Here's what I've done so far:

The left and right arrows works as expected, but up and down fails. Any ideas what i'm doing wrong?

$("#circle").on('mousemove', function(e) {
    var elem = $(this),
        arrowT = $('.arrow.top'),
        arrowR = $('.arrow.right'),
        arrowB = $('.arrow.bottom'),
        arrowL = $('.arrow.left'),

        offset = elem.offset(),
        pageX = e.pageX - offset.left,
        pageY = e.pageY - offset.top,
        side = {
            top: pageY < (elem.height() / 2),
            left: pageX < (elem.width() / 2),
            bottom: pageY > (elem.height() / 2),
            right: pageX > (elem.width() / 2)
        };


    arrowT.css({
        top: side.top ? pageY - arrowT.outerHeight() : null
    });
    arrowR.css({
        right: side.right ? -(pageX - (elem.width() - arrowR.outerWidth())) : null
    });
    arrowB.css({
        bottom: side.bottom ? -(pageY - (elem.height() - arrowB.outerHeight())) : null
    });
    arrowL.css({
        left: side.left ? pageX - arrowL.outerWidth() : null
    });
});

The left and right arrows works as expected, but up and down fails... — yckart, Dec 28 '12 at 15:48
I also notice that if you move your mouse too fast, everything just fails altogether, though I don't know if there's any solution to that or not. — Dylan Cross, Dec 28 '12 at 15:54
Okay, i think the problem with fast "mousemoving" can be remedied by using settimeout, or similar... — yckart, Dec 28 '12 at 15:56
"Any ideas what i'm doing wrong?" No because you haven't explained what it's supposed to do — Popnoodles, Dec 28 '12 at 15:58
"The left and right arrows works as expected, but up and down fails... " — Dylan Cross, Dec 28 '12 at 16:00
@popnoodles I think that's obvious, right? However, I'll explain a bit for you: If the user moves the mouse out of the box, the arrows slides out (in observance of the mouse position...) Like the left and right arrows do ;) — yckart, Dec 28 '12 at 16:03
You can try setting some limits for the outerbounds of the top and bottom region? http://jsfiddle.net/t4EME/3/ — eleven11, Dec 28 '12 at 16:16
@eleven11 Nice... Another problem comes up, any ideas how to let the left and right links work again? — yckart, Dec 28 '12 at 16:21

score 1 · Answer 1 · answered Dec 28 '12 at 16:18

1

It's to do with the body height changing as the elements are moved. Stick a wrapper on it whose size doesn't change and they work

http://jsfiddle.net/t4EME/4/

#wrap
{
    height:1000px; overflow:hidden;
    padding-top:100px;
}


<div id="wrap">
    <div id="circle">
        <a href="#" class="arrow top"></a>
        <a href="#" class="arrow right"></a>
        <a href="#" class="arrow bottom"></a>
        <a href="#" class="arrow left"></a>
    </div>
</div>

answered Dec 28 '12 at 16:18

Popnoodles

28,090
2
45
53

`` etc. – yckart Dec 28 '12 at 16:21
In the code given none of those link to anywhere and nothing is bound to them. Impossible to even guess again. – Popnoodles Dec 28 '12 at 16:22
not now ;) by the way... if you hold your mousedown and move, then the `#wrap` will move too – yckart Dec 28 '12 at 16:23
And you think really to open another question for this problem is better, than to leave this question a bit open? – yckart Dec 28 '12 at 16:26

score 1 · Answer 2 · answered Dec 28 '12 at 16:46

I hope this helps. That was because the element size changes on moving mouse over it.

http://jsfiddle.net/t4EME/5/

topc = $('#circle').position().top;
widk = $('#circle').height();
$("#circle").mousemove( function(e) {
    var elem = $(this),
        arrowT = $('.arrow.top'),
        arrowR = $('.arrow.right'),
        arrowB = $('.arrow.bottom'),
        arrowL = $('.arrow.left'),

        offset = elem.offset(),
        pageX = e.pageX - offset.left,
        pageY = e.pageY - offset.top,
        side = {
            top: pageY < (elem.height() / 2),
            left: pageX < (elem.width() / 2),
            bottom: pageY > (elem.height() / 2),
            right: pageX > (elem.width() / 2)
        };   
if(e.pageY>topc && e.pageY<topc+widk) {
$('.top').css({
    top: side.top ? pageY - arrowT.outerHeight()  : null
});
$('.right').css({
    right: side.right ? -(pageX - (elem.outerWidth() - arrowR.outerWidth())) : null
});
$('.bottom').css({
    bottom: side.bottom ? -(pageY - (elem.outerHeight() - arrowB.outerHeight())) : null
});
$('.left').css({
    left: side.left ? pageX - arrowL.outerWidth() : null
});
}
});

I know the question is already answered, but still I posted this one. I solved it much earlier but didn't know how to post code on stackoverflow. :P — kushpf, Dec 28 '12 at 16:47
Hee, no prob ;) Your solution looks much clearer, thanks a lot! — yckart, Dec 28 '12 at 16:50

score 0 · Accepted Answer · answered Dec 28 '12 at 16:36

0

http://jsfiddle.net/t4EME/7/

Here is a working version with links

        top: pageY < (elem.height() / 2) && pageY  > 0 ,
        left: pageX < (elem.width() / 2) && pageX  > 0,
        bottom: pageY > (elem.height() / 2)  && pageY  < elem.height(),
        right: pageX > (elem.width() / 2) && pageX  < elem.width()

Changed to absolute positioning as the margin was hiding the links

answered Dec 28 '12 at 16:36

eleven11

362
2
3
12

Yeah, nice... You're great! :-* – yckart Dec 28 '12 at 16:37

jQuery mousemove direction, get correct distance

3 Answers3