Creating a context menu - AngularFixing

Issue

Been closely reading this: How to add a custom right-click menu to a webpage?

And so I have 2 HTML files, and 1 JS script. I don’t use JQuery at all.

popup.html

<!DOCTYPE html>
    <head>
        <title id="title">Datajuggler</title>
    </head>
    <body>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

var xhr = new XMLHttpRequest();
xhr.open("GET", "contextmenu.html");
xhr.send();

document.addEventListener("contextmenu", function(e) {
    // how do I draw the context menu here?
    e.preventDefault();
});

contextmenu.html

<div id="menu">
    <ul>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>
</div>

So it’s very simple. I pull the context menu HTML from contextmenu.html, and I want this div to display whenever I right-click with the mouse (contextmenu event listener). But how do I show this div in place of the default context menu?

Thanks.

Solution

Fast implemented and tested this:

popup.html:

<!DOCTYPE html>
    <head>
        <title id="title">Datajuggler</title>
        <style>
            html{
              height: 100%;
            }
            body {
              min-height: 100%;
              position: relative;
            }
            #menu{
              position: absolute;   
              border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <script src="popup.js"></script>
    </body>
</html>

Notes:

if body is empty => height: 0px (so your click event won’t be detected)
include your script just before the </body> end tag
position your menu absolute

contextmenu.html:

<div id="menu" style="display: none">
    <ul>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>
</div>

Notes:

hide menu (set display:none)

popup.js:

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){

        // append the menu to `body`
        document.body.innerHTML += xhr.responseText;

        var menu = document.getElementById('menu');

        // overwrite the right click event
        document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();         
            // show the menu        
            menu.style.display = 'block';
            // set the left and top position based on mouse event coordonates
            menu.style.left = e.x + 'px';
            menu.style.top = e.y + 'px';        
        });

        // close the menu on document click
        // TODO verify if the click is in the menu boundaries
        document.addEventListener("click", function(e){
            menu.style.display = 'none';
        });
    }
}

// make xhr `async` request => third param `true`
xhr.open("GET", "contextmenu.html", true);
xhr.send();

Notes:

open web browser console (F12) => go to javascript console and see if there are any errors
test the application on a http protocol (web server), else your xhr won’t work because of the
cross origin

Answered By – Cristi Pufu

Answer Checked By – Cary Denson (AngularFixing Admin)

Issue

Solution

Leave a Reply Cancel reply