Removing the custom context menu from the entire page and apply to select box only

jason_kelly · 02-08-2013, 05:02 PM

Hello,

I need the help of an expert here on this forum:

How can the code below be modified such that, when the user right clicks into the drop down box, the right click context menu will appear as opposed to just right clicking anywhere in the web page?

Much thanks and appreciation for all your help and support.

Code:

<!DOCTYPE html>

<head>
    <script language="javascript" type="text/javascript">
        var MenuObj;
        var activeMenuItem = false;

        //Function to highlight menu item
        function highlightMenuItem() {
            this.className = 'MenuHighlighted';
        }

        function deHighlightMenuItem() {
            this.className = '';
        }

        //Function to show menu on click of menu item
        function showMenu(e) {
            var myMouseX = (e || event).clientX;
            var myMouseY = (e || event).clientY;
            MenuObj.style.left = myMouseX + 'px';
            MenuObj.style.top = myMouseY + 'px';
            MenuObj.style.display = 'block';
            return false;
        }

        //Function to hide menu on click of menu item
        function hideMenu(e) {
            if (document.all) e = event;
            if (e.button == 0) {
                MenuObj.style.display = 'none';
            }
        }

        function initMenu() {
            MenuObj = document.getElementById('Menu');
            MenuObj.style.display = 'block';
            var menuItems = MenuObj.getElementsByTagName('LI');
            for (var no = 0; no < menuItems.length; no++) {
                menuItems[no].onmouseover = highlightMenuItem;
                menuItems[no].onmouseout = deHighlightMenuItem;

                var aTag = menuItems[no].getElementsByTagName('A')[0];
                aTag.style.paddingLeft = '5px';
                aTag.style.width = (aTag.offsetWidth) + 'px';
                aTag.onclick = hideMenu;
            }
            MenuObj.style.display = 'none';
        }


    </script>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS
            margin-left: 0px;
        }
        #Menu
        {
            /* The menu container */
            border: 1px solid #202867; /* Border around the entire menu */
            background-color: #2E5B7B; /* White background color of the menu */
            margin: 0px;
            padding: 0px;
            width: 100px; /* Width of context menu */
            font-family: arial;
            font-size: 12px;
            background-repeat: repeat-y; /* Never change these two values */
            display: none;
            position: absolute;
        }
        #Menu a
        {
            /* Links in the context menu */
            color: #fff;
            text-decoration: none;
            line-height: 25px;
            vertical-align: middle;
            height: 28px; /* Don't change these 3 values */
            display: block;
            width: 100%;
            clear: both;
        }
        #Menu li
        {
            /* Each menu item */
            list-style-type: none;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
            clear: both;
        }
        #Menu li div
        {
            /* Dynamically created divs */
            cursor: pointer;
        }
        #Menu .MenuHighlighted
        {
            /* Highlighted context menu item */
            border: 1px solid #000;
            padding: 0px;
            background-color: red;
        }

        #Menu .itemTxt
        {
            float: left;
            width: 60px;
        }

    </style>
</head>
<body>
<select style="width: 250px;" id="box">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    <div>

                    <ul id="Menu">
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.gmail.com">Gmail</a></li>
                    </ul>

        <script type="text/javascript">
            initMenu();
            MenuObj.style.display = 'none';
            document.documentElement.oncontextmenu = showMenu;
            document.documentElement.onclick = hideMenu;
        </script>
    </div>
</body>
</html>

Old Pedant · 02-08-2013, 10:06 PM

Code:

        <script type="text/javascript">
            initMenu();
            MenuObj.style.display = 'none';
            var bx = document.getElementById("box");
            bx.onclick = function( evt )
                {
                    if ( evt == null ) evt = window.event;
                    if ( evt.which == 3 ) { showMenu(); }
                }
            document.documentElement.onclick = hideMenu;
        </script>

BUT...

But the right click only works *WHILE* the drop down is being displayed.

If you try to right click on the <select> before the <option>s are all being displayed, you get the normal page context menu.

Another way to do this would be to use document.documentElement.onclick and check for right click (same as I do there) and *also* check to see if the mouse is within the bounds of the <select>. But that's a pain in the patootie.

Hmmm...might be a tad easier if you surrounded the <select> with a <div> and looked for the mouse in the <div>??

jason_kelly · 02-11-2013, 05:33 PM

Thanks very much Old Pendant. Your code looks very promising, but when I tried it, it didn't work. No right click menu popped up anywhere.

The logic seems right, but I couldn't get it to fire. Any ideas?

Code:

<!DOCTYPE html>

<head>
    <script language="javascript" type="text/javascript">
        var MenuObj;
        var activeMenuItem = false;

        //Function to highlight menu item
        function highlightMenuItem() {
            this.className = 'MenuHighlighted';
        }

        function deHighlightMenuItem() {
            this.className = '';
        }

        //Function to show menu on click of menu item
        function showMenu(e) {
            var myMouseX = (e || event).clientX;
            var myMouseY = (e || event).clientY;
            MenuObj.style.left = myMouseX + 'px';
            MenuObj.style.top = myMouseY + 'px';
            MenuObj.style.display = 'block';
            return false;
        }

        //Function to hide menu on click of menu item
        function hideMenu(e) {
            if (document.all) e = event;
            if (e.button == 0) {
                MenuObj.style.display = 'none';
            }
        }

        function initMenu() {
            MenuObj = document.getElementById('Menu');
            MenuObj.style.display = 'block';
            var menuItems = MenuObj.getElementsByTagName('LI');
            for (var no = 0; no < menuItems.length; no++) {
                menuItems[no].onmouseover = highlightMenuItem;
                menuItems[no].onmouseout = deHighlightMenuItem;

                var aTag = menuItems[no].getElementsByTagName('A')[0];
                aTag.style.paddingLeft = '5px';
                aTag.style.width = (aTag.offsetWidth) + 'px';
                aTag.onclick = hideMenu;
            }
            MenuObj.style.display = 'none';
        }


    </script>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS
            margin-left: 0px;
        }
        #Menu
        {
            /* The menu container */
            border: 1px solid #202867; /* Border around the entire menu */
            background-color: #2E5B7B; /* White background color of the menu */
            margin: 0px;
            padding: 0px;
            width: 100px; /* Width of context menu */
            font-family: arial;
            font-size: 12px;
            background-repeat: repeat-y; /* Never change these two values */
            display: none;
            position: absolute;
        }
        #Menu a
        {
            /* Links in the context menu */
            color: #fff;
            text-decoration: none;
            line-height: 25px;
            vertical-align: middle;
            height: 28px; /* Don't change these 3 values */
            display: block;
            width: 100%;
            clear: both;
        }
        #Menu li
        {
            /* Each menu item */
            list-style-type: none;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
            clear: both;
        }
        #Menu li div
        {
            /* Dynamically created divs */
            cursor: pointer;
        }
        #Menu .MenuHighlighted
        {
            /* Highlighted context menu item */
            border: 1px solid #000;
            padding: 0px;
            background-color: red;
        }

        #Menu .itemTxt
        {
            float: left;
            width: 60px;
        }

    </style>
</head>
<body>
<select style="width: 250px;" id="box">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    <div>

                    <ul id="Menu">
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.gmail.com">Gmail</a></li>
                    </ul>
        <script type="text/javascript">
            initMenu();
            MenuObj.style.display = 'none';
            var bx = document.getElementById("box");
            bx.onclick = function( evt )
                {
                    if ( evt == null ) evt = window.event;
                    if ( evt.which == 3 ) { showMenu(); }
                }
            document.documentElement.onclick = hideMenu;
        </script>

    </div>
</body>
</html>

Old Pedant · 02-11-2013, 07:51 PM

Look here:

Code:

                  if ( evt.which == 3 ) { showMenu(); }

Then look here:

Code:

        function showMenu(e) {

Hmmm???

Now maybe try

Code:

                  if ( evt.which == 3 ) { showMenu(evt); }