473,387 Members | 1,597 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,387 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 2652
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: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
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: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
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
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
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...

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.