Fingerprint
Programmer
I've written a script to produce a statically placed menu that opens and closes when you click on it, based on an idea one of my friends saw elsewhere. It works fine in all versions of IE and Opera, but I can't work out why it isn't working in NS & Mozilla.
(I know clip must be specified differently in NS & Mozilla, but changing it to the proper specification doesn't work).
The extended menu displays properly in all browsers if I remove the clipping in the style sheet and don't try to trigger any scripts.
Here is the code I'm using, can anyone point me in the right direction?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.body
{
font-family:arial,helvetica,sans-serif;
font:#000066;
background-color:#ffffff;
}
#wrapper
{
position:absolute;
right:160;
}
#container
{
position:absolute;
width:150px;
padding:0px;
clip:rect(0px,150px,18px,0px);
background-color:#ffffff;
overflow:hidden;
}
#top
{
font-size:8pt;
height:15px;
width:100%;
background-color:#bdd0f2;
padding-left:2px;
cursor: help;
}
#textjar
{
width:100%;
padding:2px;
border-left: solid 1px #bdd0f2;
border-right: solid 1px #bdd0f2;
border-bottom: solid 3px #000066;
font-size:8pt;
top:15px;
}
#bottom
{
width:100%;
background-color: #000066;
clip:rect(0px,150px,3px,0px);
top:15px;
position:absolute;
}
</style>
<script language="javascript">
//h = height of element called 'top'
h = 15;
//initialise whether menu folded or unfolded
posit = "folded";
//how far from the top of the screen the menu should display
var offsettop = 10;
var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
function makeStatic()
{
if (ie4)
{
wrapper.style.pixelTop = document.body.scrollTop+offsettop;
}
else if (ns6)
{
document.getElementById("wrapper").style.top = window.pageYOffset+offsettop;
}
else if (ns4)
{
eval(document.wrapper.top=eval(window.pageYOffset+offsettop));
}
setTimeout("makeStatic()", 0);
}
function scroller()
{
topheight = document.getElementById('top').offsetHeight;
textheight = document.getElementById('textjar').offsetHeight;
bottheight = document.getElementById('bottom').offsetHeight;
added = topheight + textheight + bottheight;
if (posit == "folded")
{
scrolldown(added);
}
if (posit == "unfolded")
{
scrollup(topheight, added);
}
}
function scrolldown(added)
{
if (h < added)
{
container.style.clip = "rect(0px 150px "+h+"px 0px)";
bottom.style.top = "" + (h - 3) + "px";
if ((added - h)%2 == 0)
{
h = h + 2;
}
if ((added - h)%2 == 1)
{
h++;
}
setTimeout("scrolldown(added)", 1);
}
if (h == added)
{
posit = "unfolded";
}
}
function scrollup(topheight)
{
if (h > topheight)
{
container.style.clip = "rect(0px 150px "+h+"px 0px)";
bottom.style.top = "" + (h-3) + "px";
if ((h-topheight)%2 == 0)
{
h = h - 2;
}
if ((h-topheight)%2 !== 0)
{
h--;
}
setTimeout("scrollup(topheight)", 1);
}
if (h == topheight)
{
posit = "folded";
}
}
</script>
</head>
<body onload="makeStatic();">
<div id="wrapper">
<div id="container">
<div id="top" onclick="scroller();">Help</div>
<div id="textjar">
The links below will provide access to help files:
<br/>
• Using the form
<br/>
• Definitions
<br/>
• Question specific
<br/>
• Contact Us
</div>
<div id="bottom"></div>
</div>
</div>
</body>
</html>
"The secret to creativity is knowing how to hide your sources" - Einstein
(I know clip must be specified differently in NS & Mozilla, but changing it to the proper specification doesn't work).
The extended menu displays properly in all browsers if I remove the clipping in the style sheet and don't try to trigger any scripts.
Here is the code I'm using, can anyone point me in the right direction?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.body
{
font-family:arial,helvetica,sans-serif;
font:#000066;
background-color:#ffffff;
}
#wrapper
{
position:absolute;
right:160;
}
#container
{
position:absolute;
width:150px;
padding:0px;
clip:rect(0px,150px,18px,0px);
background-color:#ffffff;
overflow:hidden;
}
#top
{
font-size:8pt;
height:15px;
width:100%;
background-color:#bdd0f2;
padding-left:2px;
cursor: help;
}
#textjar
{
width:100%;
padding:2px;
border-left: solid 1px #bdd0f2;
border-right: solid 1px #bdd0f2;
border-bottom: solid 3px #000066;
font-size:8pt;
top:15px;
}
#bottom
{
width:100%;
background-color: #000066;
clip:rect(0px,150px,3px,0px);
top:15px;
position:absolute;
}
</style>
<script language="javascript">
//h = height of element called 'top'
h = 15;
//initialise whether menu folded or unfolded
posit = "folded";
//how far from the top of the screen the menu should display
var offsettop = 10;
var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
function makeStatic()
{
if (ie4)
{
wrapper.style.pixelTop = document.body.scrollTop+offsettop;
}
else if (ns6)
{
document.getElementById("wrapper").style.top = window.pageYOffset+offsettop;
}
else if (ns4)
{
eval(document.wrapper.top=eval(window.pageYOffset+offsettop));
}
setTimeout("makeStatic()", 0);
}
function scroller()
{
topheight = document.getElementById('top').offsetHeight;
textheight = document.getElementById('textjar').offsetHeight;
bottheight = document.getElementById('bottom').offsetHeight;
added = topheight + textheight + bottheight;
if (posit == "folded")
{
scrolldown(added);
}
if (posit == "unfolded")
{
scrollup(topheight, added);
}
}
function scrolldown(added)
{
if (h < added)
{
container.style.clip = "rect(0px 150px "+h+"px 0px)";
bottom.style.top = "" + (h - 3) + "px";
if ((added - h)%2 == 0)
{
h = h + 2;
}
if ((added - h)%2 == 1)
{
h++;
}
setTimeout("scrolldown(added)", 1);
}
if (h == added)
{
posit = "unfolded";
}
}
function scrollup(topheight)
{
if (h > topheight)
{
container.style.clip = "rect(0px 150px "+h+"px 0px)";
bottom.style.top = "" + (h-3) + "px";
if ((h-topheight)%2 == 0)
{
h = h - 2;
}
if ((h-topheight)%2 !== 0)
{
h--;
}
setTimeout("scrollup(topheight)", 1);
}
if (h == topheight)
{
posit = "folded";
}
}
</script>
</head>
<body onload="makeStatic();">
<div id="wrapper">
<div id="container">
<div id="top" onclick="scroller();">Help</div>
<div id="textjar">
The links below will provide access to help files:
<br/>
• Using the form
<br/>
• Definitions
<br/>
• Question specific
<br/>
• Contact Us
</div>
<div id="bottom"></div>
</div>
</div>
</body>
</html>
"The secret to creativity is knowing how to hide your sources" - Einstein