Tree for documentation : Documentation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Documentation »

 

Tree for documentation




<html>
<head>
<style type="text/css">
/**
 colors, backgrounds, borders, link indication 
**/

body {
  background: #fff;
  color: #000;
}

#main {
  border-top: 1px solid #999;
}

#banner {
  background-color: #fff
}

#banner {
  border-top: 1px solid #369;
}

#poweredby {
  display: block;
  float: left;
  height: 38px;
  width: 102px;
  background: url(../treeimages/poweredb.gifno-repeat;
  border-bottom: none;
}

#ee, #cn {
  border: none;
}

#collabnet {
  background-color: #222
  color: #fff; 
  border-bottom: 1px solid #000;
}

#cnlogo {
  display: block;
  height: 15px;
  width: 150px;
  background: url(../treeimages/product_.gifno-repeat;
  border-bottom: none;
  vertical-align: top;
}

/*Tab sets*/

.tabs td, .tabs th {
  background-image: url(../treeimages/nw_min00.gif);
  background-repeat: no-repeat;
}

.tabset {
  background-color: #eee;
  border-bottom: 1px solid #888;
  border-right: 1px solid #888;
}

.tabset .tabset {
  border: 1px solid #ccc;
  border-top: 5px solid #ddd;
}

.tabset .tabs th {  
  background-color: #ddd;
  border-left: 1px solid #eee;
}

.tabset .tabs td {
  border-left: 1px solid #eee;
}

.tabset .tabs td, .tabset  .tabs th {
  background-image: url(../treeimages/nw_min_e.gif);
  background-repeat: no-repeat;
}

/*Navigation*/

.navgroup dd li, #projecttools div, #communitytools div {
  background-image: url(../treeimages/strich00.gif);
  background-repeat: no-repeat;
  background-position: .5em .5em;
}

.navgroup dd li.header {
  background-image: none;
}

.navgroup {
  background: #efefef;
}

.navgroup dt {
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  background: #ddd;
  color: #555;
}

.navgroup dd {
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

#helptext dt {
  background-image: url(../treeimages/icon_hel.gif);
  background-repeat: no-repeat;
  background-position: 97%;
}

#helptext {
  background-color: #ffc;
}

#helptext dt {
  border-bottom: 1px solid #996;
  border-right: 1px solid #996;
  background-color: #cc9;
}

#helptext dd {
  border-bottom: 1px solid #cc9;
  border-right: 1px solid #cc9;
}

#mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  background-color: #ddd;
  border: none;
}

.navgroup dl dt {  
  background-color: #fff !important;
}

.navgroup dl dd {  
  border: none !important;
}

#mytools dd, #projecttools dd, #admintools dd, #communitytools dd {
  background-color: #fff;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid #999;
}

#mytools, #projecttools, #admintools, #communitytools {
  background-color: #ddd;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

/*Functnbars*/

.functnbar {
  background-image: url(../treeimages/nw_maj_r.gif);
  background-repeat: no-repeat;
}

.functnbar, .functnbar2 {
  background-color: #aaa;
}

.functnbar2 {
  background-image: url(../treeimages/sw_maj_r.gif);
  background-repeat: no-repeat;
  background-position: bottom left;
}

.functnbar3 {
  background-color: #ddd;
  background-repeat: no-repeat;
  background-image: url(../treeimages/sw_maj_r.gif);
  background-position: bottom left;
}

.functnbar4 {
  background-color: #888;
}

.tabset .functnbar {
  background-image: url(../treeimages/nw_maj_s.gif);
}

.tabset .functnbar2, .tabset .functnbar3 {
  background-image: url(../treeimages/sw_maj_s.gif);
}

/*Links*/

a:link, #navcol a:link, #navcol a:visited, #bodycol a:link, #tasknav a:link, .tasknav a:visited {  
  color: #03c;
}

a:visited, #helptext a:visited, #bodycol a:visited {
  color: #609;


.tasknav a:visited {
        color: #03c !important;
}

a:link.selfref, a:visited.selfref {
  color: #555 !important;
  text-decoration: none;
}

a:active, a:hover, #navcol a:active, #navcol a:hover {
  color: #f30 !important;
}

.functnbar4 a, .functnbar4 a:link, .functnbar4 a:visited {
  color: #fff !important;
}

#navcol a, #breadcrumbs a {
  text-decoration: none;
}

/*Tables*/

.a td, .a, #rightcol div.siteinfo .a {
  background: #ddd;
}

.b td, .b, #rightcol div.siteinfo .b {
  background: #efefef;
}

table td.c, .c {
  background: #bbb;
}

th, .docs th {
  background-color: #bbb;


.axial th {
  background-color: #ddd;
  color: black;
}

body .grid td {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: transparent;
}

.legend th, .bars th {
  background-color: #fff;
}

/*Messaging*/

.errormessage, .warningmessage, .donemessage, .infomessage {
  border-top: 5px solid #900;
  border-left: 1px solid #900;
  background-image: url(../treeimages/icon_err.gif);
  background-repeat: no-repeat;
  background-position: 5px 1.33em;
}

.warningmessage {
  background-image: url(../treeimages/icon_war.gif);
  border-color: #c60;
}

.donemessage {
  background-image: url(../treeimages/icon_suc.gif);
  border-color: #090;
}

.infomessage {
  background-image: url(../treeimages/icon_inf.gif);
  border-color: #069;
}

.errormark, .warningmark, .donemark, .infomark {
  background: url(icon_ers.gifno-repeat;
}

.warningmark {
  background-image: url(icon_was.gif);
}

.donemark {
  background-image: url(icon_sud.gif);
}

.infomark {
  background-image: url(icon_ing.gif);
}

/*Widgets*/

.colbar {
  background: #eee;
  border-color: #999 #eee #eee #999;
  border-width: 1px;
  border-style: solid;
}

#breadcrumbs {
  border-top: 1px solid #fff;
  background-color: #ccc;
}

fieldset {
    border-color: #ccc #999 #999 #ccc;
    border-width: 1px;
    border-style: solid;
}

img {
  border: none;
}

.expandedwaste {
  background: url(expanded.gifno-repeat;
  background-position: .2em .2em;
}

.collapsedwaste {
  background: url(collapse.gifno-repeat;
  background-position: .2em .2em;
}

.filebrowse .expanded, .filebrowse-alt .expanded {
  background-image: url(expanded.gif);
  background-repeat: no-repeat;
  background-position: .2em .2em;
}

.filebrowse .collapsed, .filebrowse-alt .collapsed {
  background-image: url(collapse.gif);
  background-repeat: no-repeat;
  background-position: .2em .2em;
}

.filebrowse .leafnode, .filebrowse-alt .leafnode {
  background-image: url(icon_fol.gif);
  background-repeat: no-repeat;
}

.filebrowse .leaf, .filebrowse-alt .leaf {
  background-image: url(icon_doc.gif);
  background-repeat: no-repeat;
}

.sortup {
  background: url(icon_sor.gifno-repeat;
}

.sortdown {
  background: url(icon_sos.gifno-repeat;
}

a.collapsedwaste {
  background: url(collapse.gifno-repeat;
  border: none;
}

a.expandedwaste, a.collapsedwaste, a.sortdown, a.sortup, a.expanded, a.collapsed, a.leaf, a.leafnode {
  border: none;
}

.docinfo {
  background: url(icon_dod.gifno-repeat;
}

.dirinfo {
  background: url(icon_fom.gifno-repeat;
}

.helplink {
  cursor: help;
}

#topmodule {
  background-color: #ddd;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aaa;
}

#topmodule #projectname {
  border-right: 2px solid #aaa;
}

#topmodule #issueid {
  border-right: 1px solid #aaa;
}

#topmodule td {
  padding: 2px 8px;
}

.cvsdiff, .cvsblame {
  background-color: #ccc;
}

.cvsdiffadd {
  background-color: #afa;
}

.cvsdiffremove {
  background-color: #faa;
}

.cvsdiffchanges1, .cvsdiffchanges2 {
  background-color: #ff7;
}

#rightcol div.www, #rightcol div.help {
  border: 1px solid #ddd;
}

#rightcol div.siteinfo h2 {
  background-color: #bbb !important;
}

.band1 {
  color: #fff;
  background-color: #663;
}

.band2 {
  color: #fff;
  background-color: #66C;
}

.band3 {
  background-color: #C99;
}

.band4 {
  background-color: #CFF;
}

.band5 {
  color: #fff;
  background-color: #336;
}

.band6 {
  color: #fff;
  background-color: #966;
}

.band7 {
  background-color: #9CC;
}

.band8 {
  background-color: #FFC;
}

.band9 {
  color: #fff;
  background-color: #633;
}

.band10 {
  color: #fff;
  background-color: #699;
}

.band11 {
  background-color: #CC9;
}

.band12 {
  background-color: #CCF;
}

.band13 {
  color: #fff;
  background-color: #366;
}

.band14 {
  color: #fff;
  background-color: #996;
}

.band15 {
  background-color: #99C;
}

.band16 {
  background-color: #FCC;
}

.red {
  color:#f00;
  }

.green {
  color:#060;
}

.blue {
  color:#036;
}

.purple{
  color:#339;
}

  
/*Headings*/

h1 em {
  color: #777;
}

.h3 h3, .h4 h4 {
  background-color: #fff;
}

.tabset .h3 h3, .tabset .h4 h4 {
  background-color: #eee;
}

.h2 {
  border-left: 1px solid #333;
}

.h3, .h4 {
  border-top: 3px solid #666;
  border-left: none;
}

.h4 {
  border-top: 1px solid #666;
  border-left: none;
}

.h2 h2 {
  color: #fff;
  background-color: #333;
}

.h2 h2 a:link, .h2 h2 a:visited {
  color: #fff !important;
  text-decoration: underline;
}

/*Tabs*/

.tabs th {
  border-right: 1px solid #333;
  background-color: #eee;
  color: #fff;
  border-left: 1px solid #fff;
}

#toptabs th {
  background-color: #ddd;
}
  
.tabs td {
  background-color: #999;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

.tabs th, .tabs th a:link, .tabs th a:visited {
  color: #555 !important;
}

.tabs td, .tabs td a:link, .tabs td a:visited {
  color: #fff !important;
}

#toptabs {
  background-color: #fff;
  border-bottom: 6px solid #ddd;
}

/*Calendar*/

.calendarweek {
  background-color: #ccc;
}

.calendarweeklabel {
  background-color: #aaa;
}

.calendardays, calendarperiod {
  border: 1px solid #999;
}

.calendardays table, .calendarperiod table {
  background-color: #ccc;
  }

.calendarmonths {
  background-color: #9bf;
  border-color: #ccf #69c #69c #ccf;
  border-width: 1px;
  border-style: solid;
}

.calendartoday {
  background-color: #ee9;
  border-color: #999 #777 #69c #aaa;
  border-width: 1px;
  border-style: solid;
}

.periodax, .periodbx, .currentperiod {
  border-bottom: 1px solid #eee;
}

.periodax {
  background-color: #9cc;
}

.periodbx {
  background-color: #ac9;
}

.currentperiod, #today {
  background-color: #ee9;
}

.othermonthday, .othermonthday a {
  background-color: #ddd;
  color: #888;
}

.calendarday {
  background-color: #fff;
}

/** 
 font and text properties, exclusive of link indication, alignment, text-indent 
**/

body, input, select {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

code, pre {
  font-family: 'Andale Mono', Courier, monospace;
}

body, pre, code {
  font-size: x-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: small;
}

#bodycol, #bodycol table td, #bodycol table th {
  font-size: 95%;
  line-height:135%;
}

#bodycol table table td, #bodycol table table th {
  font-size: 100%;
}

/* a workaround for netscape 7 bug. has to come right after the previous line-height declaration */

input {
  line-height:100%;
}

h1 {
  font-weight: normal;
  font-size: medium;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: large;
}

h2, h3, h4, h1 small, #rightcol h2 {
  font-size: x-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: small;
}

.h4 h4, li.selection ul {
  font-weight: normal;
}

small, div#footer, #login, .tabs th, .tabs td, #bodycol .tabs th, #bodycol .tabs td,  #navcol, input, select, .paginate, .functnbar, .functnbar2, .functnbar3, .functnbar4, #breadcrumbs, .courtesylinks, .colbar, .tasknav, #sidebar, .legend, .bars, #rightcol div.www, #rightcol div.siteinfo /*may need to add div#footer table, #rightcol div.help */
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

.tabs td, .tabs th, dt, .tasknav .selfref, #login .username, .selection, .functnbar4 a, fieldset legend, .cumulative td, .rollupactivity td, #today {
  font-weight: bold;
}

h1 em {
  font-style: normal;
}

#banner h2 {
  font-size: 1.25em;
}

table {
  font-size: 1em;
}

del {
  text-decoration: line-through;
}

.tabs a {
  text-decoration: none;
}

caption {
  font-size: x-small;
}

caption em {
  font-weight: bold;
}

/** 
 box properties (exclusive of borders), positioning, alignments, list types, text-indent 
**/

#bodycol h1 {
  margin-top: .6em;
  margin-bottom: .5em;
}

p, ul, ol, dl, table.bars {
  margin-top: .67em;
  margin-bottom: .67em;
}

#bodycol {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  width: 100%;
  voice-family: ""}"";
  voice-family: inherit;
  width: auto;
}

html>body #bodycol {
  width: auto;
}

.h2 p, .h3 p, .h4 p, .h2 dt, .h3 dt, .h4 dt {
  margin-right: 7px;
  margin-left: 7px;
}

body {
  padding: 1em;
}

body.composite {
  margin: 0;
  padding: 0;
}

#login {
  float: right;
  text-align: right;
  white-space: nowrap;
}
  
#poweredby {
  margin: 0 8px 100px 0;
}

#collabnet {
  padding: 1px 7px;
}

#banner {
  padding: 8px;
}

/*Headings*/

h2 {
  margin-top: 0;
}

.h2 {
  margin-top: 1.67em;
}

h2, h3, h4 {
  margin-bottom: 0;
}

#banner h2 {
  margin: 0;
}

h2, h3, h4 {
  clear: both;
}

.h3 h3, .h4 h4 {
  margin: 0.75em;
  padding: 0 4px;
  position: relative;
  top: -.75em;
  display: inline;
  left: 0
}

div.h2 {
  margin: 1.5em 0 .67em;
}

.h2 {
  padding-left: 0.75em;
}

#banner h2 {
  padding: 5px  5px 0px 10px;  
}

.h3, .h4 {
  margin: 1.5em 0 .67em;
  padding: 0 0 .5em 0;
}

.h2 h2 {
    padding: 3px 3px 3px .65em;
  margin-right: 2px;
  margin-left: -0.75em;
  margin-bottom: 0.75em;
}

/*Widgets*/

form {
  margin: 0;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

.tasknav {
  margin-bottom: 1.33em;
}

#rightcol div.www {
  padding: 0 .5em;
}

div.a, div.b {
  margin: 2px 0;
  padding: 3px;
}

.functnbar, .functnbar2, .functnbar3, .functnbar4 {
  padding: 5px 1em;
  margin: .67em 2px;
}

.functnbar3 {
  padding: 3px 1em;
  margin-top: 0;
}

.functnbar4 {
  margin: 2px 2px 0px 2px;
    white-space: nowrap;
}

#topmodule {
  margin: -1px -2px -4px  
}

#topmodule td {
  vertical-align: middle;
}

.right {
  text-align: right !important;
}

.center {
  text-align: center !important;
}

body .stb {
  margin-top: 1em;
  text-indent: 0;
}

body .mtb {
  margin-top: 2em;
  text-indent: 0;
}

.courtesylinks {
  margin-top: 1em;
  padding-top: 1em;
}

dd {
  margin-bottom: .67em;
}

.tier1 {
  margin-left: 0;
}

.tier2 {
  margin-left: 1.5em;
}

.tier3 {
  margin-left: 3em;
}

.tier4 {
  margin-left: 4.5em;
}

.tier5 {
  margin-left: 6em;
}

.tier6 {
  margin-left: 7.5em;
}

.tier7 {
  margin-left: 9em;
}

.tier8 {
  margin-left: 10.5em;
}

.tier9 {
  margin-left: 12em;
}

.tier10 {
  margin-left: 13.5em;
}

.filebrowse .expanded, .filebrowse .collapsed {
  padding-left: 18px;
}

.filebrowse .leafnode, .filebrowse .leaf {
  padding-left: 20px;
}

.filebrowse-alt .expanded, .filebrowse-alt .collapsed, .filebrowse-alt .leaf, .filebrowse-alt .leafnode, .expandedwaste, .collapsedwaste, .sortup, .sortdown {
  /* hide from macie5*/
  float: left;
  /* resume */
  display: inline-block;
  height: 15px;
  width: 18px;
  padding-left: !important;
}

.filebrowse-alt .leaf, .filebrowse-alt .leafnode, .sortup, .sortdown {
  width: 20px;
}

.filebrowse ul, .filebrowse-alt ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.filebrowse ul ul, .filebrowse-alt ul ul {
  margin-left: 1.5em;
  margin-top: 0;
  padding-top: .67em;
}

.filebrowse li, .filebrowse-alt li {
  margin-bottom: .67em;
}

td.filebrowse h3 {
  margin-top: 0;
}

.alt, .hide {
  display: none;
}

fieldset {
  width: 100%;
  margin-bottom: 3px;
}

#breadcrumbs {
  padding: 2px 8px;
}

.fieldset {
  padding: .67em;
}

.colbar {
  margin: 2px;
  padding: 2px;
}

#footer 
  padding-left: 8px 
}

.selectiongroup {
  padding-left: 1.5em;
}

.inputgroup2 {
  padding-left: 3em;
}

.inputgroup3 {
  white-space: nowrap;
}

.removedbox {
  float: left;
  margin-right: 10px; 
}

.floatright {
  float: right;
}

div.strut7 {
  width: 7em;
}

div.strut8 {
  width: 8em;
}

div.strut13 {
  width: 13em;
}

div.strut14 {
  width: 14em;
}

.strut15 {
  width: 15em;
}

.printbreak {/* this may need to be .app .printbreak */
  border-top: 2px #000 solid;
}
  
.printbreak {   /* this may need to be .app .printbreak */
  margin-top: 20px;
}

div.printbreak {
  page-break-after: always !important;
}
  
.messagechild {
  padding-left: 34px;
}

.functnbar4 a {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

#rightcol div.siteinfo h2 {
  padding: 3px;
  margin-top: .5em;
}
  
/*Tab sets*/

#toptabs {
  margin: 0;
  padding-top: .67em;
  padding-left: 8px; 
}

.tabs {
  margin-top: .67em;
  margin-right: 2px;
  margin-left: 8px;
  padding-left: 8px;
}

.h2 .h3 .tabs , .h2 .h4 .tabs {
  margin-left: 1.75em;
}

#toptabs .tabs {
  margin-left: 0px;
}
  
#toptabs .tabs th, #toptabs .tabs td, .tabs td, .tabs th {
  padding: 3px 9px;
}

.tabset, .tabset .tabset {
  padding: .67em;
}

/*Navigation*/

.navgroup dd li.header {
  margin-top: 4px;
}

.navgroup li {
  margin-top: 7px;
  padding-left: 10px;
  list-style-type: none;
}

.navgroup, .navgroup dt, .navgroup dd, .navgroup ul, .navgroup li {
  margin: 0;
  padding: 0;
}

.navgroup li {
  display: block;
}

.navgroup {
    margin-top: 2px;
  margin-bottom: 6px;
}

.navgroup dd {
  padding: 4px 4px 4px 0;
}

.navgroup dt {
  padding: 4px;
}

.navgroup dl dt {
  padding: 0;
}

.navgroup dd li, .navgroup dd div {
  padding-bottom: .3em;
  padding-left: 1em;
}

.navgroup dd li li {
  margin-top: .3em;
  padding-bottom: 0;
}

#navcol, #navcol .strut {
  width: 15em;
}

#mytools dd, #projecttools dd, #admintools dd, #communitytools dd {
  padding-top: .33em;
}

#mytools, #projecttools, #admintools, #communitytools {
  padding: 0 6px 6px 6px;
  margin: -1px 0 6px -2px;
}

#mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  padding-left: 2px;
}

.navgroup dl dt {
  padding-left: !important;
}

/*Tables*/

th, td {
  padding: 1px 2px 1px 2px;
}

th, td {
  text-align: left;
  vertical-align: top;
}

.axial th, .axial th .strut {
  text-align: right;
}

.axial td th {
  text-align: left;
}

.axial th, .axial th .strut {
  width: 12em;
}

.legend th, .bars th {
  text-align: right;
  padding-left: 1em;
}

.bars th {
  width: 12em;
}

caption {
  text-align: left;
}

/*Messaging*/

.errormessage, .warningmessage, .donemessage, .infomessage, .docinfo, .dirinfo {
  margin: .67em 0;
  padding: .33em 0 .67em 42px;
  min-height: 32px;
}

.errormark, .warningmark, .donemark, .infomark {
  padding-left: 20px;
  min-height: 15px;
}

/*Calendar*/

.calendarbody {
  margin: 17px;
}

.calendarweeklabel {
  text-align: center;
  padding-bottom: 7px;
}

.calendartoday, .calendarmonths {
  padding: 0 2px 0 3px;
}

.periodax, .periodbx, .currentperiod, .calendarday {
  text-align: right;
}

.periodax, .periodbx, .currentperiod, .othermonthday, .othermonthday a, .calendarday {
  padding-bottom: 7px;
}

/*Specific to Project Dashboard*/

#projectperformance {
  padding: 10px;
}
  
.effort {
  margin-left: 50px;
}

.effortbar1, .effortbar2 {
  position: absolute;
}

.dashboardchart {
    padding: 5px;
  margin: 2px 2px 0px 2px;
  text-align: center;
}

.statusnotstarted, .statusontrack, .statuscaution, .statusslip, .statusended {
  width: 50px;
  height: 10px;
  white-space: nowrap;
}

.indenttable th .strut {
  width: 16em;
}

.cumulative td, .subtotal {
  background-color: #bbb;
}

.rollupactivity td {
  background-color: #ddd;
}

.effortbar1 {
  background-color: #79f;
}

.effortbar2 {
  background-color: #aaa;
}

.dashboardchart {
  background-color: #ddd;
}

table td.statusnotstarted, .statusnotstarted {
  background: #cca;
}

table td.statusontrack, .statusontrack {
  background: #6c6;
}

table td.statuscaution, .statuscaution {
  background: #fc6;
}

table td.statusalert, .statusalert {
  background: #f30;
}

table td.statusended, .statusended {
  background: #ccc;
}

/*Specific to Help Docs*/

body.docs #toc li, body.docs #toc li li {
  background-image: url(strich00.gif);
  background-repeat: no-repeat;
  background-position: .5em .5em;
}

body.docs div#toc {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

body.docs div.docs {
  background-color: #fff;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

body.docs {
  background: #eee url(help_log.giftop right no-repeat !important;
}

body#legalnotices {
  background-image: none !important;
}

body.docs #toc {
  position: absolute;
  top: 61px;
  left: 0px;
  width: 120px;
  padding: 0 20px 0 0;
}

body.docs #toc ul, #toc ol {
  margin-left: 0;
  padding-left: 0;
}

body.docs #toc li {
  margin-top: 7px;
  padding-left: 10px;
  list-style-type: none;
}

body.docs div.docs {
  margin: 61px 0 0 150px;
  padding: 1em 2em 1em 1em !important;
}

.docs h3, .docs h4 {
  margin-bottom: .1em;
  padding-top: .3em;
}

body.docs {
  margin: 0;
  padding: 0;
}

.docs {
  line-height: 1.4;
}

.docs h1 {
  font-weight: bold;
}
.docs h2 {
  border-bottom: 2px solid #666;
  margin: 0;
  margin-top: 1em;
}

.docs h3 {
  border-bottom: 1px solid #666;
  margin: 0;
      margin-top: 1em;
}

.docs h4 {
  font-weight: bold;
  margin-top: 1em;
}

.doclayout th {
  background-color: #fff;
}

.doclayout th {
  width: 12em;
}

.docs dt 
       margin-top: 20px;
}
body, ol, li, h2 padding:0; margin: 0}


ol#root {  padding-left: 5px; margin-top: 2px; margin-bottom: 1px; list-style: none;}
#root ol {  padding-left: 5px; margin-top: 2px; margin-bottom: 1px; list-style: none;}
#root li margin-bottom: 1px; padding-left: 5px;  margin-top: 2px; font-size: x-small; }

.panel border-bottom: 1px solid #999; margin-bottom: 2px; margin-top: 2px; background: #eee; }

#root ul margin-bottom: 1px; margin-top: 2px; list-style-position: inside; 

#root a text-decoration: none; }


.folder background: url(../treeimages/folder-c.gif)  no-repeat; float: left; height: 14px; width: 26px; padding-right: 3px }
.doc background: url(../treeimages/file0000.gifno-repeat; float: left; height: 14px; width: 12px; padding-right: 3px; margin-left: 20px;}


/*CollabNet branding*/

#banner, #toptabs {
  background-color: #663;
}

#banner {
  border-top: 1px solid #996;
}

#banner {
  padding: 1px;
  padding-left: 12px;
  padding-top: 15px;
}
  
.application th, .app th {
  background-color: #ddc;
}

.axial th {
  background-color: #ddc;
}

#toptabs td, #toptabs th {
  background-image: url(../treeimages/nw_min_6.gif);
}

#toptabs td {
  border-bottom: 1px solid #666;
  border-right: 1px solid #333;
  border-left: 1px solid #663;
}

#toptabs th {
        border-left: 1px solid #663;
}

.h2 h2 {
  background-color: #663;
}

.h2 {
  border-left: 1px solid #663;
}
  
.h3 {
  border-top: 6px solid #663;
}

h3 {
  color: #663;
}

#login, #login a {
  color: #fff;
}  

#login a:hover {
  color: #ccf !important;
}  

#toptabs td, .tabs th {
  background-color: #eed;
}

#toptabs th, .tabs td {
  background-color: #cc9;
}

#toptabs {
  border-bottom: 6px solid #cc9;
}

.tabset {
  background-color: #eed;
}

#toptabs .tabs th, #toptabs th a:link, #toptabs th a:visited, .tabs th, .tabs th a:link, .tabs th a:visited {
  color: #000 !important;
}

.tabs td, .tabs td a:link, .tabs td a:visited, #toptabs .tabs td, #toptabs td a:link, #toptabs td a:visited {
  color: #555 !important;
}

.tabset .b td, .tabset .a td {
  background-color: #ddd;
}

#navcol a:link, #navcol a:visited {
  color: #000;
}

a:active, a:hover, #leftcol a:active, #leftcol a:hover, #highlights a:active, #highlights a:hover {
  color: #036 !important;
}

#helptext dt {
  background-color: #dd9;
}

#highlights {
  background: #eed;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}        

#highlights a:link, #highlights a:visited {
  color: black;
}

#highlights {
  margin: 0;
  padding: 6px;
}

#mainhighlights {
  margin-top: 1em
  }

#mainhighlights td div {
  margin: .5em
  }

#mainhighlights th {
  background: #dd9;
  }

#mainhighlights td {
  background: #ffc;
  }

#mainhighlights, #mainhighlights td, #mainhighlights th {
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

#mainhighlights td {
  border-right: 1px solid #cc9;
  border-bottom: 1px solid #cc9;
}

#mainhighlights th {
  border-right: 1px solid #996;
  border-bottom: 1px solid #996;
}

.navgroup dt {
  background: #dd9;
}

.navgroup {
  background: #eed;
  color: #000;
}

#mytools, #projecttools, #admintools, #communitytools, #mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  background-color: #dd9;
  color: #000 !important;
}

#searchbox dt, #helptext dt {
  color: #000 !important;
}

.a td 
  background: #eee;
}

.b td 
   background: #eee;
}


#rightcol div.siteinfo .a {
  background: #eee;
}

#rightcol div.siteinfo h2 {
  background-color: #663 !important;
  color: #fff !important;
}

#bodycol .application a:visited, #bodycol .app a:visited #bodycol .tasknav a:visited {
  color: purple !important;
}

.readyset h3, .readyset h4 {
  padding: 3px;
  padding-left: 5px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 0;
  clear: both;
}


.readyset .axial th {
  text-align: right;
  white-space: nowrap;
}

dd 
  margin-bottom: .67em; 
}

.tier1 margin-left: 0}
.tier2 margin-left: 1.5em; }
.tier3 margin-left: 3em; }
.tier4 margin-left: 4.5em; }

.level1 padding-left: 0}
.level2 padding-left: 1em; }
.level3 padding-left: 2em; }
.level4 padding-left: 3em; }


/* additions specific to ReadySET */

tr ul, tr ol, tr p 
  margin-top: 0
}
tr ul 
  margin-left: 0px; padding-left: 2em; 
}


.sticky {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.tip {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.todo {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

#processimpact {
  border: 1px solid;
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 2px;
}

.footnote {
  width: 80%;
  border-top: solid #aaa 1px;
  font-size: x-small;
  padding-top: 3px;
  margin-top: 3em;
}

.reusablefragment {
  padding: 6px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.sample1, .sample2, .sample3, .sample4 {
  padding-right: 2px;
  margin-bottom: 4px;
}

.legal1 {
  border: 2px solid;
  padding: 3px;
  text-align: center !important;
  font-size: xx-large;
  font-weight: bold;
  display: none;
}

.linklist a 
  display: block; 
}

.sub 
  padding-left: 1em;  
}

:target {
  border: 2px solid red; 
}

.footnote {
  /* To hide footnotes, change "block" to "none". */
   display: block;
}


.sticky {
  background: #ffc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
}

.tip {
  background: #ffc;
  background-image: 'url(../treeimages/tip00000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  padding-left: 36px;
  min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tip.png',sizingMethod='scale'); */
}


.todo {
  background: #ffc;
  background-image: 'url(../treeimages/todo0000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  padding-left: 36px;
   min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='todo.png',sizingMethod=scale); */
}



#processimpact {
  background: #eee;
  border-color: #aaa;
  background-image: 'url(../treeimages/gears000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 36px;
  min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gears.png',sizingMethod='scale'); */
}

.reusablefragment {
  background: #eee;
  border: 2px dashed;
}

.sample1 border-right: 4px double #500}
.sample2 border-right: 4px double #050}
.sample3 border-right: 4px double #005}
.sample4 border-right: 4px double #505}

a.def 
  text-decoration: none; 
  border-bottom: dashed 1px blue;
  cursor: help;
}

.legal1 {
/* display: block !important; */
  background: #eee;
  border-color: #aaa;
}

#navcol div.body  {
  background-image: none;
}
#navcol div.body  {
  padding-bottom: .3em;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0;
}
#navcol div.body  div {
  margin-top: .3em;
  padding-bottom: 0;
}
.navgroup .body {
  border-top: 1px solid #aaa;
}

.navgroup .body {
  padding: 0px;
  margin: 0em;
}

.navgroup .label {
  padding: 4px;
}


/* EyeBrowse message reader */
.tabset pre {
 background-color: #fff;
 border: 1px solid #ccc;
 padding-left: 4px;
 padding-top: 4px;
}
</style>


<script language=javascript>
function toggle(elm) {

var newDisplay = "none";
 elm.style.backgroundImage = 'url(treeimages/folder-c.gif)';
 var e = elm.nextSibling; 
 while (e != null) {
  if (e.tagName == "OL" || e.tagName == "ol") {
   if (e.style.display == "none") {
    newDisplay = "block";
    elm.style.backgroundImage = 'url(treeimages/folder-c.gif)';
   }
   break;
  }
  e = e.nextSibling;
 }
 while (e != null) {
  if (e.tagName == "OL" || e.tagName == "ol"e.style.display = newDisplay;
  e = e.nextSibling;
 }
}

function collapseAll(tags) {
 for (i = 0; i < tags.length; i++) {
  var lists = document.getElementsByTagName(tags[i]);
  for (var j = 0; j < lists.length; j++
   lists[j].style.display = "none";
   var e = document.getElementById("root");
   e.style.display = "block";
 }
}

function openBookMark() {
 var h = location.hash;
 if (h == ""h = "default";
 if (h == "#"h = "default";
 var ids = h.split(/[#.]/);
 for (i = 0; i < ids.length; i++) {
  if (ids[i!= ""toggle(document.getElementById(ids[i]));
 }
}

</script>

<script language=javascript>
var current=new Array();
var ready=new Array();
var num=1;

function out(obj)
{
var str="";
for(i in obj)str=str +i + "  ";
return str;
}

function getid(str)
{
s=str.slice(0,str.length-3);
return s;
}

function del(obj)
{
while(obj.hasChildNodes())
    {
    del(obj.childNodes[0]);
    }
obj.parentNode.removeChild(obj);
}

function getlen(obj)
{
j=0;
for(k in obj)
    {
    j=j+1;
    }
return j;
}


function obj_more(e)
{
var s=(e.target)?e.target:e.srcElement;

id=getid(s.id);

s=document.getElementById(id);
sa=document.getElementById(id+"an1");

if(ready[s.id]==false)
    {
    addbranch(s,current[s.id],false,false);
    ready[s.id]=true;
    }
    else 
    {
    toggle(sa);
    }
}




function init(parent,obj,isid,parid)
{
if(parent==null)parent=document.body;
if(isid)obj=document.getElementById(obj);

if(parid)parent=document.getElementById(parent);
div0=document.createElement("div");
div0.style.border="dashed 1px #000";
div0.style.padding="3px"
div0.style.margin=" 3px";
ol0=document.createElement("ol");
ol0.id="rootol";
li0=document.createElement("li");
li0.id="root";
ol0.appendChild(li0);
div0.appendChild(ol0);
parent.appendChild(div0);
addbranch("root",obj,true,false)
}




function addbranch(parent,obj,parent_isid,isid)
{
if(isid)obj=document.getElementById(obj);
if(parent_isid)parent=document.getElementById(parent);


ol0=document.createElement("ol");
ol0.style.border="thin solid";
for(i in obj)
    {
    li1=document.createElement("li");
    a1=document.createElement("a");
    a1.className="doc";
    proptext=document.createTextNode(i);
    try 
  {
  proptext1=document.createTextNode(obj[i]);
  }
  catch(ex0)
  {
  proptext1=document.createTextNode("error");
  }
    li1.appendChild(a1);
    a2=document.createElement("a");
    table1=document.createElement("table");
    tr1=document.createElement("tr");
    
    td2=document.createElement("td");
    td2.appendChild(proptext);
    td2.style.border="thin solid";
    td3=document.createElement("td");
    td3.appendChild(proptext1);
    td3.style.border="thin solid";

    
    try
  {
  if (getlen(obj[i])>0)
      {
      a1.className="folder";
      li1.id=num;
      ol0.id=num+"ol";
      try
    {
    current[num]=obj[i];
    ready[num]=false;
    td3.id=num+"td3";
    td2.id=num+"td2";
    a1.id=num+"an1";
    num=num+1;
    }
    catch(ex1)
    {
    };
      var success=(a2.addEventListener)?a2.addEventListener("click",obj_more,false):a2.attachEvent("onclick",obj_more);
          
  
      }
  }
  catch(ex2)
  {
  alert(ex2);
  }
    
    
    tr1.appendChild(td2);
    tr1.appendChild(td3);
    table1.appendChild(tr1);
    a2.appendChild(table1);
    li1.appendChild(a2);
    
    ol0.appendChild(li1);
    }
parent.appendChild(ol0);
}
</script>

<script type='text/javascript'>

</script>

    <title>Javascript Tree</title>
    <link href="mainstyle.css" rel="stylesheet" type="text/css"


<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>

<body onLoad="init(null,window,false,false);">
<h2>BETA2</h2>
<script>
</script>

</body>
</html>


           
       

Download : Download nav_jstree.zip nav_jstree.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Documentation