display:none

[rarebit]

Hi,

 

I made a menu a while back and have now just realised it's not initialising properly and I can't see why. Basically some blocks are initialised to to 'display:none', and they show the correct icon and the js works as if initialised that way, but the block below displays whether or not it is set as 'none'.

 

The JS code is probably not required to be shown here, but...

 

The HTML code

<ul class='rctree'>
<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/index.html'>Programming</a></span></li>
<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55site/pro/c/index.html'>C</a></span></li>
<li class='liOpen'><span class='bullet' onmouseover='changeit(this, 1);' onmouseout='changeit(this, 0);' onclick='changeit(this, 2);'> <a  href='http://10.0.0.55/cmstmp/rawstar7/cmsmonkey.0.4.1/site/pro/c/basics/index.html'>Basics</a></span></li>

<ul>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_hello.html'>Hello</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_input.html'>Console Input</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_text_01.html'>Text Formatting</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_logic.html'>Logic</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_funcs_01.html'>Functions</a></span></li>

	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_file_01.html'>File IO</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_macros.html'>#define & Macro's</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_pointers.html'>Array's & Pointers</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_system_01.html'>System Calls</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/basics/tut_c_console_01.html'>Console Parse App</a></span></li>

</ul>
<li class='liClosed'><span class='bullet' onmouseover='changeit(this, 1);' onmouseout='changeit(this, 0);' onclick='changeit(this, 2);'> <a  href='http://10.0.0.55/cmstmp/rawstar7/cmsmonkey.0.4.1/site/pro/c/io/index.html'>IO</a></span></li>
<ul>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_rand.html'>Basic Random Access</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_rdb.html'>Random Access DataBase</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_seq2.html'>Sequential Access</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_cat.html'>Cat</a></span></li>

	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_popen.html'>Popen</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_hexdump.html'>Hexdump</a></span></li>
	<li class='liBullet'><span class='bullet'> <a  href='http://10.0.0.55/site/pro/c/io/file_io_fcount.html'>FCount</a></span></li>
</ul>
</ul>

 

The CSS code

@media screen, print {

ul.rctree  li { list-style: none; }

ul.rctree { margin-left:0px; padding:0px; }
ul.rctree ul { margin-left:10px; padding:0px; }
ul.rctree li { margin-left:5px; padding:0px; }

ul.rctree  li           .bullet { padding-left: 15px; }

ul.rctree  li.liOpen    .bullet { cursor: pointer; background: url(../../res/icons/li_minus.gif)  center left no-repeat; }

ul.rctree  li.liClosed  .bullet { cursor: pointer; background: url(../../res/icons/li_plus.gif)   center left no-repeat; }

ul.rctree  li.liBullet  .bullet { cursor: default; background: url(../../res/icons/li_bullet.gif) center left no-repeat; }
ul.rctree  li.liOpen    ul { display: none; }

ul.rctree  li.liClosed  ul { display: none; }

}

 

The JS code

var nodelast = null;
var timeout_id = null;
function changeit(node, state)
{
if ( (state==1) && (node.parentNode.className != 'liOpen') )
{
	//	NEW OVER
	nodelast = node;
	timeout_id = setTimeout('node_open(nodelast)', 1000);
}
else if (state==0)
{
	//	OUT
	clearTimeout(timeout_id);
}
else if (state==2)
{
	//	CLICK
	node_open(node);
}
}
function node_open(node)
{
if(node.parentNode.className == 'liOpen')
{
	node.parentNode.className = 'liClosed';
}
else
{
	node.parentNode.className = 'liOpen';
}
}

 

 

Help greatly appreciated!

[haku]

'The block below'?

[rarebit]

 

The unordered list (ul) below the list (li).

 

<li class='liOpen'><span class='bullet' onmouseover='changeit(this, 1);' onmouseout='changeit(this, 0);' onclick='changeit(this, 2);'> <a  href='http://10.0.0.55/cmstmp/rawstar7/cmsmonkey.0.4.1/site/pro/c/basics/index.html'>Basics</a></span></li>
   <ul>
      ...
   </ul>

 

At first glance on discovering the issue I also thought the 'li' block should have been wrapping the associated 'ul', but supposedly not, and the basic version I have doesn't either.

[haku]

Try re-writing your nested lists - the code you are using is invalid. Nested lists should look like this:

 

<ul>
  <li>Outer list
    <ul>
      <li>nested list</li>
    </ul>
  </li>// Nested list is contained inside <li></li> tags
</ul>

 

Not like this:

 

<ul>
  <li>outer list</li>
  <ul>
    <li>nested list</li>
  </ul> // list is outside the <li></li> tags
</ul>

[rarebit]

Yep, you were right. The question to myself is how did it change, cos it was working before...