Really stuck with Javascript

**theatre22** · 12-21-2004, 12:48 AM

I'm still stuck with my below post...

I am trying to use a javascript drop down box three times in one page, meaning I need three separate versions of the javascript. Anytime I try to add another box, it either ruins my first javascript box or does not display the page. Can anyone give me a hand in figuring this one out?

Here is the JS file:

//free JavaScripts on http://www.ScriptBreaker.com

var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items

var bgc = "#000000" // background color of the item
var tc = "#ffffff" // text color of the item

var over_bgc = "#666666";
var over_tc = "ffffff";

var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152

var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;

for(i=0;i<Link.length;i++)
{
la = Link[i].split("|");

if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}

document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
csmc++;
}
}
if (start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn + 5; //-h
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "darkblue";
obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = "solid";
}
document.write("</div>");
}

function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[i][2] == 1)
{open_item += self_menu[i][1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",sp eed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",spee d);
else timerID = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}

Here is an HTML file with one drop down box:

<HTML>
<HEAD>
<style>.menu {
BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand; FONT-FAMILY: verdana; FONT-SIZE: 11px; FONT-WEIGHT: bold; POSITION: absolute; WIDTH: 200px
}
.item_panel {
BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CLIP: rect(0px 150px 0px 0px); POSITION: absolute; WIDTH: 200px
}
.item_panel A {
COLOR: white; CURSOR: hand; TEXT-DECORATION: none
}
.item {
BACKGROUND-COLOR: #303030; FONT-FAMILY: verdana; FONT-SIZE: 10px; WIDTH: 148px
}
</style>
</HEAD>

<body
style="color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);"
vlink="#ffffff">

<center>

<script language="JavaScript">
function goToURL() { history.go(-1); }
</script>
<script language="JavaScript" src="sliding_menu.js"></script>
<center>
<script language="JavaScript">
//Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"

var Link = new Array();
Link[0] = "0|Various Clips";
Link[1] = "1|Kaleidoscope|http://www.footbel.com/content/scheids/fr/news.asp|rechts";
Link[2] = "0|Rent (Mark)|";
Link[3] = "1|Rent|aanduidingen.htm|rechts"
Link[4] = "1|Tango Maureen|aanduidingen.htm|rechts"
Link[5] = "1|La Vie Boheme|aanduidingen.htm|rechts"
Link[6] = "0|Rent Roger";
Link[7] = "1|Rent|hainaut.htm|rechts";
Link[8] = "1|One Song Glory|brabant.htm|rechts";
Link[9] = "1|One Song Glory B|liege.htm|rechts";
Link[10] = "1|Light My Candle|lux.htm|rechts";
Link[11] = "1|Another Day|namur.htm|rechts";
Link[12] = "0|Rent (Gordon)";
Link[13] = "1|Life Support|doc_oog.htm|rechts";
Link[14] = "1|Christmas Bells|doc_regels.htm|rechts";

Link[15] = "0|Various Clips";
Link[16] = "1|Kaleidoscope|http://www.footbel.com/content/scheids/fr/news.asp|rechts";
Link[17] = "0|Rent (Mark)|";
Link[18] = "1|Rent|aanduidingen.htm|rechts"
Link[19] = "1|Tango Maureen|aanduidingen.htm|rechts"
Link[20] = "1|La Vie Boheme|aanduidingen.htm|rechts"
Link[21] = "0|Rent Roger";
Link[22] = "1|Rent|hainaut.htm|rechts";
Link[23] = "1|One Song Glory|brabant.htm|rechts";
Link[24] = "1|One Song Glory B|liege.htm|rechts";
Link[25] = "1|Light My Candle|lux.htm|rechts";
Link[26] = "1|Another Day|namur.htm|rechts";
Link[27] = "0|Rent (Gordon)";
Link[28] = "1|Life Support|doc_oog.htm|rechts";
Link[29] = "1|Christmas Bells|doc_regels.htm|rechts";
startup(0);
</SCRIPT>

</BODY>
</HTML>

Now how can I add a second box without disrupting the 1st one? I am really stuck.

Thanks.

**hostyorkshire** · 12-23-2004, 08:20 PM

Hi, I copied your source and pasted it into dreamweaver.

It was a total mish mash and I wouln't attempt to even try an unpick it.

Since no one answered this post and the code is quite long I would suggest that you start again. What exactly are you trying to accomplish in the end? Maybe we can find another solution for you.

Andrew
www.hostyorkshire.com