Top
Home

Org Chart

This is how you make an org chart



<!DOCTYPE HTML>
<html>
<head>
<title>Org Chart</title>
<style>
div.orgChart div.node {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="orgchart.jsss"></script>
<script>
$(function() {
$("#organisation").orgChart({container: $("#main"), nodeClicked: onNodeClicked});
});
function onNodeClicked($node) {
var value = $node.clone().children("ul,li,img").remove().end().text();
if ($node.data("actor")) {
value += " (" + $node.data("actor") + ")";
}
$("<li>" + value + "</li>").prependTo($("#clicks"));
}
</script>

<style>
div.orgChart {
border : 0px solid #cccccc;
background-color : #;
margin : 10px;
padding : 20px;
}

/* Fonts in bubbles */

div.orgChart h2 {
margin : 0px;
font-size : 12pt;
border-bottom : none;
color:#369;
}



div.orgChart table {
width : 100%;

}

div.orgChart tr.lines td.line {
width : 1px;
height : 10px;
}

div.orgChart tr.lines td.top {
border-top : 3px solid black;
}

div.orgChart tr.lines td.left {
border-right : 2px solid black;
}

div.orgChart tr.lines td.right {
border-left : 2px solid black;
}

div.orgChart td {
text-align : center;
vertical-align : top;
padding : 0px 2px;
}

div.orgChart div.node {
cursor : default;
border : 2px solid black;
display : inline-block;
padding : 0 4px;
width : 86px;
height : 60px;
background-color : #eee;
line-height : 1.3em;
border-radius : 8px;
box-shadow : 4px 4px 6px #888888;
-moz-border-radius : 8px;
-moz-box-shadow : 4px 4px 6px #888888;
-webkit-border-radius : 8px;
-webkit-box-shadow : 4px 4px 6px #888888;
}

div.orgChart div.hasChildren {
background-color : #ccc;
}

div.orgChart.interactive div.hasChildren {
cursor : pointer;
}

div.orgChart div.hasChildren {
background-color : #ffff98;
}

div.orgChart.interactive div.hasChildren {
cursor : pointer;
}

div.orgChart div.node.hover {
background-color : white;
}

</style>
</head>

<body>


<div class="chart">
<ul style="display:none" id="organisation">
<li><em>11111</em>
<ul>
<li>22222a<br/>

<ul>
<li>33333a</li>
<li>33333b</li>
<li>33333c

<ul>
<li>4444a</li>
<li>4444b</li>
<li>4444c</li>
<li>4444d</li>
</ul>
</li>

</ul>
</li>
<li>22222b<br/>

<ul>
<li>33333e</li>
<li>33333f</li>
</ul>
</li>
<li>22222c<br/>

<ul>
<li>33333g</li>
<li>33333h</li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

<div id="content">



<div id="main"></div>



</body>

<script>

(function(a){function p(d,h,g,e,b){var q=a("<table cellpadding='0' cellspacing='0' border='0'/>"),l=a("<tbody/>"),n=a("<tr/>").addClass("nodes"),k=a("<td/>").addClass("node").attr("colspan",2),f=d.children("ul:first").children("li");1<f.length&&k.attr("colspan",2*f.length);var c=d.children("adjunct").eq(0);0<c.length&&(a("<div>").addClass("adjunct node").addClass("level"+g).addClass("node"+e).addClass("level"+g+"-node"+e).append(b.nodeText(c)).appendTo(k),a("<div>").addClass("adjunct-link").appendTo(k),
c.remove());c=a("<h2>").html(b.nodeText(d));c=a("<div>").addClass("node").addClass("level"+g).addClass("node"+e).addClass("level"+g+"-node"+e).append(c);b.copyClasses&&c.addClass(d.attr("class"));b.copyData&&c.data(d.data());b.copyStyles&&c.attr("style",d.attr("style"));b.copyTitle&&c.attr("title",d.attr("title"));c.data("orgchart-level",g).data("orgchart-node",d);k.append(c);n.append(k);l.append(n);c.click(function(){var c=a(this);b.nodeClicked(c.data("orgchart-node"),c);if(b.interactive){var d=
c.closest("tr");d.next("tr").is(":visible")?(b.fade?d.nextAll("tr").fadeOut(b.speed):d.nextAll("tr").hide(),c.removeClass("shownChildren").addClass("hiddenChildren")):(c.removeClass("hiddenChildren").addClass("shownChildren"),b.fade?d.nextAll("tr").fadeIn(b.speed):d.nextAll("tr").show())}});if(0<f.length)if(-1==b.depth||g+1<b.depth){e=a("<tr/>").addClass("lines");d=a("<td/>").attr("colspan",2*f.length);e.append(d);k=a("<table cellpadding='0' cellspacing='0' border='0'>");k.append("<tbody>");var r=
a("<tr/>").addClass("lines x"),t=a("<td>").addClass("line left"),u=a("<td>").addClass("line right");r.append(t).append(u);k.children("tbody").append(r);d.append(k);l.append(e);0<f.length&&(c.addClass("hasChildren"),-1==b.showLevels||g<b.showLevels-1?c.addClass("shownChildren"):c.addClass("hiddenChildren"),b.interactive&&c.hover(function(){a(this).addClass(b.hoverClass)},function(){a(this).removeClass(b.hoverClass)}));var m=a("<tr/>").addClass("lines v");f.each(function(){var b=a("<td/>").addClass("line left top"),
c=a("<td/>").addClass("line right top");m.append(b).append(c)});m.find("td:first").removeClass("top");m.find("td:last").removeClass("top");l.append(m);var s=a("<tr/>");f.each(function(c){var d=a("<td/>");d.attr("colspan",2);p(a(this),d,g+1,c,b);s.append(d)});l.append(s)}else b.stack&&(f=f.clone(),f=a("<ul class='stack'>").append(f).addClass("level"+g).addClass("node"+e).addClass("level"+g+"-node"+e),f=a("<div class='stack-container'>").append(f),c.after(f));-1<b.showLevels&&g>=b.showLevels-1&&n.nextAll("tr").hide();
q.append(l);h.append(q)}a.fn.orgChart=function(d){var h=a.extend({},a.fn.orgChart.defaults,d);return this.each(function(){var d=a(this);$this=d.clone();-1<h.levels&&$this.find("ul").andSelf().filter(function(){return d.parents("ul").length+1>h.levels}).remove();$this.data("chart-source",d);var e=a("<div class='"+h.chartClass+"'/>");h.interactive&&e.addClass("interactive");var b;$this.is("ul")?b=$this.find("li:first"):$this.is("li")&&(b=$this);b&&(p(b,e,0,0,h),e.find("div.node a").click(function(a){a.stopImmediatePropagation()}),
h.replace&&h.container.empty(),h.container.append(e))})};a.fn.orgChart.defaults={container:a("body"),depth:-1,levels:-1,showLevels:-1,stack:!1,chartClass:"orgChart",hoverClass:"hover",nodeText:function(a){return a.clone().children("ul,li").remove().end().html()},interactive:!1,fade:!1,speed:"slow",nodeClicked:function(a){},copyClasses:!0,copyData:!0,copyStyles:!0,copyTitle:!0,replace:!0}})(jQuery);
</script>

</html>




Org Chart