menu tree ... please help with HTML

[JohnTirone]

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.

I've got one problem ...

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.

I WOULD LIKE TO HAVE THE DOTTED LINE & DON'T WANT TO USE AN IMAGE TO DO IT.

A text representation is as follows:

OPENNODE level 0
|
|__OPENNODE level 1
| |
| |_ file level 1
| |_ file level 1
|
|__file level 0

^ The line that the ^ is pointing to is the one that I'm currently
missing.

HOW COULD I DO THE VERTICAL LINE IN HTML?
Thank you!


__________________
John

[meow]

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. ;)

[JohnTirone]

Ok ...
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.

Thanks,
John


openImage.src = encodedURL + "image/openjtree.gif";
openImageMinus.src = encodedURL + "image/openjtreeminus.gif";
closedImagePlus.src = encodedURL + "image/closedjtreeplus.gif";
closedImageMax.src = encodedURL + "image/closedjtreemax.gif";


this.id = this.toString();
var branchString ='';

branchString += '<div id=OB'+this.id+'><table><tr>';

if (this.level > 0)
branchString += '<td width=8>&nbsp;</td>';

branchString += '<td class=innerlevel2><span class="branch" onClick="showBranch(\''+this.id+'\')">';
branchString += '<img src="';
if (this.level == maxLevels) branchString += closedImageMax.src;
else branchString += closedImagePlus.src;

branchString += '" id="I' + this.id + '"></span>';

if (this.level > 0) {
branchString += '<INPUT type="checkbox" onclick="clickBranch(\''+ this.id+'\');" ';
branchString += ' id=cb'+this.id + ' value=\'';
branchString += this.cb_code + '\' ';
branchString += ' />' ;
}
branchString += " " + this.description;
branchString += '<BR><DIV style="display:';

branchString += 'inline;" id=div'+this.id+'></DIV>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
branchString += '</span>';
branchString += '</td>';
branchString += '</tr></table>';
branchString += '</div>';