SitePoint Sponsor

User Tag List

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

    Context menu and table

    I have got a context menu code so when you right lcick on the page it gives you a menu, but i want it jsut to work inside the table is that possible?

    this is my code:

    Code:
    <head>
    <style>
    <!--
    
    /* Context menu Script-  Dynamic Drive (www.dynamicdrive.com) Last updated: 01/08/22
    For full source code and Terms Of Use, visit http://www.dynamicdrive.com */
    
    .skin0{
    position:absolute;
    width:165px;
    border:2px solid black;
    background-color:menu;
    font-family:Verdana;
    line-height:20px;
    cursor:default;
    font-size:14px;
    z-index:100;
    visibility:hidden;
    }
    
    .menuitems{
    padding-left:10px;
    padding-right:10px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div align="left">
    	<table border="1" width="50" cellspacing="0" cellpadding="0" height="50">
    		<tr>
    			<td>
    			<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
    <div class="menuitems" url="http://dynamicdrive.com">Dynamicdrive.com</div>
    <div class="menuitems" url="http://dynamicdrive.com/new.htm" target="newwin">What's New?</div>
    <div class="menuitems" url="http://dynamicdrive.com/hot.htm">What's Hot?</div>
    <div class="menuitems" url="http://wsabstract.com/cgi-bin/Ultimate.cgi">Message Forum</div>
    <div class="menuitems" url="http://dynamicdrive.com/faqs.htm">FAQs</div>
    <div class="menuitems" url="http://dynamicdrive.com/submitscript.htm">Submit</div>
    <hr>
    <div class="menuitems" url="mailto:dynamicdrive@yahoo.com">Email Us</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>
    			</td>
    		</tr>
    	</table>
    </div>
    </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,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Add an identifier to the table

    Code HTML4Script:
    <table id="mytable" border="1" width="50" cellspacing="0" cellpadding="0" height="50">

    and change the oncontextmenu line near the bottom to the following

    Code Javascript:
    document.getElementById('mytable').oncontextmenu=showmenuie5
    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)
    thank you all good
    Animated Chatrooms - www.121chatrooms.net


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
  •