Question

I currently am using a simple javascript code to get a popup of data to appear when you click a hyperlink of a table.

However, I am unable to have the popup appear near the link whatsoever. Does anyone have any suggestions or better versions of scripts that can perform this action? jQuery is an option as well.
Thanks, here is my current javascript code:

function createPopup(x, y, divID) {
    var p = document.getElementById(divID);
    p.style.display="block";
    p.style.Left = x;
    p.style.Top = y;
    document.body.appendChild(divID);
}

And this is the css

.popup {
    background-color: #FFFFFF;
    border: thin solid #000000;
    color: black;
    display: none;
    font-size: 11px;
    height: auto;
    padding: 10px;
    position: absolute;
    width: 300px;
}

This is the link I use to popup the div.

<a id=buttonRed href="javascript:createPopup(\'-40px\', \'' . (-15 + ($resultCounter * 10)) . 'px\', \'Name' . $id . '\');">

As you can see the data is dynamic as I am pulling the data dynamically.

The popup works well other than the fact that the popup does not appear near the hyperlink.

Suggestions?

UPDATED CODE::

    <script>
    window.onload = init;
    function init() {
        if (window.Event) {
            document.captureEvents(Event.MOUSEMOVE);
        }
        document.onmousemove = getCursorXY;
    }

    function getCursorXY(e) {
        document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    }

    function createPopup(divID) {
        var p = document.getElementById(divID);
        p.style.display="block";
        p.style.Left = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);;
        p.style.Top = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);;
        document.body.appendChild(divID);
    }
</script>

This is what I have for the javascript but it is still not loading at the correct location.

Answer 1

If you can use JQuery instead then you can just grab the offset of the clicked link and add it to the css of the popup. Something like this:

$("#buttonRed").click(function (e) {
    var offset = $(this).offset();
    var topOffset = 35;
    $(".popup").css('left',offset.left);    
    $(".popup").css('top',offset.top - topOffset);
    $(".popup").css('display','block');
});

The topOffset variable determines how much higher it should be with regards to the clicked link. You can also add a leftOffset variable as well obviously. I have set up an example here: http://jsfiddle.net/mn6rg/