CODEWITHSUNDEEP
javascriptjquery
Sasha
Sasha

Reputation: 8705

Jquery 1.9.1 - move created element based on cursor position when hovering

I need to move image that is being created when I hover on thumb while moving mouse over that thumb. How can I do this? I have function like this (it is working):

var body = $('body'),
slike = $('.oglas_slika');


function image_hover(url){
    var image = '<img class="oglas_slika_velika"  src="' + url  +'">';
    return image;
}

slike.hover(
    function(e){
        body.append( image_hover( $(this).data('url') ) );
        $(".oglas_slika_velika")
            .css("top", (e.pageY) + "px")
            .css("left", (e.pageX) + "px")
            .fadeIn("slow");
    },
    function(){
        body.find('.oglas_slika_velika').remove();
    }
);

I tried this one but I am getting flickering (image is appearing at random places on the page while moving mouse ):

var body = $('body'),
slike = $('.oglas_slika');

function image_hover(url){
    var image = '<img class="oglas_slika_velika"  src="' + url  +'">';
    return image;
}

slike.hover(
    function(){
        body.append( image_hover( $(this).data('url') ) );
        $(this).on('mousemove', function(e){
            $(".oglas_slika_velika")
            .css("top", (e.pageY) + "px")
            .css("left", (e.pageX) + "px")
            .fadeIn("slow");
            return false;
        });
    },
    function(){
        body.find('.oglas_slika_velika').remove();
    }
);

Upvotes: 3

Views: 842

Answers (2)

Travis J
Travis J

Reputation: 82287

jsFiddle Demo

The flickering is a result of the element created causing the mouseout section of hover to be called. This is removing the image element, and once the element is removed, the mouseover section of hover is called, and the image is recreated, along with the call to fadeIn. The animation queue is overloaded in the process and eventually throws an error (Uncaught RangeError: Maximum call stack size exceeded) which will cause extremely inconsistent results.

The remedy this, you should keep track of where the mouseover area is with an object:

var sp = {};
sp.top = slike.position().top;
sp.left = slike.position().left;
sp.right = sp.left + slike.width();
sp.bottom = sp.top + slike.height();

and also keep track of the image sizes:

var w;
var h;

which could be filled once appended

body.append( image_hover( ) );
w = $(".oglas_slika_velika").width();
h = $(".oglas_slika_velika").height();

Next would be to ensure that the mouse cursor was truly mousing out of the hover region by checking the collision between the created image and the cursor

if( e.pageY + h > sp.bottom || e.pageY - h < sp.top){
 body.find('.oglas_slika_velika').remove();
}else{
 if( e.pageX + w > sp.right || e.pageX - w < sp.left ){
  body.find('.oglas_slika_velika').remove();
 }
}

Although this takes slightly more work, it is also a lot more precise and less prone to error. It will allow the image to directly track the mouse instead of being pushed to an offset.

If it is not important to have the image directly at the place of the mouse, then @Luigi De Rosa's answer will work very well and require less effort.

Upvotes: 3

Luigi De Rosa
Luigi De Rosa

Reputation: 720

Try to add 10px of "margin" in this way

.css("top", (e.pageY)+10 + "px")
.css("left", (e.pageX)+10 + "px")

The problem is that if you go with the mouse to bottom right, your mouse goes on .oglas_slika_velika and it trigger out .oglas_slika (so the remove function)

I hope that it makes a sense for you

jsFiddle here: http://jsfiddle.net/bzGTQ/

Upvotes: 0

Related Questions