User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 426,249 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,099 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 775 | Replies: 12
Previous Post in Thread Previous Post in Thread   Next Post in Thread Next Post in Thread
•
•
Join Date: Feb 2008
Posts: 8
Reputation: emhmk1 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
emhmk1 emhmk1 is offline Offline
Newbie Poster

dhtml browser problem

  #1  
Feb 17th, 2008
i am having a problem with this snippet of code, please could somene take a look and tell me what i need to do to make it work in most browsers, so far it only seems to works in IE and Opera. thank you

Help with Code Tags 
<!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>
AddThis Social Bookmark Button
Reply With Quote  

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Threaded Mode Threaded Mode

•
•
•
•
apple beta bon browser cross-browser javascript menu with few lines of code development echo email encryption firefox firefox background-position problem solved internet microsoft mobile mozilla news nintendo opera patch pda privacy safari security spoof testing update panel scroll problem url web webmail wii windows
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 8:51 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC