473,400 Members | 2,163 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,400 software developers and data experts.

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 2653
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Dennis Allen | last post by:
Hi. I've been using a simple css based outline on my web site. A section of hyperlinks within <div class>, imitating open/closed folders. Problem. Since the folder is on the lower left of the...
2
by: develeigh | last post by:
Hi, I have got this Collapsible Menus, it uses combination of JavaScript and CSS. Javascript when executed changes the inital CSS settings to make the sub menu visable function...
1
by: mike | last post by:
The JavaScript below works fine for expandable/collapsible menus in IE, but Firefox 1.5 complains: "Error: loc.parentNode.nextSibling has no properties" and highlights the line...
5
by: Jonathan | last post by:
Hello All, I am in the process of creating a 2/3 level collapsible/exspanible menu (called "nav") where users can click on a category and have the submenus appear beneath it and so on (allow...
5
by: gdesou | last post by:
I'm after a grid or list able to display hierarchical items and that is able to collapse to parent items. I Google it for possible solutions but I only get commercial products or reference to...
4
by: David T. Ashley | last post by:
In my application, I'm going to have a navigation pane (i.e. frames) on the left that links to pages that display in the main window. The list of choices varies by user, but once a user logs in,...
1
by: mahesh123 | last post by:
I am using Collapsible Panel in my project.But in other form of my project i want to use collapsible panel inside other Collapsible panel.Is it possible. Both panels are to be dinamic.Is it possible...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.