Greasy Fork

Help me please to complete a script, just a small thing

so i finally find out how to work with GM_xmlhttpRequest, made when i hover over a torrent link to show the cover photo from it, but it's showing in the upper left corner, and when i hover over image and hover out from image it's dissapearing, but i want that image to be above the mosue cursor, and when i hover out the link the image to dissapear

// ==UserScript==
// @name         cover for torrent
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       drakualboy
// @include      http://www.mysite.com/*
// @require      http://code.jquery.com/jquery-2.1.3.min.js
// @grant        GM_xmlhttpRequest
// ==/UserScript==
requesting = false;
currentlyHovered = null;
$('[href*=\'/details.php?id=\']').on('mouseenter', function (event) {
    var href = $(this).attr('href');
    var regex = /\/details\.php\?id\=(.*)/;
    var m = regex.exec(href);
    currentlyHovered = $(this)[0];
    GM_log(href);//to see if it's right
    setTimeout(function () {
        if (!requesting) {
            requesting = true;
            GM_xmlhttpRequest({
                method: 'GET',
                url: m[0].toString(),
                onload: function (r) {
                    var dom = $.parseHTML(r.responseText);
                    var poster = r.responseText.match(/Descriere.*<img src="(.*)"/);
                    var imageBox = $('<div><div id="poster_box"><img src="'+poster[1]+'" style="width:300px;height:auto"</div>');
                    var ratingBox = $('<div/>', {
                        id: 'poster-popup'
                    }).append(imageBox).css({
                        'position': 'absolute',
                        'left': currentlyHovered.offsetLeft + 'px',
                        'top': currentlyHovered.offsetTop + 'px',
                        'font-size': '18px',
                        'padding': '14px',
                        'color': 'black',
                        'z-index': 100,
                        'box-shadow': '0 0 12px rgba(160,120,50,.35)'
                    })
                    .appendTo($('body')).mouseleave(function () {
                        $('#poster-popup').remove();
                    });
                    requesting = false;
                }
            });
        }
    }, 1000);
});

i have searched some hints, but nothing that can help me, thank you.

Instead of currentlyHovered = $(this)[0];:

    currentOffset = $(this).offset();
.......................
                        'left': currentOffset.left + 'px',
                        'top': currentOffset.top + 'px',

P.S. for multiline code use <pre></pre> tags or switch to markdown formatting ``(see also [this script](/scripts/6779)). BTW you may like [MPIV script](/scripts/404) with a custom rule for your site (those are mostly very simple, e.g.{"r":"take.ms/[^/]+","q":"#currentItem"}`).

thank you wOxxOm, i knew it i missed something! yeah, i'm using MPIV too (have tried that variant too, it's working), but i want that images to be resized

this ``` , thought i need one apostrophe then the code then another one apostrophe, lol

one more thing please, if i by mistake hover over the link then the request begins, how can i add a timer or a delay, if the mouse cursor stays 2 seconds on link then do the request?

Change 1000 to 2000 in setTimeout, save the returned timerId, add a mouseleave handler to the link that cancels the timer via clearTimeout(timerId).

BTW it's possible to resize the popup in MPIV's setup by using custom css rules (@-moz-document wrapper isn't needed)

thank you! added

.on("mouseleave", function(){
    clearTimeout(timer)

this works very good, yes, i hae tried MPIV, but i want to add description of torrent above the image)