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 374,006 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,845 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: 648 | Replies: 12
Reply
Page 1 of 2 1 2 >
•
•
Join Date: Feb 2008
Posts: 3
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  
•
•
Join Date: Feb 2008
Location: Noosa, Qld, Australia
Posts: 150
Reputation: richie513 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
richie513's Avatar
richie513 richie513 is offline Offline
Junior Poster

Re: dhtml browser problem

  #2  
Feb 17th, 2008
Hi emhmk1,

In your styles, I have noticed that you have written font-family like this: "font-family:'Arial'". Trying removing the single quotes around Arial so it looks like this:

font-family:Arial

Let me know how this go's
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important.
richie513
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 3
Reputation: emhmk1 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
emhmk1 emhmk1 is offline Offline
Newbie Poster

Re: dhtml browser problem

  #3  
Feb 17th, 2008
Hi richie513,

I have tried what you suggested and alas it did not work.

Any other ideas?
Cheers...
Reply With Quote  
•
•
Join Date: Feb 2008
Location: Noosa, Qld, Australia
Posts: 150
Reputation: richie513 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
richie513's Avatar
richie513 richie513 is offline Offline
Junior Poster

Re: dhtml browser problem

  #4  
Feb 17th, 2008
I'll see if I can run the script through firebug, this will tell me where the errors are, I'll get back to you soon
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important.
richie513
Reply With Quote  
•
•
Join Date: Feb 2008
Location: Noosa, Qld, Australia
Posts: 150
Reputation: richie513 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
richie513's Avatar
richie513 richie513 is offline Offline
Junior Poster

Re: dhtml browser problem

  #5  
Feb 17th, 2008
You have a javascript problem, i'll check out the error and get back to you.
Last edited by richie513 : Feb 17th, 2008 at 4:52 am.
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important.
richie513
Reply With Quote  
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 916
Reputation: MattEvans will become famous soon enough MattEvans will become famous soon enough 
Rep Power: 5
Solved Threads: 46
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: dhtml browser problem

  #6  
Feb 17th, 2008
Font-family names can be quoted. Especially, because the the name might contain whitespace, like 'Nimbus Sans L Condensed'. There is no harm in quoting font family names, even if they do not contain whitespace.

What problem are you having with the code? 'I'm having a problem' isn't very descriptive.

What browsers are you targeting? Since most modern browsers support the notion of document.getElementById( ), and the style collection; try using code like:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. slideout1 = document.getElementById( 'slideout1' );
  2. slideout1.style. /*etc */
Last edited by MattEvans : Feb 17th, 2008 at 4:48 am.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
•
•
Join Date: Feb 2008
Location: Noosa, Qld, Australia
Posts: 150
Reputation: richie513 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
richie513's Avatar
richie513 richie513 is offline Offline
Junior Poster

Re: dhtml browser problem

  #7  
Feb 17th, 2008
The problem with your script is that in your java script is throwing an uncaught exception. The error is :

"slideout1 is not defined"

As I don't know to much about Javascript I can't really help any further, But I wish you the best of luck now that you know what the problem is.
Last edited by richie513 : Feb 17th, 2008 at 4:55 am.
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important.
richie513
Reply With Quote  
•
•
Join Date: Feb 2008
Location: Noosa, Qld, Australia
Posts: 150
Reputation: richie513 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
richie513's Avatar
richie513 richie513 is offline Offline
Junior Poster

Re: dhtml browser problem

  #8  
Feb 17th, 2008
Hi Matt, I never said that it was a problem quoting the family-fonts, It is just that I was tought not to do it that way, I thought it could maybe cause a problem for browser compatibility. But after reading your above post I now know, thank you for pointing that out
Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important.
richie513
Reply With Quote  
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 916
Reputation: MattEvans will become famous soon enough MattEvans will become famous soon enough 
Rep Power: 5
Solved Threads: 46
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: dhtml browser problem

  #9  
Feb 17th, 2008
Slideout1 isn't defined because the browser checks you're using arent working properly: you're either not selecting a browser atall ( likely, since you don't have any kind of 'default' case ) thus you're running no code to select slideout[1-n]; or the way your accessing slideout[1-n] for the selected browser isn't correct. Generally, you should avoid trying to determine the browser and selecting code that way - either determine each capability as you need it ( i.e. test that the objects document.all / [object].style / etc are defined before trying to use those objects specifically ), or use standards ( where they exist ). Since there is a standard for 'getting an element' and 'setting a style', I don't think you'll have problems, or need to use any kind of browser type determination unless your targetting really obscure/archaic browsers. Just use document.getElementById( 'name' ).style.property..
Last edited by MattEvans : Feb 17th, 2008 at 5:01 am.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 916
Reputation: MattEvans will become famous soon enough MattEvans will become famous soon enough 
Rep Power: 5
Solved Threads: 46
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: dhtml browser problem

  #10  
Feb 17th, 2008
Wel... you probably shouldn't quote the generic families ( serif, sans-serif, cursive, monospace, etc ).. but arial is a system dependant font; ( its a microsoft font ), so, if you want compatibility, you shouldn't use 'arial' as the only font choice in the first place. Use a list like:

font-family:'Arial','Helvetica', sans-serif;

^ will use Arial if its available, else Helvetica if its available, else sans-serif ( which is ALWAYS available but usually ugly ). That selection looks 'pleasant' on the widest range of browsers ( since Helvetica is a common Arial-esque font on multiple platforms ).
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
Reply
Page 1 of 2 1 2 >

•
•
•
•

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

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear 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 10:35 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC