By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,214 Members | 2,038 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,214 IT Pros & Developers. It's quick & easy.

Collapsible Hierarchical Menus

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
"-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.