SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [RESOLVED]oncontext menu for rightclick ?

    I'm trying to have an objet be visible only when right mouse button is held down and of course I have problems with oncontextmenu ...
    is there a way to acheive this ?
    PHP Code:
    <script type="text/javascript">
    var 
    rghtclick=false;

    function 
    showpop(){rghtclick=true;
                       
    document.getElementById('popme').style.display='block';
                       return 
    false;
                       }
    function 
    hidepop() { document.getElementById('popme').style.display=rghtclick?'none':'block';
                             
    rghtclick=false;
                             }    
                      
    </script>
    </head>

    <body oncontextmenu="showpop()" onmouseup="hidepop()">
    <div id="popme" style="display:none;position:absolute;height:100px;width:100px;background-color:red;top:200px;left:200px">&nbsp;</div> 
    Last edited by SpaceFrog; Dec 14, 2005 at 07:40.

  2. #2
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your hidepop is wrong, plus you dont need the rghtclick stuff...:
    Code:
    function showpop(){
                       document.getElementById('popme').style.display='block';
                       return false;
                       }
    function hidepop() { document.getElementById('popme').style.display='none';
                             }
    as a sidenote:
    rightclick?'none':'block'
    means
    if (rightclick) 'none' else 'block'....
    so if you use it, use it the other way round

    Niko
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well it's exactly what I want, as I set rghtclick to true on the oncontextmenu so I want to hide mepop if rghtclick is true

    my only problem is the way oncontextmenu works, displaying context menu until one of it's items is clicked ...

    both of my functions are correct

  4. #4
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry.. yes youre right...
    Code:
    <script type="text/javascript">
    var rghtclick=false;
    
    function showpop(){
                       rghtclick=!rghtclick;
                       if (rghtclick)
                       document.getElementById('popme').style.display='block';
                       else
                         hidepop();
                       return false;
                       }
    function hidepop() { document.getElementById('popme').style.display='none';
                             rghtclick=false;
                             }    
                      
    </script>
    </head>
    
    <body oncontextmenu="showpop()" >
    <div id="popme" style="display:none;position:absolute;height:100px;width:100px;background-color:red;top:200px;left:200px" onclick="hidepop()">&nbsp;</div>
    I guess this is what you want... you dont want a "global" onup function since you only want to hide the context menu when a link on the menu is clicked

    I also added it, so when you press the right mousebutton a second time the popup disappears.
    still the if in hidepop is not needed.. if its hidden it stays hidden
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  5. #5
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank fo your interrest, but I'm not quite sure you grabbed my concern ...
    let me try and get down further in my problem:

    what I am trying to do is having thos red little bow appear on on rightmousedow and disappear when the right mouse button is released just like this:

    PHP Code:
    <script type="text/javascript">
    var 
    rghtclick=false;

    function 
    showpop(){ document.getElementById('popme').style.display='block'
                                               
    }
    function 
    hidepop() { document.getElementById('popme').style.display='none';
                 
                             }    
                      
    </script>
    </head>

    <body onmouseup="hidepop()" onmousedown="showpop()" oncontextmenu="return false">
    <div id="popme" style="display:none;position:absolute;height:100px;width:100px;background-color:red;top:200px;left:200px" >&nbsp;</div>
    </body>
    </html> 
    but this code work great with left mouse button
    I want it to work the same but only with right mouse button

  6. #6
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    getting closer ...

    but main problem is order of events as onmousedown trigger before oncontextmenu ...
    PHP Code:
    <script type="text/javascript">
    var 
    rghtclick=false;

    function 
    showpop(){ setTimeout(function(){document.getElementById('popme').style.display=rghtclick?'block':'none';
                                                         
    rghtclick=false;},10)
                            ;
                            
                                               }
    function 
    hidepop() { document.getElementById('popme').style.display='none';
                 
                             }    
                      
    </script>
    </head>

    <body onmouseup="hidepop()" onmousedown="showpop()" oncontextmenu="rghtclick=true;return false;">
    <div id="popme" style="display:none;position:absolute;height:100px;width:100px;background-color:red;top:200px;left:200px" >&nbsp;</div>
    </body>
    </html> 

  7. #7
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont think this is possible with the right mousebutton, since you dont get an event if the right mouse button is released.. onmouseup only triggers with the left button. oncontextmenu=onrightmousedown but afaik there is no onrightmouseup event...

    But you can use the event object itself... like:
    Code:
    <script>
    function mousemove(e)
    {
      if (event && !e) e = event;
      if (e.button == 2)
       showpop();
      else
       hidepop();
    }
    
    document.onmousemove=mousemove;
    </script>
    <body>
    ...
    didnt test it, but it should work...
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  8. #8
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    herrr ... onmouseup also triggers with right button ...

    and your coe doesn't work ...
    and even if it did it would be IE only ?

  9. #9
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested this with firefox and it works:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var rghtclick=false;
    
    function showpop() { 
    	document.getElementById('popme').style.display="block";
    }
    
    function hidepop() {
    	 document.getElementById('popme').style.display="none";
    }    
    
    function mousemove(e)
    {
      if (!e) e = event;
    
      if (e.button == 2)
       showpop();
      else
       hidepop();
    }
    
    document.onmousedown=mousemove;
    document.onmouseup=hidepop;
                      
    </script>
    </head>
    
    <body oncontextmenu="return false">
    <div id="popme" style="display:none;position:absolute;height:100px;width:100px;background-color:red;top:200px;left:200px" >&nbsp;</div>
    </body>
    </html>
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  10. #10
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that a bunch mate... works like a charm !

  11. #11
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [resolved]

    actually
    PHP Code:
    function showpop() { 
        
    document.getElementById('popme').style.display="block";
    }

    function 
    hidepop() {
         
    document.getElementById('popme').style.display="none";
    }    

    function 
    mousemove(e)
    {
      if (!
    eevent;

      if (
    e.button == 2)
       
    showpop();
     }

    document.onmousedown=mousemove;
    document.onmouseup=hidepop;
                      
    </script> 
    just need to showpop in function mousemove...

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Of course it wont work in Opera because Opera doesn't allow you to override the normal right click functionality.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you just can't have it all can you


Bookmarks

Posting Permissions

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