dhtml browser problem

Question

emhmk1 1 Junior Poster

16 Years Ago

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

<!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>

html-css javascript

3 Contributors
12 Replies
86 Views
8 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by richie513

richie513 8 Junior Poster

16 Years Ago

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:)

richie513 8 Junior Poster

16 Years Ago

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:)

richie513 8 Junior Poster

16 Years Ago

You have a javascript problem, i'll check out the error and get back to you.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

emhmk1 1 Junior Poster · Answer 1 · 2008-02-17T15:32:35+00:00

Hi richie513,

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

Any other ideas?
Cheers...

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 2 · 2008-02-17T15:46:45+00:00

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:

slideout1 = document.getElementById( 'slideout1' );
slideout1.style. /*etc */

richie513 8 Junior Poster · Answer 3 · 2008-02-17T15:50:06+00:00

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.

richie513 8 Junior Poster · Answer 4 · 2008-02-17T15:55:05+00:00

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:)

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 5 · 2008-02-17T16:00:23+00:00

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..

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 6 · 2008-02-17T16:06:57+00:00

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 ).

richie513 8 Junior Poster · Answer 7 · 2008-02-17T16:12:56+00:00

Yep I usually use other fonts for more choices other than Arial, I just never quoted them, And thanks to your advice, I now have learnt that it is ok to use quotes. So Thank you, you just tought me something new:)

emhmk1 1 Junior Poster · Answer 8 · 2008-02-17T16:55:50+00:00

Hi Matt.

Thanks for taking a look at the problem for me, I don't know too much about js either so i really dont have a clue what to do. Basically all i want is to make the code work in ie, firefox, netscape, opera and safari which it isnt currently doing.

Thanks for all your help too richie.

cheers...

p.s sorry to be a pain in the baackside i am quite dense!!

richie513 8 Junior Poster · Answer 9 · 2008-02-17T17:11:36+00:00

Its no worries, I sorry I can't help you any further. I will have to study JS one day I think:)