SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    right click on cell

    i have a cell named avatarcell in my table how can i make this code only show if i right click on the cell:

    Code:
    <head>
    <style>
    <!--
    
    .skin0{
    position:absolute;
    width:100px;
    border:2px solid black;
    background-color:menu;
    font-family:arial;
    line-height:20px;
    cursor:default;
    font-size:10px;
    z-index:100;
    visibility:hidden;
    }
    
    .menuitems{
    padding-left:10px;
    padding-right:10px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
    <div align="center">Username</div><hr>
    <div class="menuitems" url="prvchat.php?username=">Private chat</div>
    <div class="menuitems" url="ignoreuser.php?username=">Ignore user</div>
    </div>
    
    <script language="JavaScript1.2">
    
    //set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
    var display_url=0
    
    var ie5=document.all&&document.getElementById
    var ns6=document.getElementById&&!document.all
    if (ie5||ns6)
    var menuobj=document.getElementById("ie5menu")
    
    function showmenuie5(e){
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
    var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
    
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<menuobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
    else
    //position the horizontal position of the menu where the mouse was clicked
    menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
    
    //same concept with the vertical position
    if (bottomedge<menuobj.offsetHeight)
    menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
    else
    menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
    
    menuobj.style.visibility="visible"
    return false
    }
    
    function hidemenuie5(e){
    menuobj.style.visibility="hidden"
    }
    
    function highlightie5(e){
    var firingobj=ie5? event.srcElement : e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
    firingobj.style.backgroundColor="highlight"
    firingobj.style.color="white"
    if (display_url==1)
    window.status=event.srcElement.url
    }
    }
    
    function lowlightie5(e){
    var firingobj=ie5? event.srcElement : e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
    firingobj.style.backgroundColor=""
    firingobj.style.color="black"
    window.status=''
    }
    }
    
    function jumptoie5(e){
    var firingobj=ie5? event.srcElement : e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
    if (firingobj.getAttribute("target"))
    window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
    else
    window.location=firingobj.getAttribute("url")
    }
    }
    
    if (ie5||ns6){
    menuobj.style.display=''
    document.oncontextmenu=showmenuie5
    document.onclick=hidemenuie5
    }
    
    </script>
    </body>
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Mike4x4s View Post
    i have a cell named avatarcell in my table how can i make this code only show if i right click on the cell
    That's the contextmenu event
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do i change it to jumptoie5(avatrcell)
    Animated Chatrooms - www.121chatrooms.net

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Make the name an ID
    Code:
    <table border="1">
    	<tr>
    		<td>Cell 1 no click</td>
    		<td id="avatarcell ">Cell 2 - right click</td>
    	</tr>
    </table>
    and change the last lines of the javascript too
    Code:
    if (ie5||ns6){
    menuobj.style.display=''
    //document.oncontextmenu=showmenuie5
    var td = document.getElementById('avatarcell ');
    td.oncontextmenu=showmenuie5
    document.onclick=hidemenuie5
    }
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    na its not working this is my code

    index.php
    PHP Code:
    <?php
    include "contextmenu.php";
    $room $_GET["room"];
    ?>
    <script type="text/javascript" src="js/chatboxrefresh.js"></script>
    </head>
    <?php
    include "global.php";
    include 
    "roomsecure.php";
    ?>
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 2</title>
    </head>

    <body>

    <table border="1" width="100" height="100" id="table1">
        <tr>
            <td id="avatarcell">avatar</td>
        </tr>
        <tr>
            <td>plate</td>
        </tr>
    </table>

    </body>

    </html>
    contextmenu.php
    PHP Code:
    <head>
    <
    style>
    <!--

    .
    skin0{
    position:absolute;
    width:100px;
    border:2px solid black;
    background-color:menu;
    font-family:arial;
    line-height:20px;
    cursor:default;
    font-size:10px;
    z-index:100;
    visibility:hidden;
    }

    .
    menuitems{
    padding-left:10px;
    padding-right:10px;
    }
    -->
    </
    style>
    </
    head>

    <
    body>
    <
    div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
    <
    div align="center">Username</div><hr>
    <
    div class="menuitems" url="prvchat.php?username=">Private chat</div>
    <
    div class="menuitems" url="ignoreuser.php?username=">Ignore user</div>
    </
    div>

    <
    script language="JavaScript1.2">

    //set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
    var display_url=0

    var ie5=document.all&&document.getElementById
    var ns6=document.getElementById&&!document.all
    if (ie5||ns6)
    var 
    menuobj=document.getElementById("ie5menu")

    function 
    showmenuie5(e){
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie5document.body.clientWidth-event.clientX window.innerWidth-e.clientX
    var bottomedge=ie5document.body.clientHeight-event.clientY window.innerHeight-e.clientY

    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<menuobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    menuobj.style.left=ie5document.body.scrollLeft+event.clientX-menuobj.offsetWidth window.pageXOffset+e.clientX-menuobj.offsetWidth
    else
    //position the horizontal position of the menu where the mouse was clicked
    menuobj.style.left=ie5document.body.scrollLeft+event.clientX window.pageXOffset+e.clientX

    //same concept with the vertical position
    if (bottomedge<menuobj.offsetHeight)
    menuobj.style.top=ie5document.body.scrollTop+event.clientY-menuobj.offsetHeight window.pageYOffset+e.clientY-menuobj.offsetHeight
    else
    menuobj.style.top=ie5document.body.scrollTop+event.clientY window.pageYOffset+e.clientY

    menuobj
    .style.visibility="visible"
    return false
    }

    function 
    hidemenuie5(e){
    menuobj.style.visibility="hidden"
    }

    function 
    highlightie5(e){
    var 
    firingobj=ie5event.srcElement e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (
    ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode //up one node
    firingobj.style.backgroundColor="highlight"
    firingobj.style.color="white"
    if (display_url==1)
    window.status=event.srcElement.url
    }
    }

    function 
    lowlightie5(e){
    var 
    firingobj=ie5event.srcElement e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (
    ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode //up one node
    firingobj.style.backgroundColor=""
    firingobj.style.color="black"
    window.status=''
    }
    }

    function 
    jumptoie5(e){
    var 
    firingobj=ie5event.srcElement e.target
    if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
    if (
    ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode
    if (firingobj.getAttribute("target"))
    window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
    else
    window.location=firingobj.getAttribute("url")
    }
    }

    if (
    ie5||ns6){
    menuobj.style.display=''
    //document.oncontextmenu=showmenuie5
    var td document.getElementById('avatarcell ');
    td.oncontextmenu=showmenuie5
    document
    .onclick=hidemenuie5
    }

    </script>
    </body> 
    Animated Chatrooms - www.121chatrooms.net

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    there is a space in your script
    Code:
    var td = document.getElementById('avatarcell ');
    notice after 'avatarcell ');

    Remove it
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still not working
    Animated Chatrooms - www.121chatrooms.net

  8. #8
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does anyone know the problem?
    Animated Chatrooms - www.121chatrooms.net

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I suspect that nobody wants to try and simulate the environment you have in order to troubleshoot this.

    Put up a test version on the web somewhere and provide a link. Then you'll get some answers.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Animated Chatrooms - www.121chatrooms.net

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The problem is that the script is running from the head and it's trying to access elements in the body before they exist.

    When scripts are processed, everything below them is put on hold until the script has finished what it's doing.

    The best solution is to place the code at the bottom of the Web page, just before the closing body tag. Then the element you wish to access is guaranteed to be available.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok it works is there a way to make it output the cell name where it says username on the code?
    Animated Chatrooms - www.121chatrooms.net

  13. #13
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what im trying to do is i already have a 2d avatar chat i made an for the users online it shows there own avatar whic is in a table and i have connected it so when i right click on an avatar it displays the context menu, i the links in the context menu such as viewprofile.php?username= to show like if i right click on a user called mike it says viewprofile.php?username=mike
    Animated Chatrooms - www.121chatrooms.net

  14. #14
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nobody can seem to help me is it possible
    Animated Chatrooms - www.121chatrooms.net

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If you place a link around the avatar then it becomes possible. Then the link can point to the desired profile, and you can get that link location from the script and use it in the context menu.

    Have a go at it yourself and when you run into trouble we'll help you troubleshoot what's happening.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Assuming you hve pulled the member information out of a database, it's just a simple case of echoing out the relevant field.

    PHP Code:
    <div align="center"><?php echo $rows['username']; ?></div><hr>
    <div class="menuitems" url="prvchat.php?username=<?php echo $rows['username']; ?>">Private chat</div>
    <div class="menuitems" url="ignoreuser.php?username=<?php echo $rows['username']; ?>">Ignore user</div>
    ?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


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
  •