Hi Javascript Experts,
I've a javascript downloaded from a site, it works only on IE and not on Netscape or any of its derived browsers. It is a N-level menu generator.
I'm writing the contents of the 3 files in the zip file downloaded:
FILE 1 - - - - - - rightclick.html
<HTML>
<HEAD>
<TITLE>N-level Context Menu script</TITLE>
<LINK HREF="mymenu.css" type="text/css" REL="stylesheet">
<SCRIPT tyle="text/javascript">
var iecheck=document.all&&docu
ment.getEl
ementById
if (iecheck){
document.write('<script type="text/javascript" src="mymenu.js"><\/script>
')
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
/*
N-level context menu- By Kari Hollo (kari.hollo@karvanaamat.co
m)
Modified by JavaScript Kit (
http://www.javascriptkit.com) for minor improvements
Visit
http://www.javascriptkit.com for this script. Keep this intact.
*/
if (iecheck){
createMenus();
document.oncontextmenu=fun
ction(){
showMenu(event);
return false;
}
document.onmouseup=functio
n(){
hideMenu(event);
return false;
}
}
</SCRIPT>
</BODY>
</HTML>
FILE 2 - - - - - - mymenu.css
DIV.men
{
BORDER-RIGHT: 1px solid;
BORDER-TOP: white 1px solid;
LEFT: 10px;
VISIBILITY: hidden;
BORDER-LEFT: white 1px solid;
WIDTH: 120px;
BORDER-BOTTOM: 1px solid;
POSITION: absolute;
TOP: 10px;
HEIGHT: 48px;
BACKGROUND-COLOR: #D6D6D6;
}
TD.tdmenu
{
CLEAR: left;
FONT-SIZE: 8pt;
CURSOR: hand;
FONT-FAMILY: tahoma;
HEIGHT: 16px;
}
TD.imgtd
{
CLEAR: left;
VERTICAL-ALIGN: middle;
OVERFLOW: hidden;
WIDTH: 16px;
CURSOR: hand;
HEIGHT: 16px;
TEXT-ALIGN: center;
SPACING: 0px;
BACKGROUND-COLOR: #D6D6D6;
}
.icondimensions
{
WIDTH: 12px;
HEIGHT: 12px;
}
IMG.emp
{
VISIBILITY: hidden;
}
IMG.arr
{
WIDTH: 6px;
HEIGHT: 9px;
}
FILE 3 - - - - - - - mymenu.js
// Menu script created by Kari Hollo, Finland
//
// Wish I got a job :(
//
// Use these files "as is". You may modify them freely.
// If you can't get them work after modificatins, I don't care...
// Wrote and tested with MS IE6 only...
// Modified by JavaScript Kit (
http://www.javascriptkit.com)
// constants ********
//default/required menu images:
var myi=new Image; myi.src="icons/arrow__r.gi
f"; //submenu arrow
var myiw=new Image; myiw.src="icons/arrow__rw.
gif"; //same as white
var myie=new Image; myie.src="icons/arrow__e.g
if"; //empty pic
var myis=new Image; myis.src="icons/spacer.gif
"; //spacer
var myisb=new Image; myisb.src="icons/spacer__b
.gif"; //enpty end pic left to spacer
var kto=2000; //killTimeout [ms]
var mymenuwidth="160px" //menu width
var bg_color="#D6D6D6"; //colors...
var bg_color_hl="navy"; //syncronize with css file!!
var fg_color="black";
var fg_color_hl="white";
var spc="#SPACER#"; //spaser sign
var arr="#ARROW#"; //submenu sign
// caption/spacer,icon,gimmic
k/submenu
// MAIN MENU, DO NOT REMOVE, EDIT ONLY *********
var m1=new Array;
m1[0]=new Array("");
m1[1]=new Array("JavaScript Kit","icons/telkku.gif","g
oto('
http://www.javascriptkit.com')");
m1[2]=new Array(spc); //add divider
m1[3]=new Array("Freewarejava"+arr,"
icons/pell
e.gif",11)
; //denote sub menu (using "arr")
m1[4]=new Array("Dynamic Drive","icons/pelle.gif","
goto('
http://www.dynamicdrive.com')");
m1[5]=new Array("Coding Forums","icons/pelle.gif",
"goto('
http://www.codingforums.com')");
m1[6]=new Array("Technology Sites"+arr,"icons/pelle.gi
f",12); //denote sub menu (using "arr")
// name submenus reasonable!
// m1## 1.level, m2## 2.level and so on...
// 1ST SUB MENU
var m11=new Array;
m11[0]=new Array("");
m11[1]=new Array("Java Applets","icons/putki.gif"
,"goto('
http://freewarejava.com/applets/')");
m11[2]=new Array("Tutorials"+arr,"ico
ns/pelle.g
if",21);
m11[3]=new Array("Java Sites","icons/telkku.gif",
"goto('
http://freewarejava.com/javasites/')");
m11[4]=new Array("Java Books","icons/telkku.gif",
"goto('
http://freewarejava.com/books/')"
);
m11[5]=new Array("JSP and Servlets","icons/telkku.gi
f","goto('
http://freewarejava.com/jsp/')
");
// 1ST SUB MENU's SUB MENU
var m21=new Array;
m21[0]=new Array("");
m21[1]=new Array("Java Tutorials","icons/telkku.g
if","goto(
'
http://freewarejava.com/tutorials/')");
m21[2]=new Array("JavaScript Tutorials","icons/telkku.g
if","goto(
'
http://www.javascriptkit.com/javaindex.shtml')");
// 2ND SUB MENU
var m12=new Array;
m12[0]=new Array("");
m12[1]=new Array("News.com","icons/te
lkku.gif",
"window.op
en('
http://www.news.com')");
m12[2]=new Array("Wired News","icons/putki.gif","w
indow.open
('
http://wired.com')
");
m12[3]=new Array("SlashDot","icons/te
lkku.gif",
"window.op
en('
http://slashdot.org')");
//ENTER MENU IDs of above. UPDATE IF ADD/REMOVE MENUS!
var mvect=new Array(1,11,12,21);
// END OF EDITTING. variables ********
var th; //menu height
var tw; //menu width
var vas=0; //on left flag
var llv=false; //menu visible flag
var tid; //timeout id
var ksm=0; //known sub sub menu id
//************** FUNCTIONS
//******** base function to create menus
// error handler ***************
function stoperror(){
return true;
}
window.onerror=stoperror; //suppress potential JS errors. Comment line if you need to debug page.
function createMenus(){
for(xyzzy=0;xyzzy<mvect.le
ngth;xyzzy
++){
document.write("<DIV id='teva"+mvect[xyzzy]+"' class='men'>");
document.write("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=0>");
initMenu(mvect[xyzzy]);
document.write("</TABLE></
DIV>");
}
}
//******** initialization
function initMenu(t){
var obj=eval("teva"+t); //container
var vect=eval("m"+t); //menu
var ve1; //caption
var ve2; //picture
var ve3; //trick/no of submenu
var spacers=0; //spacer counter
obj.style.height=(vect.len
gth-1)*16+
"px";
obj.style.width=mymenuwidt
h;
if(t==1){
th=obj.style.height.substr
(0,obj.sty
le.height.
length-2);
tw=obj.style.width.substr(
0,obj.styl
e.width.le
ngth-2);
}
for(i=1;i<vect.length;i++)
{
ve1=eval("vect["+i+"][0]")
;
document.write("<TR>");
if(ve1==spc){
spacers++;
document.write("<TD colspan=3 style='height:8px;'>"+
"<img src='"+myisb.src+"' style='width:3px;height:2p
x;'>"+
"<img src='"+myis.src+"' style='width:95%;height:2p
x;'></TD>"
);
}else{
ve2=eval("vect["+i+"][1]")
;
ve3=eval("vect["+i+"][2]")
;
if(ve1.match(arr)){
var oy=16*(i-1)-spacers*8;
document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
"id='m_"+t+"_"+i+"a' onmouseover='act_td("+t+",
"+i+");sho
wSubMenu("
+t+","+ve3
+","+oy+")
;' "+
"onmouseout='nonact_td("+t
+","+i+");
'>"+
"<img id='m_"+t+"_"+i+"ap' src='"+ve2+"' class='icondimensions'></T
D>");
document.write("<TD onmouseover='act_td("+t+",
"+i+");sho
wSubMenu("
+t+","+ve3
+","+oy+")
;' "+
"onmouseout='nonact_td("+t
+","+i+");
' class='tdmenu' "+
"id='m_"+t+"_"+i+"'>
"+ve1.subs
tr(0,ve1.l
ength-7)+"
</TD>");
document.write("<td class='imgtd' id='m_"+t+"_"+i+"b' "+
"onmouseover='act_td("+t+"
,"+i+");sh
owSubMenu(
"+t+","+ve
3+","+oy+"
);' "+
"onmouseout='nonact_td("+t
+","+i+");
'>"+
"<img class='arr' id='m_"+t+"_"+i+"bp' src='"+myi.src+"'></td>");
}else{
document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
"id='m_"+t+"_"+i+"a' onmouseover='act_td("+t+",
"+i+");' "+
"onmouseout='nonact_td("+t
+","+i+");
' "+
"onclick='eval(m"+t+"["+i+
"][2]);'>"
+
"<img id='m_"+t+"_"+i+"ap' src='"+ve2+"' class='icondimensions'></T
D>");
document.write("<TD onmouseover='act_td("+t+",
"+i+");' "+
"onmouseout='nonact_td("+t
+","+i+");
' onclick='eval(m"+t+"["+i+"
][2]);' "+
"class='tdmenu' id='m_"+t+"_"+i+"'> "
+ve1+"</TD
>");
document.write( "<td class='imgtd' id='m_"+t+"_"+i+"b' "+
"onmouseover='act_td("+t+"
,"+i+");' "+
"onmouseout='nonact_td("+t
+","+i+");
' "+
"onclick='eval(m"+t+"["+i+
"][2]);'>"
+
"<img class='emp' id='m_"+t+"_"+i+"bp' src='' width='12px' height='12px'></td>");
}
}
document.write("</TR>");
}
if(t==1){
obj.style.height=(vect.len
gth-1)*16-
spacers*8+
"px";
th=obj.style.height.substr
(0,obj.sty
le.height.
length-2);
}
}
// on hover **********
function act_td(t,i){
window.clearTimeout(tid);
var obj=eval("m_"+t+"_"+i);
if(t==1)
hideSubMenu();
else
hideKnownSubMenu(t);
obj.style.backgroundColor=
bg_color_h
l;
obj.style.color=fg_color_h
l;
act1_td(eval(obj.id+"a"));
//send cell id
act2_td(eval(obj.id+"b"));
}
// on mouse out *********
function nonact_td(t,i){
var obj=eval("m_"+t+"_"+i);
obj.style.backgroundColor=
bg_color;
obj.style.color=fg_color;
nonact1_td(eval(obj.id+"a"
));
nonact2_td(eval(obj.id+"b"
));
tid=setTimeout('showMenu("
mousedown"
)',kto);
}
//******** left=icon cell hover...
function act1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
if(pix.src!=myie.src)
cel.style.border='1px outset';
else{
cel.style.border="1px solid "+bg_color_hl;
cel.style.backgroundColor=
bg_color_h
l;
}
}
// icon cell on mouse out *********
function nonact1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
if(pix.src!=myie.src)
cel.style.border="1px solid "+bg_color;
else{
cel.style.border="1px solid "+bg_color;
cel.style.backgroundColor=
bg_color;
}
}
//******** right cell for submenu arrow on hover
function act2_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
cel.style.backgroundColor=
bg_color_h
l;
if(cel.className!="emp") pix.src=myiw.src;
}
//********** same onmouseout........
function nonact2_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
cel.style.backgroundColor=
bg_color;
cel.style.color=fg_color;
if(cel.className!="emp") pix.src=myi.src;
}
// needs explanations?
function showMenu(e){
if(llv==true)
hideMenu();
else{
clearTimeout(tid);
var ah=document.body.clientHei
ght-th;
var aw=document.body.clientWid
th-tw;
if(e.clientY < ah) teva1.style.top=e.clientY;
else teva1.style.top=e.clientY-
th;
if(e.clientX < aw) {teva1.style.left=e.client
X;vas=0;}
else {teva1.style.left=e.client
X-tw;vas=1
;}
teva1.style.visibility='vi
sible';
llv=true;
tid=window.setTimeout("hid
eMenu()",k
to);
}
}
// ...........
function showSubMenu(c,t,y){
clearTimeout(tid);
var tobj=eval("teva"+c);
var obj=eval("teva"+t);
var ox=tobj.style.left.substr(
0,tobj.sty
le.left.le
ngth-2);
var oy=tobj.style.top.substr(0
,tobj.styl
e.top.leng
th-2);
var oh=obj.style.height.substr
(0,obj.sty
le.height.
length-2);
var ow=obj.style.width.substr(
0,obj.styl
e.width.le
ngth-2);
if(vas==0){
if(Math.round(ox) > Math.round(document.body.c
lientWidth
)-Math.rou
nd(ow)*2-1
0)
obj.style.left=Math.round(
ox)-Math.r
ound(ow)+2
;
else
obj.style.left=Math.round(
ox)+Math.r
ound(ow)-5
;
}else
obj.style.left=Math.round(
ox)-Math.r
ound(ow)+2
;
if(Math.round(oy)+Math.rou
nd(y) < Math.round(document.body.c
lientHeigh
t)-Math.ro
und(oh))
obj.style.top=Math.round(o
y)+Math.ro
und(y);
else
obj.style.top=Math.round(o
y)+Math.ro
und(y)-Mat
h.round(oh
);
obj.style.visibility='visi
ble';
ksm=t;
}
//...............
function hideMenu(){
clearTimeout(tid);
teva1.style.visibility='hi
dden';
hideSubMenu();
llv=false;
}
//.................
function hideSubMenu(){
var obj;
for(j=1;j<mvect.length;j++
){
obj=eval("teva"+mvect[j]);
obj.style.visibility='hidd
en';
}
}
//.................
function hideKnownSubMenu(t){
if(ksm>0 && ksm!=t){
var obj;
for(j=1;j<mvect.length;j++
){
if(mvect[j]>t){
obj=eval("teva"+mvect[j]);
obj.style.visibility='hidd
en';
}
}
ksm=0;
}
}
function goto(url){
window.location=url
}
//...............
Thanks in advance for your help!!
Regards
emahir
