#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep 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>
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,938
    Rep Power
    1045
    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 ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Thanks again for this jaques.

    My intention with this is to do an HTA Application and will need some additional functionality.

    Thanks a bunch

    Jay

IMN logo majestic logo threadwatch logo seochat tools logo