6 replies [Last post]
tommuir
Offline
Regular
Upper east side
Last seen: 13 years 51 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

This is a function for a simple cascading nav bar... It hides the divs okay but won't un-hide them... I can't find any problems... Have a lookl

 function reveal(xElement){
    if(document.getElementById){
        if(document.getElementById(xElement).style.display = "block"){
            document.getElementById(xElement).style.display = "none";
         }
         else{
            document.getElementById(xElement).style.display = "block";
         }
     }
     else if(document.all){
         if(document.all.xElement.style.display = "block"){
             document.all.xElement.style.display = "none";
         }
         else{
             document.all.xElement.style.display = "block";
         }
     }
     else if(document.layers){
         if(document.xElement.style.display = "block"){
             document.xElement.style.display = "none";
         }
         else{
             document.xElement.style.display = "block";
         }
     }
 }

i am not here

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

DHTML confusion...

Hi tommuir,
I was looking at your code and thought um maybe hes calling it wrong cause it looks alright.
Then I had too laugh Laughing out loud and you will probably either laugh or kick yourself.
Your using "=" instead of "==" to check if the equality in your if statements.
How many times have I done that before. :roll:

Hope that helps

tommuir
Offline
Regular
Upper east side
Last seen: 13 years 51 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

DHTML confusion...

Suicide. Definately.

*upadate* Syntax error, needs to be clicked twice to work and it alters margins in IE.

lookey:

www.kkportfolio.net

 /* nav.js */

 function reveal(xElement){
    if(document.getElementById){
        if(document.getElementById(xElement).style.display == "block"){
            document.getElementById(xElement).style.display = "none";
         }
         else{
            document.getElementById(xElement).style.display = "block";
         }
     }
     else if(document.all){
         if(document.all.xElement.style.display == "block"){
             document.all.xElement.style.display = "none";
         }
         else{
             document.all.xElement.style.display = "block";
         }
     }
     else if(document.layers){
         if(document.xElement.style.display == "block"){
             document.xElement.style.display = "none";
         }
         else{
             document.xElement.style.display = "block";
         }
     }
 } 


/*
DHTML Navigation
*/


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Welcome To kkportfolio.net</title>
    <link rel="stylesheet" type="text/css" href="index/style/pos.css">
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <script language="javascript" type="text/javascript" src="scripts/nav.js">
    </script>
    <script language="javascript" type="text/javascript" src="scripts/scrollDiv.js">
    </script>
  </head>
 
  <body>
    <div id="main">
     
      <div id="header">
        <img src="images/header.jpg" />
      </div>
     
      <div id="nav" class="content">
        <img src="images/head.jpg" class="headPic" />
       
        <div class="spacer">
         <a href="javascript:reveal('subsection1');"> section 1 </a> <br />
           <div id="subsection1" class="subsection">
             <a href="#"> SS1:2 </a> <br />
             <a href="#"> SS1:2 </a> <br />
             <a href="#"> SS1:3 </a> <br />
           </div>
         <a href="javascript:reveal('subsection2');"> section 2 </a> <br />
           <div id="subsection2" class="subsection">
             <a href="#"> SS2:1 </a> <br />
             <a href="#"> SS2:2 </a> <br />
             <a href="#"> SS2:3 </a> <br />
           </div>
         <a href="javascript:reveal('subsection3');"> section 3 </a> <br />
           <div id="subsection3" class="subsection">
              <a href="#"> SS3:1 </a> <br />
              <a href="#"> SS3:2 </a> <br />
              <a href="#"> SS3:3 </a> <br />
            </div>
        </div>
      </div>
     
      <div id="content" class="content">
        <img src="images/head.jpg" class="headPic"/>
        <div class="spacer">
          CONTENT!
        </div>
      </div>
     
      <div id="footer">
        <img src="images/footer.jpg" />
      </div>

    </div>
  </body>
</html>

A few points of interest:
#nav has display: inline;, will this be nherited and confuse the script?
One, actually.

i am not here

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

DHTML confusion...

Hi tommuir,
You'll notice that you only need to click twice the first time.
This is because you haven't specifically set the display property of the object.
So you have a couple of potential solutions, one is to set the display properties of the subsections. I remember having most luck when doing this inline.
Another solution would be to test if the display property is not equal to none.

  if(document.getElementById(xElement).style.display != "none"){ 
            document.getElementById(xElement).style.display = "none"; 
         } 
         else{ 
            document.getElementById(xElement).style.display = "block"; 
         } 


Hope that helps

tommuir
Offline
Regular
Upper east side
Last seen: 13 years 51 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

DHTML confusion...

As in:

 if(!document.getElementById('element').style.diplay == "none")

?

i am not here

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

DHTML confusion...

Hi tommuir,
That may work or you could use the method I posted above with "!="

tommuir
Offline
Regular
Upper east side
Last seen: 13 years 51 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

DHTML confusion...

I didn't notice it Stare.

i am not here