|
| |
User Groups : Forums : SiteExperts :
Dynamic HTML
:  |  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>
Started By emhmk1 on Feb 17, 2008 at 12:52:30 AM | | | 22 Response(s) | Reply |
Earlier Replies | Replies 16 to 22 of 22 | Later Replies
Goto Page: 4 3 2 1 | | | ChrisRickard on Feb 21, 2008 at 12:19:00 PM (# 16) I don't think I follow. From what I understand the tiles that slide are the ones pictured below, which are 600px
emhmk1 on Feb 21, 2008 at 12:54:56 PM (# 17)My html code made the layout totally different from what i tought i had posted, The layout that you posted is how i want it and yes that is the tile size i was referring to. Could you post what code you have html and css etc so i can see, it may just be me being stupid but i cant tell.......sorry again to be a pain.
ChrisRickard on Feb 21, 2008 at 1:27:39 PM (# 18)It's your code from #10. Which browser are you using to view this with?
emhmk1 on Feb 21, 2008 at 1:34:32 PM (# 19)Yes my code is from #10 and im using IE 7, i tried the code in mozilla and i still get the same effect.
Cheers...
ChrisRickard on Feb 21, 2008 at 3:31:35 PM (# 20)Weird, I tested in IE6,7 and Mozilla. Anyone else want to give it a go? emhmk1, do you have another PC to test this with? When I test with a different PC I get the same results.
MHenke on Feb 21, 2008 at 11:53:24 PM (# 21)Cache?
emhmk1 on Feb 22, 2008 at 12:35:20 AM (# 22)Thank you everyone for al your help, turns out i should really upload to my server before i complain!!! turns out dreamweavers preview isnt all that good.
Can't thank you guys enough
Cheers...
| Earlier Replies | Replies 16 to 22 of 22 | Later Replies
Goto Page: 4 3 2 1 |
To respond to a discussion, you must first logon.
If you are not registered, please register yourself to become a member of the SiteExperts.community.
|
