PDA

Click to See Complete Forum and Search --> : This should be easy, but . . .

Maxx
05-06-2003, 03:31 AM
There was a point not three days ago at which I thought to myself - "I might just be getting a grasp on this java script buisiness." And then I ran into this today, which promptly disposed of any shred of confidence that might have taken root in my mind . . .

I borrowed this from the Web Monkey site years ago when they introduced it as their little "we have DHTML" cyber-taunt. I believe the proper name for it is a "tree" style menu, and I've used and edited it quite successfully on numerous occasions. But now I need it to perform on a new level.

What exactly would I need to re-name in order for a second instance of this script to function properly on the same page? The most obvious command would be the onload event. But I'm afraid I'm a bit lost after that. The references from the HEAD to the BODY section are not as clear to me as they often are in other scripts. Thank you in advance for any advice . . .

The script . . .


<HEAD>

<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT language=Javascript>
<!-- Hide script from old browsers
document.WM = new Object();
document.WM.hirelist = new Object();
document.WM.hirelist.expandos = new Array();
document.WM.hirelist.heights = new Array();
document.WM.hirelist.names = new Array();

function WM_toggle(id) {
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} else if(document.layers) {
if(parseInt(id + 1)){
ditem = id + 1;
} else {
ditem = document.WM.hirelist.names[id];
}
if(document.WM.hirelist.expandos[ditem].clip.bottom == 0) {
document.WM.hirelist.expandos[ditem].clip.bottom = document.WM.hirelist.heights[ditem];
} else {
document.WM.hirelist.expandos[ditem].clip.bottom = 0;
}
WM_align();
}
}

function WM_align() {
var i,j,stupid_netscape_array_infinate_loop_error;
stupid_netscape_array_infinate_loop_error = document.WM.hirelist.expandos.length;
for(i=0; i<stupid_netscape_array_infinate_loop_error; i++) {
j = i + 1;
if(document.WM.hirelist.expandos[j]){
if(document.layers) {
document.WM.hirelist.expandos[j].top = document.WM.hirelist.expandos[i].top + document.WM.hirelist.expandos[i].clip.bottom;
}
}
}
}

function WM_initialize_toolbar(){
if(document.layers) {
for(i=0; i<document.layers['container'].document.layers.length; i++){
document.WM.hirelist.expandos[i] = document.layers['container'].document.layers[i];
document.WM.hirelist.names[document.layers['container'].document.layers[i].name] = i;
document.WM.hirelist.heights[i] = document.WM.hirelist.expandos[i].clip.bottom;
}
for (p=0;p<document.WM.hirelist.expandos.length;p=p+2){
WM_toggle(p);
}
document.layers['container'].visibility = 'visible';
} else if (document.all){
for(i = 0; i < document.all('container').all.length; i++){
document.all('container').all[i].style.position = 'relative';
if(document.all('container').all[i].className == 'menu'){
document.all('container').all[i].style.display = 'none';
}
}
document.all('container').style.visibility = 'visible';
} else if (document.getElementsByTagName && document.getElementById){
var contained = document.getElementById('container').getElementsByTagName('div');
for(i = 0; i < contained.length; i++){
contained[i].style.position = 'relative';
if(contained[i].getAttribute('class') == 'menu'){
contained[i].style.display = 'none';
}
}
document.getElementById('container').style.visibility = 'visible';
}
}

// End the hiding -->
</SCRIPT>

<SCRIPT language=JavaScript>
<!--
function WM_imageToggle(daImage, src1, src2, netscape_container){
var objStr,obj;
// Check to make sure that images are supported in the DOM.
myImage = document.images[daImage];
if(document.layers){
myImage = document.layers['container'].document.layers[netscape_container].document.images[daImage];
}
if(document.images){
// Check to see whether you are using a name, number, or object
if(myImage.src == src1){
myImage.src = src2;
} else {
myImage.src = src1;
}
}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="WM_initialize_toolbar()">

<DIV id=container
style="BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #ffffff 1px; HEIGHT: 40px; LEFT: 50px; POSITION: center; TOP: 50px; VISIBILITY: hidden; WIDTH: 150px; layer-background-color: #000000">
<DIV id=firstheader
style="BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #ffffff 1px; POSITION: absolute; WIDTH: 150px; layer-background-color: #000000"><A
href="#"
onclick="WM_toggle('first'); WM_imageToggle('firstImage', '!!img url2 here!!', '!!img url1 here', 'firstheader');
return false" style="cursor:crosshair">
<IMG border=0 name=firstImage src="!!img url1 here!!"></A> </DIV>
<DIV class=menu id=first
style="BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; POSITION: absolute; WIDTH: 150px; layer-background-color: #00000">
<A HREF=""></A>

</DIV></DIV>

</BODY>

Thanx again . . .
Maxx
05-06-2003, 12:24 PM
I thought this would be a simple sort of thing, but perhaps not. I've gone through and renamed the onload event to "WM_initialize_toolbar2()" and each instance of "container" to "container2". This allows for both instances to apear on the page, but neither of them function at all. I'm missing something that has to do with calling the images (and probably a couple of other refinements as well). Any ideas anyone?