I am trying to create a webpage where users can insert a pin (like google map) in between the text using context menu.

My problem is that i do not know how to insert the pin at the exact position. Using the DOM I can arrive only to the nearest DIV (by using this) but a DIV contains a lot of text and the PIN has to be positioned next to the text.

I can obtain the position of the mouse click using pageX and pageY but dont know how to insert an element at that position. I tried in JQuery: insertAfter, prepend, append but not getting the desired result.

Any idea how to solve this problem.

regards, choesang tenzin

 $("#Content").rightClick( function(e) {

    $("<div class='pin'/>").insertAfter(this); 
 });    

I am trying to create a webpage where users can insert a pin (like google map) in between the text using context menu.

My problem is that i do not know how to insert the pin at the exact position. Using the DOM I can arrive only to the nearest DIV (by using this) but a DIV contains a lot of text and the PIN has to be positioned next to the text.

I can obtain the position of the mouse click using pageX and pageY but dont know how to insert an element at that position. I tried in JQuery: insertAfter, prepend, append but not getting the desired result.

Any idea how to solve this problem.

regards, choesang tenzin

 $("#Content").rightClick( function(e) {

    $("<div class='pin'/>").insertAfter(this); 
 });    

• javascript
• jquery
• events

Share Improve this question Follow asked Mar 5, 2009 at 14:23 ChoesangChoesang 1,22511 gold badge1414 silver badges2424 bronze badges 1

• Shouldn't $("<div class='pin'/>").insertAfter(this); be $("div.pin").insertAfter(this); ? – Ryann Graham Commented Mar 5, 2009 at 14:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

$("#Content").rightClick( function(e) {
        var myTop = ...;
        var myRight= ...;
        $("<div class='pin' style='position:absolute; top: ' + myTop +'px; right: ' + myRight + 'px;/>").insertAfter(this); 
 });

sorry, i don't remember how to get x and y from the e parameter. Also, you will need to convert x,y of mouse click to x,y relative to #content element.

Thanks alot for all your ideas. I have e up with another way to do it. I am using the "RANGE" to insert directly into the clicked zone (div) and not after or before it and adding z-indexes. The positive points with this is:

1. It is really into the text and not as a layer

2. texts flow around the pin (text makes space for the pin)

   $("div").click( function(e) {
       //the following works only for FF at the moment          
       var range = window.getSelection().getRangeAt(0);
       var pin = document.createElement('img');
       pin.setAttribute('src','pin_org.png');    
       pin.setAttribute('class','pin');                                                                    
       range.insertNode(pin);
   });           
   
   $("img.pin").live( 'mouseover', function () { 
   alert("hovered!!"); 
   

Set the style position:relaitve; on the containing div, so that it bees a layer. That way it works as origin for the absolutely positioned elements inside it.