Skip to content

Commit

Permalink
host example on github pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@wesnolte
wesnolte committed Jun 7, 2024
1 parent c15c3dd commit 3b372ed
Show file tree
Hide file tree
Showing 8 changed files with 842 additions and 80 deletions.
351 changes: 351 additions & 0 deletions css/bootstrap.min.css
View file

Large diffs are not rendered by default.

92 changes: 92 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
body, html, div, p, span, a, h1, h2, h3, h4, h5{
margin : 0;
padding : 0;
}

body, html{
width : 100%;
}

body{
background : url('../images/bkgd.png') repeat top left;
color : white;
font-family : tahoma;
font-weight : lighter;
padding-top : 40px;
}

body p{
font-size : 14px;
}

body p a{
font-size : 16px;
}

h1 {
color : #E05E00;
font-style : italic;
}

a{
color : #E05E00;
text-decoration : none;
}

a:hover{
text-decoration : underline;
}

/* general */
.clear {
clear: both;
}

/* Header */
.brand{
color : #E05E00 !important;
font-family : georgia;
font-style : italic;
}

/* list stuff */
#org{
background-color : white;
margin : 10px;
padding : 10px;
}

#show-list{
cursor : pointer;
}

/* bootstrap overrides */
.alert-message{
margin: 2px 0;
}

.topbar{
position : absolute;
}

/* Custom chart styling */
.jOrgChart {
margin : 10px;
padding : 20px;
}

/* Custom node styling */
.jOrgChart .node {
font-size : 14px;
background-color : #35363B;
border-radius : 8px;
border : 5px solid white;
color : #F38630;
-moz-border-radius : 8px;
}
.node p{
font-family : tahoma;
font-size : 10px;
line-height : 11px;
padding : 2px;
}
51 changes: 51 additions & 0 deletions css/jquery.jOrgChart.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
height : 20px;
width : 4px;
}

.jOrgChart .down {
background-color : black;
margin : 0px auto;
}

.jOrgChart .top {
border-top : 3px solid black;
}

.jOrgChart .left {
border-right : 2px solid black;
}

.jOrgChart .right {
border-left : 2px solid black;
}

/* node cell */
.jOrgChart td {
text-align : center;
vertical-align : top;
padding : 0;
}

/* The node */
.jOrgChart .node {
background-color : #35363B;
display : inline-block;
width : 96px;
height : 60px;
z-index : 10;
margin : 0 2px;
}

/* jQuery drag 'n drop */

.drag-active {
border-style : dotted !important;
}

.drop-hover {
border-style : solid !important;
border-color : #E05E00 !important;
}
1 change: 1 addition & 0 deletions css/prettify.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added images/bkgd.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/raspberry.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
193 changes: 113 additions & 80 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>

<title>wesnolte/jOrgChart @ GitHub</title>

<style type="text/css">
body {
margin-top: 1.0em;
background-color: #ffffff;
font-family: Helvetica, Arial, FreeSans, san-serif;
color: #000000;
}
#container {
margin: 0 auto;
width: 700px;
}
h1 { font-size: 3.8em; color: #000000; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #000000; }
h3 { text-align: center; color: #000000; }
a { color: #000000; }
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; }
</style>
</head>

<body>
<a href="https://github.com/wesnolte/jOrgChart"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

<div id="container">

<div class="download">
<a href="https://github.com/wesnolte/jOrgChart/zipball/master">
<img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
<a href="https://github.com/wesnolte/jOrgChart/tarball/master">
<img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
</div>

<h1><a href="https://github.com/wesnolte/jOrgChart">jOrgChart</a>
<span class="small">by <a href="https://github.com/wesnolte">wesnolte</a></span></h1>

<div class="description">
A jQuery plugin to draw tree-like structures such as OrgCharts.
</div>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jOrgChart - A jQuery OrgChart Plugin</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="prettify.js"></script>


<!-- jQuery includes -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>






<script src="jquery.jOrgChart.js"></script>

<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
});
</script>
</head>

<body onload="prettyPrint();">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li><a href="http://github.com/wesnolte">Github</a></li>
<li><a href="http://twitter.com/wesnolte">Twitter</a></li>
<li><a href="http://th3silverlining.com">Blog</a></li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>

<h2>Authors</h2>
<p>Wes ([email protected])<br/> </p>
<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>Pumpkin</li>
<li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>


<div id="chart" class="orgChart"></div>

<h2>Contact</h2>
<p>Wes ([email protected])<br/> </p>


<h2>Download</h2>
<p>
You can download this project in either
<a href="https://github.com/wesnolte/jOrgChart/zipball/master">zip</a> or
<a href="https://github.com/wesnolte/jOrgChart/tarball/master">tar formats.
</p>
<p>You can also clone the project with <a href="http://git-scm.com">Git</a>
by running:
<pre>$ git clone git://github.com/wesnolte/jOrgChart</pre>
</p>

<div class="footer">
get the source code on GitHub : <a href="https://github.com/wesnolte/jOrgChart">wesnolte/jOrgChart</a>
</div>

</div>
<script>
jQuery(document).ready(function() {

/* Custom jQuery for the example */
$("#show-list").click(function(e){
e.preventDefault();

$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});

$('#list-html').text($('#org').html());

$("#org").bind("DOMSubtreeModified", function() {
$('#list-html').text('');

$('#list-html').text($('#org').html());

prettyPrint();
});
});
</script>

</body>
</html>
</html>
Loading

0 comments on commit 3b372ed

Please sign in to comment.