JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Context menu Script

With IE 5, for the first time, you can now add a context menu to your webpage. What's a context menu? Well, it's a custom menu that pops up in place of the default context menu when you right click your mouse. This custom menu can do virtually anything you want it to do, although in this script, it's designed to go to a set of URLs. Demo: Right click anywhere inside this document if you're using IE 5!


Insert into <HEAD>
<style> <!-- #ie5menu{ position:absolute; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; } .menuitems{ padding-left:15px; padding-right:15px; } --> </style> <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 function showmenuie5(){ var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY if (rightedge<ie5menu.offsetWidth) ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth else ie5menu.style.left=document.body.scrollLeft+event.clientX if (bottomedge<ie5menu.offsetHeight) ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight else ie5menu.style.top=document.body.scrollTop+event.clientY ie5menu.style.visibility="visible" return false } function hidemenuie5(){ ie5menu.style.visibility="hidden" } function highlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="white" if (display_url==1) window.status=event.srcElement.url } } function lowlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="black" window.status='' } } function jumptoie5(){ if (event.srcElement.className=="menuitems") window.location=event.srcElement.url } </script>

Insert into <BODY>
<!--[if IE]> <div id="ie5menu" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> <div class="menuitems" url="/index.htm">JavaScripts.com</div> <div class="menuitems" url="/index.htm">What's New?</div> <div class="menuitems" url="/index.htm">Message Forum</div> <div class="menuitems" url="/index.htm">FAQs</div> <div class="menuitems" url="/index.htm">Submit</div> <hr> <div class="menuitems" url="mailto:javascripts@yahoo.com">Email Us</div> </div> <![endif]--> <script language="JavaScript1.2"> document.oncontextmenu=showmenuie5 if (document.all&&window.print) document.body.onclick=hidemenuie5 </script>

Other Options