CodingForums.com - View Single Post - Removing the custom context menu from the entire page and apply to select box only

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>