Question

I am attaching onmouseover event to an image. The mouseover event should create a div and add to the same position where image was placed. The div is used as a floating menu div. I can get the coordinates but for some reason when I add the div to the document I am not able to see the div anywhere.

    $(actionImage).mouseover(function(e) {

            // get the coordinates
            var x = e.pageX - this.offsetLeft; 
            var y = e.pageY - this.offsetTop;

            var menuDiv = createMenuDiv();

            $(menuDiv).css(
                {   
                    position:"absolute",
                    top: y + "px",
                    left:x + "px"
                }
            );


            $(document).append(menuDiv);


        });


function createMenuDiv() {

    var menuDiv = document.createElement("div");
    $(menuDiv).css("background-color", "yellow");
    $(menuDiv).css("z-index", "99");


    var b = document.createElement("input");

    $(menuDiv).append(b);

//  var addButtonLabel = document.createElement("label");
//  $(addButtonLabel).text("Add");
//  
//  var deleteButtonLabel = document.createElement("label");
//  $(deleteButtonLabel).text("Delete");

//  $(menuDiv).append(addButtonLabel);
//  $(menuDiv).append(deleteButtonLabel);

    return menuDiv; 

}

Answer 1

It should use $('body').append(menuDiv); instead of $(document).append(menuDiv);;
http://jsfiddle.net/ZPh3U/