Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Context menus 2

Status
Not open for further replies.
Niv3k

Niv3k

Programmer
Jul 11, 2001
350
US
Does anyone know if it's possible using vbscript, javascript, whatever, to create a custom context menu? For example, I want my users to right click on a data field and get a list of choices, 1, 2, 3, and then perform function 2 when the user selects 2.

I don't want to have to use activeX or java or anything like that.

Kevin
 
Sort by date Sort by votes
Niv3K, hi, do you want the user to only right-click on a data or anywhere on the webpage?? I have not failed; I merely found 100,000 different ways of not succeding...
 
Upvote 0 Downvote
Will an IE-only solution work? I tested it in 5.5, but I'm not sure about other versions. If nothing else, maybe this can get you started...
Code: 
<html>
<head>
<title>Test</title>
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>
var menustat = &quot;off&quot;
function menu() {
var themenu = document.getElementById(&quot;menu&quot;)
themenu.style.top = event.clientY+&quot;px&quot;
themenu.style.left = event.clientX+&quot;px&quot;
themenu.style.visibility = &quot;visible&quot;
menustat = &quot;on&quot;
}
function checkmenu() {
var themenu = document.getElementById(&quot;menu&quot;)
if (menustat == &quot;on&quot;) {
themenu.style.visibility = &quot;hidden&quot;
}
menustat = &quot;off&quot;
}

function funct1() {
alert(&quot;Function 1&quot;)
}
function funct2() {
alert(&quot;Function 2&quot;)
}
function funct3() {
alert(&quot;Function 3&quot;)
}
</script>
<style type=&quot;text/css&quot;>
#menu {
background-color: #c6c3c6;
border: 2px outset #dddddd;
font-family: Arial;
font-size: 8pt;
width: 70px;
position: absolute;
visibility: hidden;
}
#menu a {
display: block;
color: #111111;
cursor: default;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
width: 100%;
}
#menu a:hover {
background-color: #000084;
color: white;
}
</style>
</head>
<body onclick=&quot;checkmenu()&quot;>
<input type=&quot;text&quot; oncontextmenu=&quot;menu();return false&quot; />
<div id=&quot;menu&quot;>
<a href=&quot;javascript:funct1()&quot;>Option 1</a>
<a href=&quot;javascript:funct2()&quot;>Option 2</a>
<a href=&quot;javascript:funct3()&quot;>Option 3</a>
</div>
</body>
</html>
 
Upvote 0 Downvote
Yes, an IE-only solution is fine , (the advantages of working on a Win2k standard platform across-the-board), I will be testing the above solution in a few minutes (must shorten my life-span with tar and nicotine).
 
Upvote 0 Downvote
Wow! That's perfect! Thanks a bigillion!

Kevin
 
Upvote 0 Downvote
Niv3k-

to replace the menu colors with the user defined system colors, change the stylesheet to this:

#menu {
background-color: threedface;
border: 2px outset #dddddd;
font-family: Arial;
font-size: 8pt;
width: 70px;
position: absolute;
visibility: hidden;
}

#menu a {
display: block;
color: menutext;
cursor: default;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
width: 100%;
}

#menu a:hover {
background-color: highlight;
color: highlighttext;
}


theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**
 
Upvote 0 Downvote
and here is another add-on/modification ( but this is only if you really want to get fancy). this modification makes the menu &quot;fold out&quot; to whatever height specified in the <div> tag's style='' attribute.

here are the modificatons:
1) the new functions/global variables
Code: 
var themenu;
var expansionWidth;
var expansionHeight;
var numsteps=5;
var widthStep;
var heightStep;

function menu() {
themenu.style.pixelTop = event.clientY
themenu.style.pixelLeft = event.clientX
themenu.style.width=0+'px';
themenu.style.height=0+'px';
expandMenu();
themenu.style.visibility = &quot;visible&quot;
menustat = &quot;on&quot;
}

function expandMenu(){
themenu.style.height=(parseInt(themenu.style.height)+heightStep)+'px';
themenu.style.width=(parseInt(themenu.style.width)+widthStep)+'px';
if ((parseInt(themenu.style.height)<expansionHeight)||(parseInt(themenu.style.width)<expansionWidth)){
setTimeout('expandMenu()',50);}
}


function loadContextMenu(){
themenu=document.getElementById(&quot;menu&quot;);
expansionWidth=parseInt(themenu.style.width);
expansionHeight=parseInt(themenu.style.height);
widthStep=expansionWidth/numsteps;
heightStep=expansionHeight/numsteps;
themenu.style.visibility='hidden';
themenu.style.height=0+'px';
themenu.style.width=0+'px';
}

function checkmenu() {
var themenu = document.getElementById(&quot;menu&quot;)
if (menustat == &quot;on&quot;) {
themenu.style.visibility = &quot;hidden&quot;;
themenu.style.height=0+'px';
themenu.style.width=0+'px';
}
menustat = &quot;off&quot;
}

2) the body tag and the div tag:
Code: 
<body onclick=&quot;checkmenu()&quot;  oncontextmenu=&quot;menu(); return false;&quot; onload=loadContextMenu()>

<div id=&quot;menu&quot; style=&quot;width:85px; height:1077px;&quot;>

I know this is probably overkill, but I was bored
theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**
 
Upvote 0 Downvote
theEclipse and aperfectcircle should get together and write an FAQ or an article, this has been great!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

c0deM0nK424
  • Locked
  • Question
Help with modifying current navigation menu to add 'drop down' sub-menus ? 1
Replies
5
Views
148
navyfalcon
navyfalcon
Mfho1
  • Locked
  • Question
Best Practices for Creating Menus - How to Retain Your CSS Menu Structure even with Javascript
Replies
13
Views
193
Mfho1
Mfho1
Dragonfish
  • Locked
  • Question
Unodered lists - Dropdown Menus 2
Replies
6
Views
117
Dragonfish
Dragonfish
dreamer610
  • Locked
  • Question
Help with CSS Menus
Replies
2
Views
80
Vragabond
Vragabond
Chelsea7
  • Locked
  • Question
Question about tabbed navigation menus.
Replies
3
Views
91
Chelsea7
Chelsea7

Part and Inventory Search

Sponsor

Back
Top