Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Data Tree

Posted on 1998-07-23
Last Modified: 2013-12-25
I want to know with what product I can build a data tree like the one MSDN has on a WebPage, if is there a code example for it....
Question by:juanryahoo
  • 4
  • 4
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1858633
Do you mean an outliner? Something that expands when clicked
like in windows explorer

+ item1
+ item2
- expanded item3
  + subitem3.1
    subitem3.2, no sub here...
  + subitem3.3

If that is the case, I have a couple


Expert Comment

ID: 1858634
You will need to use either an ActiveX Control or a Java Control there is nothing intristic with HTML that will allow you to do it.

Author Comment

ID: 1858635
Yes mplungjan... that's what I'm looking for... Can I use it with ASP ? ? ? Can I see the outliner with Netscape and Internet Explorer? ? ?
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

LVL 75

Expert Comment

by:Michel Plungjan
ID: 1858636
Reject Jagar's incomplete and wrong answer, and I will post a JavaScript outliner that works with IE3.0 and up and NS2.02 and up. No activeX and no Java so compatible with 16 bit browsers too.

If you wish to use ASP to generate it, no problem.


Author Comment

ID: 1858637
LVL 75

Accepted Solution

Michel Plungjan earned 100 total points
ID: 1858638
If you have problems cutting and pasting the code below, give me you email address and I will send it.

<TITLE>Site map</TITLE>
<!-- // Hide
This outliner is copyright 1997-1998 Michel Hamre Plungjan
Feel free to use it, but please tell me if you do.
I expect a link to my site in return.
I will probably be available for comment through sitemap@plungjan.demon.nl
Note: I have tried to be consistent with quotes in this source:
   single quotes around JavaScript strings and
   double quotes around HTML attributes.
Usage: Only modify the code before the *************************
h=location.href;(p=h.lastIndexOf('/'))>0?homedir=h.substring(0,p+1):homedir=''; // do not modify
// Colour defs:
TextColor = '#000000';
BGColor   = '#8099B2';
LinkColor = '#FFFFFF';
VLinkColor= '#FFFF00';
ALinkColor= '#00FF00';

// Image defs, just change the name and possibly the width and height of the gif files:
CollapsePic = '<IMG SRC="' + homedir + 'minus.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="- Collapse">';
ExpandPic   = '<IMG SRC="' + homedir +  'plus.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="+ Expand">';
//BulletPic = '<IMG SRC="' + homedir +   'bul.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="o">';
BulletPic   = '&#160;o&#160;&#160;';   // Quicker than a gif

// Font defs (JCS enhancement):
Sans  = 'Arial,Verdana,Lucida Sans,MS Sans Serif,Helvetica,Geneva,Swiss,Sans Serif';
Serif = 'Times New Roman,Times Roman,Times,Roman,Chicago,Serif';
TheFace = Sans; // change this if needed

function outline() {

/* Each branch consist of a name, a title, an html page (optional) and an last updated date (optional)
   if the html page is null, there will be no link on the titel of that branch */

  root = new branch('root','Home','index.htm','Oct 13 17:30');

     root.addKid(subbranch1 = new branch('subbranch1','This&#160;is&#160;subbranch1','subbranch1.htm','Jul 27 17:19'));
     root.addKid(subbranch2 = new branch('subbranch2','This&#160;is&#160;subbranch2',null,'Jul 27 17:19')); // note this has no link
        subbranch2.addKid(subbranch2a = new branch('subbranch2a','This&#160;is&#160;under&#160;subbranch2','sb2a.htm','Jul 27 17:19'));
        subbranch2.addKid(subbranch2b = new branch('subbranch2b','This&#160;is&#160;also&#160;under&#160;subbranch2','sb2b.htm','Jul 27 17:19'));
           subbranch2b.addKid(subbranch2b1 = new branch('subbranch2b1','This&#160;is&#160;under&#160;subbranch2b','sb2b1.htm','Jul 27 17:19'));
     root.addKid(subbranch3 = new branch('subbranch3','This&#160;is&#160;subbranch3','subbranch3.htm',  'Jul 27 17:19'));

  root.expanded = true; // use false to only show the top level when loading...
/********************* No need to modify below this line *************/
Indent = 3;Indents = 1; function IndentIt(IndentDelta) {Indents += parseInt(IndentDelta);if (Indents<1) Indents=1;IndentPic='<BR>';for (var i=1;i<Indents*Indent;i++) IndentPic+='&#160;'; return;} IndentIt('0');
Page = '';Branches = 0;BranchObj = new Object;BranchObj[0]=0;function branch(objName, name, webaddr, modified) {this.objName=objName;this.expanded=false;this.name=name;this.webaddr=webaddr;this.modified=modified;this.kid=null;this.nextPeer=null;this.addKid=addKid;this.addPeer=addPeer;this.draw=draw;BranchObj[++Branches]=this;}
function addPeer(item) {if(this.nextPeer) this.nextPeer.addPeer(item);else this.nextPeer=item;} function addKid(item) {if(this.kid) this.kid.addPeer(item);else this.kid=item;}
function expand(item) {if(!root) outline();item.expanded=true;dr();return Page;} function collapse(item) {if(!root) outline();item.expanded=false;dr();return Page;}
function draw() {if (!this.kid) { wr('\n'+IndentPic+BulletPic);if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;\">'+this.name+'</A>'); else wr(this.name); if(this.nextPeer) this.nextPeer.draw(); else {IndentIt('-1'); return;} } else { if (this.expanded) { wr('\n'+IndentPic+'<A HREF="javascript:top.collapse(top.'+this.objName+');" onMouseover="status=\'- Collapses\'; return true;">'+CollapsePic+'</A>');
if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;">'+this.name+'</A>');else wr(this.name);IndentIt('+1');this.kid.draw();if(this.nextPeer) this.nextPeer.draw();IndentIt('-1'); } else {wr('\n' + IndentPic + '<A HREF="javascript:top.expand(top.'+this.objName+');" onMouseover="status=\'+ Expands\'; return true;">'+ExpandPic+'</A>');if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;">'+this.name+'</A>');
else wr(this.name);if(this.nextPeer != null) this.nextPeer.draw();IndentIt('-1'); }}}
function exall() {for (var i=1, n=Branches;i<=n;i++) {BranchObj[i].expanded = true;}dr();} function wr(text){Page += text + '\n';}
function dr(){Page = '<HTML><HEAD><BASE HREF="' + homedir + '"></HEAD>\n';wr('<BODY TEXT="'+TextColor+'" BGCOLOR="'+BGColor+'" LINK="'+LinkColor+'" VLINK="+VLinkColor+" ALINK="+ALinkColor+">'); wr('<FONT FACE="' + TheFace + '">'); Indents = 1; IndentIt('0')  root.draw(); wr('</FONT></BODY></HTML>');}
function initIt() { outline(); dr(); top.out.document.open(); top.out.document.write(Page); top.out.document.close(); top.out.defaultStatus = 'Sitemap. + expands and - collapses the tree';}
// - End of JavaScript - -->
<FRAMESET COLS="100%,*" FRAMEBORDER=0 BORDERCOLOR="#888888"><!-- modify the % to less than 100 and remove the underscore from _doc to keep the outliner and target visible -->
<FRAME NAME="out" SRC="javascript:parent.initIt();" MARGINWIDTH="2" MARGINHEIGHT="2">
<FRAME NAME="_doc" SRC="javascript:' '">
<BODY TEXT="#000000" BGCOLOR="#888888" LINK="#ffffff" VLINK="#00ffff" ALINK="#000666">
<FONT FACE="Arial,Verdana,Lucida Sans,MS Sans Serif,Helvetica,Geneva,Swiss,Sans Serif">
I doubt very much you can see this unless you are hacking my site or reading the source...


Author Comment

ID: 1858639
mplungjan: Maybe I the file has corrupted or I don´t know how to put it to work, but the following two erros appears in Netscape 4.05:

1) parent.initIt is not a function

2) illegal character
   BGColor   = '#8099B2';

My e-mail is: juanr@yahoo.com

LVL 75

Expert Comment

by:Michel Plungjan
ID: 1858640
Quite possible - it seems some weird characters sneak in when cutting and pasting here...
I will send it to you immediately


Author Comment

ID: 1858641
 Ok... I did receive the file, and it works good (only a ";" was missing) Thanks.....

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

837 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question