473,324 Members | 2,400 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,324 software developers and data experts.

Tree Menu Help

Jo
I don't know if this can be done.. But here is what i am trying to
do...
I have a tree menu on a frameless page. I have the menu on the right
hand side and a CGI web form post on the left. When i Post a form and
it displays a new html page i would like to see a different branch
expaned on the tree menu and close (who be a bonus) the other one
that is open.
Jul 20 '05 #1
2 5810
Jo wrote:
I have a tree menu on a frameless page. I have the menu on the right
hand side and a CGI web form post on the left. When i Post a form and
it displays a new html page i would like to see a different branch
expaned on the tree menu and close (who be a bonus) the other one
that is open.


This depends on how your menu is implemented; basically you should just
analyze the querystring and expand the section (and parent sections) in
which a link appears to match the URL.

Here's a quick example working fine on IE6, Mozilla 1.6a and Opera 7.21,
with a simple menu. Just copy-paste it into two files and name them
"where1.html" and "where8.html", then run "where1.html" and change the
"1" to "8" in the URL.
<style type="text/css">
input {background:transparent;border:1px solid;height:1.5em;}
div#menu{
border:thin outset;
background:transparent; color:#777;
font-family:Book Antiqua, serif;
position:absolute;right:10%;top:10%;
width:10em;
}
div#menu a {color:#777;text-decoration:none;}
div#menu a:hover {color:#bbb;}
div#menu ul {list-style-type:none;margin:0 1em;padding:0;}
div#menu span {font-weight:700;}
div#menu span:hover{cursor:pointer;}
</style>

<script type="text/javascript">
var setMenuBehavior=function(){
var d=document;
var container=null;

function isSupported(el){
return !!(d.getElementById && d.getElementsByTagName &&
el ?
el.nodeName && typeof el.parentNode!="undefined" :
true);
}

function isVisible(el){return el.style.display!="none";}
function setVisible(el,bVis){el.style.display=bVis?"":"none ";}
function setToggleFor(menu){
return function(evt){setVisible(menu, !isVisible(menu));}
}

function clean(){
var spans=container.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++)
spans[ii].onclick=null;
}

return function(containerID){
var spans, el, links, refhref;
if(isSupported()&&
(container=d.getElementById(containerID))&&
isSupported(container)){

//set the behaviors
spans=container.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++){
el=spans[ii];
while(el&&el.nodeName.toLowerCase()!="ul") el=el.nextSibling;
if(el){
spans[ii].onclick=setToggleFor(el);
setVisible(el, false);
}
}

//clean sailing
if(typeof window.onunload=="function"){
window.onunload=function(oldHandler, newHandler){
this.onunload=function(evt){newHandler();oldHandle r();}
}(window.onunload, clean);
}else
window.onunload=clean;

//show the current position
refhref=location.href.match(/([^\/]+)\??[^\/]+$/)[1];
links=container.getElementsByTagName("a");
for(var j=0; j<links.length; j++){
if(links[j].href.indexOf(refhref)!=-1){//link found
el=links[j].parentNode;
while(el && el.id!=containerID){
if(el.nodeName.toLowerCase()=="ul") setVisible(el, true);
el=el.parentNode;
}
break;
}
}
}
}
}();
</script>

<form action="#"
method="post"
onsubmit="this.action=this.elements['where'].value;return true">
<fieldset>
<legend>Where do you want to sail?</legend>
<input type="text" title="Where???" name="where">
<input type="submit" value="Go!">
</fieldset>
</form>

<div id="menu">
<ul id="menu1">
<li><a href="where1.html">Where 1</a></li>
<li><a href="where2.html">Where 2</a></li>
<li>
<span>Menu 2</span>
<ul id="menu2">
<li><a href="where3.html">Where 3</a></li>
<li><a href="where4.html">Where 4</a></li>
</ul>
</li>
<li>
<span>Menu 3</span>
<ul id="menu3">
<li><a href="where5.html">Where 5</a></li>
<li><a href="where6.html">Where 6</a></li>
<li>
<span>Menu 4</span>
<ul id="menu4">
<li><a href="where7.html">Where 7</a></li>
<li><a href="where8.html">Where 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
setMenuBehavior("menu");
</script>
HTH
Yep.
Jul 20 '05 #2
Yann-Erwan Perio wrote:
Here's a quick example working fine on IE6, Mozilla 1.6a and Opera 7.21,
with a simple menu. Just copy-paste it into two files and name them
"where1.html" and "where8.html", then run "where1.html" and change the
"1" to "8" in the URL.


I've been a little bit sloppy with the provided script, so I've written
another version; it remains quite simple (no object orientation and few
common menu features) but the code is a bit more satisfactory.
<style type="text/css">
div#menu{
border:thin outset;
background:transparent; color:#777;
font-family:Book Antiqua, serif;
position:absolute;right:10%;top:10%;
width:10em;
}
div#menu a {color:#777;text-decoration:none;}
div#menu a:hover {color:#bbb;}
div#menu ul {list-style-type:none;margin:0 1em;padding:0;}
div#menu span {font-weight:700;cursor:hand;cursor:pointer;}
</style>

<script type="text/javascript">
var setMenuBehavior=function(){

function falseFunction(){return false;}
function isVisible(el){return el.style.display!="none";}
function setVisible(el,bVis){
if(bVis){
el.style.display="";
/*@cc_on@*/
/*@if (@_jscript_version >= 5)
try{
el.style.visibility="hidden";
if(typeof el.filters!="undefined") {
if(el.filters.length==0){
el.style.zoom="1";
el.style.filter=
"progid:DXImageTransform.Microsoft.Fade(duration=0 .3)";
}
el.filters[0].Apply();
el.style.visibility="visible";
el.filters[0].Play();
}
}catch (ex){
el.style.visibility="visible";
}
@end @*/
}else
el.style.display="none";
}
function setToggleFor(menu){
return function(evt){ setVisible(menu, !isVisible(menu)); }
}

function clean(menuDiv){
var spans=menuDiv.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++){
spans[ii].onclick=null;
spans[ii].onselectstart=null;
}
}

function setEvt(obj, evt, func){
if(obj[evt]) {
obj[evt]=function(f,g){
return function(){
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
} else
obj[evt]=func;
}

return function(containerID){
var d=document, bCanRun=false;
var spans, container, el, links, ref;

// test if the script can run
if(d.getElementById && d.getElementsByTagName){
container=d.getElementById(containerID);
if(container && container.nodeName &&
typeof container.parentNode!="undefined" &&
typeof container.nextSibling!="undefined"){
bCanRun = true;
}
}

if(bCanRun){
//set the behaviors for the submenu labels
spans=container.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++){
el=spans[ii];
while(el&&el.nodeName.toLowerCase()!="ul") el=el.nextSibling;
if(el){
setEvt(spans[ii], "onclick", setToggleFor(el));
setEvt(spans[ii], "onselectstart", falseFunction);
setVisible(el, false);
}
}

//clean sailing
setEvt(window, "onunload", function(evt){clean(container);});

//show the current position
ref=location.href.match(/([^\/]+)\??[^\/]+$/)[1];
links=container.getElementsByTagName("a");
for(var j=0; j<links.length; j++){
if(links[j].href.indexOf(ref)!=-1){//link found
el=links[j].parentNode;
while(el && el.id!=containerID){
if(el.nodeName.toLowerCase()=="ul") setVisible(el, true);
el=el.parentNode;
}
break;
}
}
}
}
}();
</script>

<div id="menu">
<ul id="menu1">
<li><a href="where1.html">Where 1</a></li>
<li><a href="where2.html">Where 2</a></li>
<li>
<span>Menu 2</span>
<ul id="menu2">
<li><a href="where3.html">Where 3</a></li>
<li><a href="where4.html">Where 4</a></li>
</ul>
</li>
<li>
<span>Menu 3</span>
<ul id="menu3">
<li><a href="where5.html">Where 5</a></li>
<li><a href="where6.html">Where 6</a></li>
<li>
<span>Menu 4</span>
<ul id="menu4">
<li><a href="where7.html">Where 7</a></li>
<li><a href="where8.html">Where 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
setMenuBehavior("menu");
</script>
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: johkar | last post by:
I am confused on childNodes or children. When you have nested lists, I would think it would all be one list in the Dom, this doesn't seem to be the case. So how do you traverse an unordered list?...
18
by: Andromeda | last post by:
I've been trying to add a tree menu to my website with some luck (more or less). I came across a script on simplythebest.net, but I seem to be having a problem with it... and since they have no...
0
by: Tree menu using XML | last post by:
I have one XML file that has nodes and sub node and each and every node has the attribute call visible if its value is true then diplay this node else don't display thid node, but this condition i...
4
by: Tarique Jawed | last post by:
Alright I needed some help regarding a removal of a binary search tree. Yes its for a class, and yes I have tried working on it on my own, so no patronizing please. I have most of the code working,...
1
by: w.p. | last post by:
Hello! I have some trouble with my GUI. I have left panel with foldpanelbar, but i need one item but not collapsed - simple button. I split my left panel into two foldpanelbars with one button...
0
by: preetkanwal0678 | last post by:
Hello all, Am working on PYTHON +BRANWAVE(framework) Actually am Trying 2 make a tree menu using d both. Am not able 2 target the (.tmpl) files and not getting how 2 make frames in...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.