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

Dev Shed Forums Sponsor:

February 8th, 2013, 11:00 AM

Jason_Kelly

Registered User

Join Date: Nov 2012

Posts: 23

Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0

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

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>

February 8th, 2013, 12:13 PM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,854

Time spent in forums: 1 Month 2 Weeks 1 Day 15 h 27 m 29 sec
Reputation Power: 813

Code:

document.getElementById('box').oncontextmenu = showMenu;

However, you should really, really consider dropping this whole context menu stuff. Messing with core functionalities of the browser sucks, because it's irritating and massively reduces usability. For example, I often use the context menu for Google searches. If a site doesn't let me do it, I might just close it and never come back.

I'm sure there's a more intelligent way of doing this.

__________________
The 6 worst sins of security • The mystery of errors and exceptions

February 8th, 2013, 12:43 PM