CODEWITHSUNDEEP
jquerycssposition
user217339
user217339

Reputation: 169

Div element won't reposition in JQuery

I'm trying to reposition a div element in my code using JQuery, since the element keeps appearing at the bottom left corner of the page. Instead I want the element to appear at the mouses location. Here is my code:

var count=0;
$( '.DropsLineNotes' ).each(function(){
    count++;

    var hoverText = $(this).find( '.notesText' ).html();
    //creating overlay
    $overlay = $( '<div>' ).attr('id', 'overlay'+count)
                .appendTo( 'body' )
                .show()
                .html(hoverText);

    console.log(hoverText)

    var $image = $( '<img>' ).attr({
        src: 'http://vignette2.wikia.nocookie.net/runescapefanfiction/images/d/d5/DropsLine_info.png/revision/latest?cb=20150822080442',
        alt: 'Info'
    }),
        $link = $( '<span>' ).append( $image )
        .on("mouseenter", function(){
            //get mouse co-ords
            var currentMousePos = { x: -1, y: -1 };
            $(document).mousemove(function(event) {
                currentMousePos.x = event.pageX;
                currentMousePos.y = event.pageY;
            });

            $('#overlay'+count).css({'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);
            console.log("overlay should appear")
        })
        .on("mouseleave", function() {
            console.log("fading out");
            $('#overlay'+count).fadeOut(10000);
        });

    $( this ).append( $link );
})

I'm sure that the line below would position the div element, but it does nothing. I know that the selector chooses the correct element, since the background colour of the element turns yellow as requested.

$('#overlay'+count).css({'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);

Upvotes: 0

Views: 55

Answers (1)

K K
K K

Reputation: 18099

You need to use position:absolute or position:fixed to position it by top or left values. Make sure the css has position value in css.

Or you can do it by jquery too:

$('#overlay'+count).css({'position':'absolute', 'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);

Upvotes: 1

Related Questions