Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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>??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (02-11-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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); }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •