Tenchi6
01-09-2003, 12:45 AM
First off, I'm combining two different menus I found in Java Script Source. Are there any no-no's I should know about?
Second I want to take the headliner and replace it with my own so people visiting my site don't get confused as to where the menu is going to take them.
And third I keep getting an error on one of the variables. It doesn't seem to affect the preformance of either menu but it does bother me that it shows up.
The first menu is a movable menu, and the second is a fade menu where the different menus fade in and out on mouse overs. OH and while we're at it how can I get the fade menu to load differently. When it loads, it shows up in color but when the mouse touches the menu, it goes into faded and then responds to the mouse over. I hope this makes some sense.
Let me know if you want the scripts, and if you want them the way I have it or seperate. Thanks in advance.
Tenchi6
01-09-2003, 03:42 AM
The character in blue is the one that's comming up with the error message. The parts that are red is the movable menu and the one that's in green is the fading menu.
<style>
.move
{width:100%;
background-color:#99CCFF;border-bottom:1px solid blue;font-size:14px;font-family:vardana;font-color:"#33CCAA";text-align:center;}
.info
{width:100%;background-color:#99CCFF;border-top:1px solid blue;font-size:13px;font-family:vardana;font color:"#33CCAA";}
.panel
{width:150;position:absolute;border:1px solid blue;left:350;top:200;font-size:13px;font-family:vardana;}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;}
.menu
{width:100%;background-color:lightyellow;font-size:13px;font-family:vardana;}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {if (over){if (N) {ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;}
else {ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;}}}
function MM(e) {if (ob) {if (N) {ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;}
else {ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;}}}
function MU() {ob = null;}
if (N) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="panel" class="panel" style="width: 104px; height: 114px; left: 322px; top: 275px" >
<style>
. tds
{background-Color:blue;width:100;height:20;text-align:center;border:1px solid gray;font-size:14;filter:alpha(opacity=45);-moz-opacity:45%;cursor:crosshairs;}
</style>
<script language="JavaScript">
function getArray(id)
{var splitarray = apl[id].split("|");return splitarray;}
function info(i,obj,col)
{sublink = getArray(i);
infobar = document.getElementById("infob");
infobar.innerHTML = "<img src='pointer2.gif'> "+sublink[2];
obj.style.backgroundColor=col;}
function endi(obj,col)
{obj.style.backgroundColor=col;
infobar = document.getElementById("infob");
infobar.innerHTML = "<img src='pointer2.gif'> <br>";}
nOpac = 50
nPlus = 2
nMin = 1
speed = 30
timer = null;
timer2 = null;
var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);
function fadeImg2(teller)
{apl[teller][1] = "Up";
changes();}function fadeImgend2(teller)
{apl[teller][1] = "Down";
setTimeout("changes()",50);}
function changes()
{next_loop = true;
for (i=0;i<apl.length;i++)
{obj = link_table.rows[i].cells[0];
opacity = apl[i][0]
if (apl[i][1] == "Up")
{opacity += nPlus;
apl[i][0] = opacity;
if (apl[i][0] > 105)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;}
else
{if (apl[i][1] == "Down")
{opacity -= nMin;
apl[i][0] = opacity;
if (apl[i][0] < 45)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;}}
if(ie5){obj.style.filter="alpha(opacity="+opacity+")";}
if(ns6){obj.style.MozOpacity = opacity + '%';}}
if (next_loop == false)
{timer = setTimeout("changes()",speed);}
else
{clearTimeout(timer);}}
var link = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");
document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>JavaScript Source</b></font></div><div class='menu'><br></div>");
for(i=0;i<apl.length;i++){sublink = getArray(i);
document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");}
document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div>");
</script>
<table style="border:1px groove blue; width:0;height:0" cellspacing=0 cellpadding=0>
<tr><td align=center bgcolor=blue>
</td></tr>
<tr><td align=center border=2>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<tr>
<td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">Home</font></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">New</font></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">About</font></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">Pictures</font></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">Partners</font></td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" onclick="window.location='#';" style="border:1px 0066CC;background-color:0066FF;cursor=hand;width:100;text-align:center"><font color="#FFFFFF">Contact</font></td>
</tr>
</table>
</td></tr></table>
</div>
</body>
</html>
I believe that covers everything