1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:49 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Layers + Javascript = confustion

Layers javascript z-index

         

crash325

3:12 pm on Apr 6, 2004 (gmt 0)

10+ Year Member



Hi, I'm trying to get the multiple layers to work and so far, they work fine, but only from left to right, and not right to left (in other words, once I hit sunday, I can't click any other day to get it to work)

Its a seven day 'calendar' and its color coded to match layers to dayes.

I've removed the z-index for all days and it still does the same thing, left to right works fine but not backwards.

Any assistance would be appreciated.

TIA,

Patrick Elward

Here is the code below:

<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript"><!--
function toggle(object) {
if (document.getElementById) {
if (document.getElementById(object).style.visibility == 'visible')
document.getElementById(object).style.visibility = 'hidden';
else
document.getElementById(object).style.visibility = 'visible';
}

else if (document.layers && document.layers[object]!= null) {
if (document.layers[object].visibility == 'visible' ¦¦
document.layers[object].visibility == 'show' )
document.layers[object].visibility = 'hidden';
else
document.layers[object].visibility = 'visible';
}

else if (document.all) {
if (document.all[object].style.visibility == 'visible')
document.all[object].style.visibility = 'hidden';
else
document.all[object].style.visibility = 'visible';
}

return false;
}
//--></script>

<style type="text/css"><!--
.myStyle { position: absolute; visibility: hidden; }
//--></style>

</head>

<body>

<table width="600" border="0" cellpadding="2">
<tr>
<td bgcolor="#CCCCCC"><a href="#" onClick="toggle('monday')"><strong>Monday</strong></a></td>
<td bgcolor="#99FF66"><a href="#" onClick="toggle('tuesday')"><strong>Tuesday</strong></a></td>
<td bgcolor="#6699CC"><a href="#" onClick="toggle('wednesday')"><strong>Wednesday</strong></a></td>
<td bgcolor="#FF0000"><a href="#" onClick="toggle('thursday')"><strong>Thursday</strong></a></td>
<td bgcolor="#CCCC33"><a href="#" onClick="toggle('friday')"><strong>Friday </strong></a></td>
<td bgcolor="#FF6600"><a href="#" onClick="toggle('saturday')"><strong>Saturday</strong></a></td>
<td bgcolor="#CC99FF"><a href="#" onClick="toggle('sunday')"><strong>Sunday</strong></a></td>
</tr>
</table>
<div id="monday" style="position:absolute; width:600px; height:115px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; visibility: visible;">
<h1>Today is Monday <br>
</h1>
</div>
<div id="tuesday" style="position:absolute; width:600px; height:115px; z-index:2; background-color: #99FF66; layer-background-color: #99FF66; border: 1px none #000000; left: 11px; top: 43px; visibility: hidden;">
<h1>Today is Tuesday </h1>
</div>
<div id="wednesday" style="position:absolute; width:600px; height:115px; z-index:3; background-color: #6699CC; layer-background-color: #6699CC; border: 1px none #000000; left: 10px; top: 42px; visibility: hidden;">
<h1>Today is Wednesday </h1>
</div>
<div id="thursday" style="position:absolute; width:600px; height:115px; z-index:4; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; top: 43px; visibility: hidden;">
<h1>Today is Thursday </h1>
</div>
<div id="friday" style="position:absolute; width:600px; height:115px; z-index:5; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000; top: 43px; visibility: hidden;">
<h1>Today is Friday </h1>
</div>
<div id="saturday" style="position:absolute; width:600px; height:115px; z-index:6; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000; top: 42px; visibility: hidden;">
<h1>Today is Saturday </h1>
</div>
<div id="sunday" c style="position:absolute; width:600px; height:115px; z-index:7; background-color: #CC99FF; layer-background-color: #CC99FF; top: 43px; left: 9px; visibility: hidden;">
<h1>Today is Sunday </h1>
</div>

crash325

9:45 pm on Apr 6, 2004 (gmt 0)

10+ Year Member



Cleaned up HTML:
I'm trying to set non-clicked layers to go invisible automatically . . . . .

--------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript" language="JavaScript"><!--
function toggle(object) {
if (document.getElementById(object).style.visibility == 'visible')
document.getElementById(object).style.visibility = 'hidden';
else
document.getElementById(object).style.visibility = 'visible';

return false;
}
//--></script>

<style>
td {font:Verdana, Arial, Helvetica, sans-serif; font-weight:bold
}
</style>

</head>

<body>

<table width="600" border="0" cellpadding="2">
<tr>
<td bgcolor="#CCCCCC"><a href="#" onClick="toggle('monday')">Monday</a></td>
<td bgcolor="#99FF66"><a href="#" onClick="toggle('tuesday')">Tuesday</a></td>
<td bgcolor="#6699CC"><a href="#" onClick="toggle('wednesday')">Wednesday</a></td>
<td bgcolor="#FF0000"><a href="#" onClick="toggle('thursday')">Thursday</a></td>
<td bgcolor="#CCCC33"><a href="#" onClick="toggle('friday')">Friday </a></td>
<td bgcolor="#FF6600"><a href="#" onClick="toggle('saturday')">Saturday</a></td>
<td bgcolor="#CC99FF"><a href="#" onClick="toggle('sunday')">Sunday</a></td>
</tr>
</table>
<div id="opening" style="position:absolute; width:600px; height:115px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: visible;">
<h1>Click a Date above </h1>
</div>
<div id="monday" style="position:absolute; width:600px; height:115px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; visibility: hidden; top: 47px;">
<h1>Today is Monday </h1>
</div>
<div id="tuesday" style="position:absolute; width:600px; height:115px; z-index:2; background-color: #99FF66; layer-background-color: #99FF66; border: 1px none #000000; left: 21px; top: 45px; visibility: hidden;">
<h1>Today is Tuesday </h1>
</div>
<div id="wednesday" style="position:absolute; width:600px; height:115px; z-index:3; background-color: #6699CC; layer-background-color: #6699CC; border: 1px none #000000; left: 17px; top: 51px; visibility: hidden;">
<h1>Today is Wednesday </h1>
</div>
<div id="thursday" style="position:absolute; width:600px; height:115px; z-index:4; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; top: 54px; visibility: hidden; left: 29px;">
<h1>Today is Thursday </h1>
</div>
<div id="friday" style="position:absolute; width:600px; height:115px; z-index:5; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000; top: 57px; visibility: hidden; left: 30px;">
<h1>Today is Friday </h1>
</div>
<div id="saturday" style="position:absolute; width:600px; height:115px; z-index:6; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000; top: 82px; visibility: hidden; left: 47px;">
<h1>Today is Saturday </h1>
</div>
<div id="sunday" c style="position:absolute; width:600px; height:115px; z-index:7; background-color: #CC99FF; layer-background-color: #CC99FF; top: 94px; left: 84px; visibility: hidden;">
<h1>Today is Sunday </h1>
</div>

</body>
</html>

crash325

3:33 pm on Apr 7, 2004 (gmt 0)

10+ Year Member



Never mind, I fixed the problem. Dreamweaver plugged it in, (ugly as hell, but it works)

Once I learn how to, I'll see if I can make an array of the days and have it work that way.

-----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript" language="JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>

<style>
td {font:Verdana, Arial, Helvetica, sans-serif; font-weight:bold
}
</style>

</head>

<body>

<table width="600" border="0" cellpadding="2">
<tr>
<td bgcolor="#CCCCCC"><a href="#" onMouseover="MM_showHideLayers('monday','','show','tuesday','','hide','wednesday','','hide','thursday','','hide','friday','','hide','saturday','','hide','sunday','','hide')"> Monday</a></td>
<td bgcolor="#99FF66"><a href="#" onMouseover="MM_showHideLayers('tuesday','','show','monday','','hide','wednesday','','hide','thursday','','hide','friday','','hide','saturday','','hide','sunday','','hide')"> Tuesday</a></td>
<td bgcolor="#6699CC"><a href="#" onMouseover="MM_showHideLayers('wednesday','','show','tuesday','','hide','monday','','hide','thursday','','hide','friday','','hide','saturday','','hide','sunday','','hide')"> Wednesday</a></td>
<td bgcolor="#FF0000"><a href="#" onMouseover="MM_showHideLayers('thursday','','show','tuesday','','hide','wednesday','','hide','monday','','hide','friday','','hide','saturday','','hide','sunday','','hide')">Thursday</a></td>
<td bgcolor="#CCCC33"><a href="#" onMouseover="MM_showHideLayers('friday','','show','tuesday','','hide','wednesday','','hide','thursday','','hide','monday','','hide','saturday','','hide','sunday','','hide')"> Friday </a></td>
<td bgcolor="#FF6600"><a href="#" onMouseover="MM_showHideLayers('saturday','','show','tuesday','','hide','wednesday','','hide','thursday','','hide','friday','','hide','monday','','hide','sunday','','hide')"> Saturday</a></td>
<td bgcolor="#CC99FF"><a href="#" onMouseover="MM_showHideLayers('sunday','','show','tuesday','','hide','wednesday','','hide','thursday','','hide','friday','','hide','saturday','','hide','monday','','hide')" >Sunday</a></td>
</tr>
</table>
<div id="opening" style="position:absolute; width:600px; height:115px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: visible;">
<h1>Click a Date above </h1>
</div>
<div id="monday" style="position:absolute; width:600px; height:115px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; visibility: hidden; top: 40px; left: 9px;">
<h1>Today is Monday: no comment </h1>
</div>
<div id="tuesday" style="position:absolute; width:600px; height:115px; z-index:2; background-color: #99FF66; layer-background-color: #99FF66; border: 1px none #000000; left: 9px; top: 40px; visibility: hidden;">
<h1>Today is Tuesday: let's play two </h1>
</div>
<div id="wednesday" style="position:absolute; width:600px; height:115px; z-index:3; background-color: #6699CC; layer-background-color: #6699CC; border: 1px none #000000; left: 9px; top: 39px; visibility: hidden;">
<h1>Today is Wednesday: halfway point </h1>
</div>
<div id="thursday" style="position:absolute; width:600px; height:115px; z-index:4; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; top: 39px; visibility: hidden; left: 10px;">
<h1>Today is Thursday: memo here </h1>
</div>
<div id="friday" style="position:absolute; width:600px; height:115px; z-index:5; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000; top: 39px; visibility: hidden; left: 10px;">
<h1>Today is Friday : TGIF </h1>
</div>
<div id="saturday" style="position:absolute; width:600px; height:115px; z-index:6; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000; top: 40px; visibility: hidden; left: 9px;">
<h1>Today is Saturday - No work today! </h1>
</div>
<div id="sunday" c style="position:absolute; width:600px; height:115px; z-index:7; background-color: #CC99FF; layer-background-color: #CC99FF; top: 40px; left: 8px; visibility: hidden;">
<h1>Today is Sunday: go pray to your god. </h1>
</div>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:49 pm May 13, 2026