How to customize right click option in javascript?

Question

I have a textbox with content. I just need like,when I select the text and right click, the appropriate ( reference) list should be displayed as pop up based on the selected text.

For example. In the article, there would be "This is referred by (williams, 2012)". If I select Williams and right click , the reference list with the name williams should be listed as popup.

javascript code:

if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }

HTML:

<body>
Lorem ipsum...
</body>

This code is from jsfiddle

Right now, am just with this code only I don't have any idea how to build it to my requirement.When right click with the selected text how to pop up the appropriate list. Pls help!

http://blog.teamtreehouse.com/building-html5-context-menus http://livepipe.net/control/contextmenu — Anik Islam Abhi
– Anik Islam Abhi, Commented Nov 22, 2014 at 8:15
Just create/show an element containig the list. You can calculate position of that element using some properties of MouseEvent. — Teemu
– Teemu, Commented Nov 22, 2014 at 8:20
It's annoying to mess with the context menu, consider using hover or a hot spot to pop–up the information instead. — RobG
– RobG, Commented Nov 22, 2014 at 8:51
just I need some start-up program for my requirement as am beginner in javascript,So can you pls let me know any relevant code? — vidhya
– vidhya, Commented Nov 22, 2014 at 8:59

Gonsalo Sousa · Accepted Answer · 2014-11-22 13:54:58Z

You should do something like this.

function customContextAction(e){
    var	posX = e.x || e.clientX || e.layerX || e.offsetX || e.pageX,	//gets the event position X
    	posY=e.y || e.clientY || e.layerY || e.offsetY || e.pageY;		//gets the event position Y
    var selectedText=window.getSelection().toString() || "";
    var ctx = document.getElementById('context');
    if (ctx.className.toLowerCase().indexOf("hidden") >= 0){
    	ctx.className="";
    	ctx.setAttribute('style', 'top:'+posY+"px;"+"left:"+posX+"px");
    if(selectedText!="")    ctx.children[0].innerHTML=selectedText;
    }
    else{
    	ctx.className="hidden";
    	customContextAction(e);
    }
}

if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
        customContextAction(e);
        e.preventDefault();
    }, false);
} else {
    document.attachEvent('oncontextmenu', function(e){
        customContextAction(e);
        window.event.returnValue = false;
    });
}

#context {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: #cacaca;
}
#context.hidden {
  display: none;
}
#context .inner {}

Select something and right click anywhere!
<div id="context" class="hidden">
  <div class="inner">
    CONTEXT CONTENT
  </div>
</div>

Collectives™ on Stack Overflow

How to customize right click option in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related