Javascript problem

necrotic posted this at 04:36 — 24th February 2003.

Joined: May 2002

I'm pretty new to JavaScripting, and I'm trying to figure this out. This page has a menu that if you click an item a submenu appears under the item. I know that the hide/show functions work, but the function to do the right one doesn't. Here's what I have:

      function Hide(hide) {
        eval(hide+'.style.visibility="hidden"');
        eval(hide+'.style.position="absolute"');
      }
      function Show(show) {
        eval(show+'.style.visibility="visible"');
        eval(show+'.style.position="relative"');
      }
      function ShowHide(use) {
        var xx;
        for (xx in document.all){
          if (xx.substr(0,6) == use) 
          {
            var shown = document.all(xx).style.visibility.value;
            if (shown=="hidden"){
              Hide(xx);
            }else if (shown=="visible"){
              Show(xx);
            }
            document.write(shown)
          }
        }
      }

To use it I have onClick='ShowHide("M_FF1_")' in my first SPAN. I know it works because I've changed ShowHide with Hide and Show to make sure they work.

I know what the problem is, just not how to fix it. I have document.write(shown) to see if shown is getting set right. It's not. It gets set as 'undefined'. Am I setting shown correctly? Thanks in advance!!!

EDIT: And don't tell me it doesn't work in any browsers. I know it'll work in IE6. Right now I just want to get it to work, then I'll fix it to work in other browsers.

[James Logsdon]

Mark Hensler posted this at 07:46 — 24th February 2003.

He has: 4,048 posts

Joined: Aug 2000

tested:

<html>
<head>
<style type="text/css">
<!--
BODY, TD {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
}
A:LINK, A:ACTIVE, A:VISITED {
    color: #0000FF;
    text-decoration: none;
}
A:HOVER {
	background-color: #3366FF;
    color: #FFFFFF;
    text-decoration: none;
}

DIV.child {
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    background-color: #99CCFF;
    color: #000000;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    width: 200px;
}
DIV.parent {
    border: solid 1px #000000;
    background-color: #0000CC;
    color: #FFFFFF;
    cursor: hand;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .1em;
    padding: 2px;
    text-transform: uppercase;
    width: 200px;
}
// -->
</style>
&lt;script type="text/javascript" language="javascript"&gt;
<!--
function Hide(section)
{
    section.style.display="none";
}

function Show(section)
{
    section.style.display="";
}

function ShowHide(section)
{
    if (section.style.display=="") {
        Hide(section);
    }
    else {
        Show(section);
    }
}
//-->
&lt;/script&gt;
<base target='main' />
</head>
<body bgcolor="#FFFFFF">


<div class="parent" onClick="ShowHide(section1);">
    Section 1
</div>
<div id="section1" style="display: none;" class="child">
    Content for section 1 goes here.<br>
    <br>
    <a href="#">Imaginary Link 1.1</a><br>
</div>

<BR />

<div class="parent" onClick="ShowHide(section2);">
    Section 2
</div>
<div id="section2" style="display: none;" class="child">
    Section 2 goes here.<br>
    <br>
    <a href="#">Imaginary Link 2.1</a><br>
    <a href="#">Imaginary Link 2.2</a><br>
    <a href="#">Imaginary Link 2.3</a><br>
</div>

<BR />

<div class="parent" onClick="ShowHide(section3);">
    Section 3
</div>
<div id="section3" style="display: none;" class="child">
    And Section 3 would obviously go here.<br>
    <br>
    <a href="#">Imaginary Link 3.1</a><br>
    <a href="#">Imaginary Link 3.2</a><br>
</div>



</body>
</html>

Mark Hensler
If there is no answer on Google, then there is no question.

Mark Hensler posted this at 07:52 — 24th February 2003.

He has: 4,048 posts

Joined: Aug 2000

According to my book (@ Amazon)... the 'none' value of the display style property is supported by IE 4 & 5 as well as NS 4 & 4.5.

The book doesn't include any javascript, and I'm not a JS guru, so I can't comment on the JS compatability.

Mark Hensler
If there is no answer on Google, then there is no question.

Suzanne posted this at 20:04 — 24th February 2003.

She has: 5,507 posts

Joined: Feb 2000

I've used PHP to make it so that those without JS can still view the menus (it expands them all so all links are viewable).

You can dig around for the .js source and .html source if you want, or check what I posted about it here:

http://www.synapticimpulse.com/2002_12_15_weeklyblog.php#zc86278085

Suzanne posted this at 20:06 — 24th February 2003.

She has: 5,507 posts

Joined: Feb 2000

I also added a "reveal all" link for Opera (at the top of the menus) because of issues they have with partial JavaScript DOM support not cancelling the JavaScript, but also not revealing the links. I should write a cookie to set the state. Hmmm.

necrotic posted this at 20:09 — 24th February 2003.

He has: 296 posts

Joined: May 2002

I get this error:

Line:    84
Char:    5
Error:   'style.display' is null or not an object
Code:    0
URL:     file://D:\inetpub\family\james\ffunltd.html

Line 84 is: if (section.style.display=="") {

I tried just cut+pasting your code and it works fine. Why would it be any different? I doubt it would be because I'm using SPAN and not DIV.

I got rid of the error. But it still doesn't work. I'm gunna keep working on it.

. Don't know what I did, but it works now ^_^

[James Logsdon]