469,645 Members | 1,984 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

Collapsible Hierarchical Menus

I'm trying to implement these ...

I know there is a lot of example code on the web, but I'm trying to roll my
own ...

What JavaScript functionality is typically used to display parts of the menu
then hide it again ... haven't found anything that allows erasing or
rewriting ...

Thanks.
--
David T. Ashley (dt*@e3ft.com)
http://www.e3ft.com (Consulting Home Page)
http://www.dtashley.com (Personal Home Page)
http://gpl.e3ft.com (GPL Publications and Projects)
Jun 16 '07 #1
7 2507
David T. Ashley said the following on 6/16/2007 4:19 PM:
I'm trying to implement these ...
Trying to implement what?
I know there is a lot of example code on the web, but I'm trying to roll my
own ...
99.99% of the code on the web isn't worth reading, much less copying.
What JavaScript functionality is typically used to display parts of the menu
then hide it again ...
The display/visibility property of the style object.
haven't found anything that allows erasing or rewriting ...
Why do you need to erase or rewrite menu items? Just hide/show them.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 16 '07 #2
"Randy Webb" <Hi************@aol.comwrote in message
news:S5*********************@telcove.net...
David T. Ashley said the following on 6/16/2007 4:19 PM:
>What JavaScript functionality is typically used to display parts of the
menu then hide it again ...

The display/visibility property of the style object.
>haven't found anything that allows erasing or rewriting ...

Why do you need to erase or rewrite menu items? Just hide/show them.
OK, I think I've got it (collapsible menus).

Here is my sample:

http://www.dtashley.com/jstutorial/tree.htm

Just one question about the above sample ... when the page is first loaded,
the menus display in their entirety then collapse (there is visible motion
on the browser screen). Is there any way to prevent this so the menus come
up in their final form?

Thanks, Dave.
--
David T. Ashley (dt*@e3ft.com)
http://www.e3ft.com (Consulting Home Page)
http://www.dtashley.com (Personal Home Page)
http://gpl.e3ft.com (GPL Publications and Projects)
Jun 16 '07 #3
David T. Ashley said the following on 6/16/2007 6:19 PM:
"Randy Webb" <Hi************@aol.comwrote in message
news:S5*********************@telcove.net...
>David T. Ashley said the following on 6/16/2007 4:19 PM:
>>What JavaScript functionality is typically used to display parts of the
menu then hide it again ...
The display/visibility property of the style object.
>>haven't found anything that allows erasing or rewriting ...
Why do you need to erase or rewrite menu items? Just hide/show them.

OK, I think I've got it (collapsible menus).

Here is my sample:

http://www.dtashley.com/jstutorial/tree.htm

Just one question about the above sample ... when the page is first loaded,
the menus display in their entirety then collapse (there is visible motion
on the browser screen). Is there any way to prevent this so the menus come
up in their final form?
Set that state in the CSS....

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 16 '07 #4
"Randy Webb" <Hi************@aol.comwrote in message
news:o_********************@telcove.net...
>
Set that state in the CSS....
Um .... I actually don't have a CSS. It is all done inline for simplicity.

???

Thanks for all the help.

Dave.
Jun 17 '07 #5
David T. Ashley wrote:
"Randy Webb" <Hi************@aol.comwrote in message
news:o_********************@telcove.net...
>Set that state in the CSS....

Um .... I actually don't have a CSS. It is all done inline for simplicity.

???
Um... add one (inline even)? For example:

<style type="text/css" media="screen">
/* styles */
</style>

1. Firstly, drop the TABLE in lieu of a nice semantic UL (or something
else, unless you are using tabular data). You could then apply:

ul li { display: none; }

This would effectively hide all the LIs. Then your script could:

var LIs = document.getElementsByTagName('li');
for (var i = 0, l = LIs.length; i < l; i++) { LIs.style.display = 'block'; }

2. You could then just have a link above the UL that calls your
functions, or perhaps, possibly better, use a generic style to hide all
the LIs, and have a class:

ul li.show { display: block; }

Then your UL could look like this:

<ul>
<li class="show">Click Me</li>
<li>stuff 1</li>
<li>stuff 2</li>
<li>stuff 3</li>
</ul>

There is probably fifty more ways to do this, you are limited only by
your creativity I suppose.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jun 17 '07 #6
"-Lost" <ma****************@techie.comwrote in message
news:S6******************************@comcast.com. ..
David T. Ashley wrote:

Um... add one (inline even)? For example:
The solution that seemed to work was this:

<table id="sailboats" border="0" style="display:none">

This seems to behave the same as the object.style.display method/attribute.

Thanks for all the help.

--
David T. Ashley (dt*@e3ft.com)
http://www.e3ft.com (Consulting Home Page)
http://www.dtashley.com (Personal Home Page)
http://gpl.e3ft.com (GPL Publications and Projects)
Jun 17 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Dennis Allen | last post: by
2 posts views Thread by develeigh | last post: by
5 posts views Thread by gdesou | last post: by
4 posts views Thread by David T. Ashley | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.