menu tree ... please help with HTML

liunx

Guest
I have created my own version of a folding menu tree for our application. I would like to use my own because our application potentially has BILLIONS of nodes. <br />
<br />
I've got one problem ... <br />
<br />
My menu almost looks like an Windows Explorer menu ... with one exception. If the user opens a folder (and your on the second level), there is no "dotted" line to the higher menu node beneath. <br />
<br />
I WOULD LIKE TO HAVE THE DOTTED LINE & DON'T WANT TO USE AN IMAGE TO DO IT. <br />
<br />
A text representation is as follows: <br />
<br />
OPENNODE level 0<br />
| <br />
|__OPENNODE level 1<br />
| | <br />
| |_ file level 1<br />
| |_ file level 1<br />
| <br />
|__file level 0<br />
<br />
^ The line that the ^ is pointing to is the one that I'm currently <br />
missing. <br />
<br />
HOW COULD I DO THE VERTICAL LINE IN HTML? <br />
Thank you!<br />
<br />
<br />
__________________<br />
John<!--content-->As they said at the other forum. without seeing the code all one could suggest is to use a dotted or dashed border on a DIV or whatever you've got. ;)<!--content-->Ok ... <br />
Here is the code. I do not mind changing the code to a different structure as long as I can keep my div ids in tact.<br />
<br />
Thanks,<br />
John<br />
<br />
<br />
openImage.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/encodedURL">http://www.webdeveloper.com/forum/archi ... encodedURL</a><!-- m --> + "image/openjtree.gif";<br />
openImageMinus.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/encodedURL">http://www.webdeveloper.com/forum/archi ... encodedURL</a><!-- m --> + "image/openjtreeminus.gif";<br />
closedImagePlus.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/encodedURL">http://www.webdeveloper.com/forum/archi ... encodedURL</a><!-- m --> + "image/closedjtreeplus.gif";<br />
closedImageMax.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/encodedURL">http://www.webdeveloper.com/forum/archi ... encodedURL</a><!-- m --> + "image/closedjtreemax.gif"; <br />
<br />
<br />
this.id = this.toString(); <br />
var branchString ='';<br />
<br />
branchString += '<div id=OB'+this.id+'><table><tr>';<br />
<br />
if (this.level > 0)<br />
branchString += '<td width=8>&nbsp;</td>';<br />
<br />
branchString += '<td class=innerlevel2><span class="branch" onClick="showBranch(\''+this.id+'\')">'; <br />
branchString += '<img src=http://www.webdeveloper.com/forum/archive/index.php/"'; <br />
if (this.level == maxLevels) branchString += closedImageMax.src;<br />
else branchString += closedImagePlus.src; <br />
<br />
branchString += '" id="I' + this.id + '"></span>'; <br />
<br />
if (this.level > 0) {<br />
branchString += '<INPUT type="checkbox" onclick="clickBranch(\''+ this.id+'\');" ';<br />
branchString += ' id=cb'+this.id + ' value=\''; <br />
branchString += this.cb_code + '\' ';<br />
branchString += ' />' ;<br />
}<br />
branchString += " " + this.description;<br />
branchString += '<BR><DIV style="display:';<br />
<br />
branchString += 'inline;" id=div'+this.id+'></DIV>';<br />
branchString += '<span class="leaf" id="';<br />
branchString += this.id + '">';<br />
branchString += '</span>';<br />
branchString += '</td>';<br />
branchString += '</tr></table>';<br />
branchString += '</div>';<!--content-->
 
Back
Top