 DHTML Browser problem
HI everyone, i recently came across the below snippet of code but it only seems to work with IE and Opera.
Is there anything i can do to the code to make it work with the other browsers??
Many thanks
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="JavaScript">
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
slideoutActive = 0
if (n) {
slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
}
if (ie) {
slideout1 = slideoutContent1.style
slideout2 = slideoutContent2.style
slideout3 = slideoutContent3.style
slideout4 = slideoutContent4.style
slideout5 = slideoutContent5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -600
}
function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -600
slideoutLeft()
}
}
function slideoutLeft() {
if (slideoutShown.xpos > -600) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}
function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0 // stops the sequence
}
}
function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}
</script>
<style type="text/css">
h2 {color:white;
text-decoration:underline;
}
body{ background-color:
#000000}
a.nav:link {background-color:#FFFFFF; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
a.nav:visited{background-color:#FFFFFF; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
a.nav:hover {background-color:#FF00FF; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:underline; line-height:20pt;}
a.nav:active {background-color:#FF00FF; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}
#slideoutInterface {position:absolute; left:50; top:50; width:800; height:500; background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); layer-background-color:#000000;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); layer-background-color:#000000;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); layer-background-color:#000000;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); layer-background-color:#000000;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); layer-background-color:#000000;}
#slideoutContent {position:absolute; left:110; top:5; width:700; height:500;clip:rect(0,700,600,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:-600; top:0; width:600; height:500; clip:rect(0,600,600,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-600; top:0; width:600; height:500; clip:rect(0,600,600,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-600; top:0; width:600; height:500; clip:rect(0,600,600,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-600; top:0; width:600; height:500; clip:rect(0,600,600,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-600; top:0; width:600; height:500; clip:rect(0,600,600,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
</style></head>
<body onload="init()">
<h2 align="center">Hutches And Crutches</h2>
<div align="center" id="slideoutInterface">
<p align="CENTER"><a class="nav" id="slideoutSidebar1" onclick="slideout(slideout1)" href="javascript://">About Us</a></p>
<p align="CENTER"><a class="nav" id="slideoutSidebar2" onclick="slideout(slideout2)" href="javascript://">Contact Us</a></p>
<p align="CENTER"><a class="nav" id="slideoutSidebar3" onclick="slideout(slideout3)" href="javascript://">Find Us</a></p>
<p align="CENTER"><a class="nav" id="slideoutSidebar4" onclick="slideout(slideout4)" href="javascript://">Products</a></p>
<p align="CENTER"><a class="nav" id="slideoutSidebar5" onclick="slideout(slideout5)" href="javascript://">Pets</a></p>
<div id="slideoutContent">
<div id="slideoutContent1">
<p align="CENTER"><strong>About Us</strong></P>
</div>
<div id="slideoutContent2">
<p align="CENTER"><strong>Contact Us</strong>
<p>
<table border="0" width="275"><td>
<p>
<form action="/" method="post">
name:<br>
<input type="text" name="name"><br>
email<br>
<input type="text" name="email"><br>
Message:<br>
<textarea cols="30" rows="6"></textarea><br>
<input type="reset" name="Reset" value="reset">
<input type="submit" name="Sumbit" value="submit">
</form>
</p>
</td></table>
</p>
</div>
<div id="slideoutContent3">
<p align="CENTER"><strong>Find Us</strong>
<p>
<table border="0" width="275"><td>
</td></table>
</p>
</div>
<div id="slideoutContent4">
<p align="CENTER"><strong>Products</strong>
<p>
<table border="0" width="275"><td>
</td></table>
</p>
</div>
<div id="slideoutContent5">
<p align="CENTER"><strong>Pets</strong>
<p>
<table border="0" width="275"><td>
</td></table>
</p>
</div>
</div>
</body>
</html>
INVALID ARGUMENT*** |
