<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> New Document </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script type= "Text/javascript" src= "Js-graph-it.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Js-graph-it.css"/>
<link rel= "stylesheet" type= "Text/css" href= "Sf-homepage.css"/>
<script>
function OnLoad () {
Resizecanvas ();
Initpageobjects ();
}
/**
* Resizes the main canvas to the maximum visible height.
*/
function Resizecanvas ()
{
var divelement = document.getElementById ("Maincanvas");
var screenheight = Window.innerheight | | Document.body.offsetHeight;
DivElement.style.height = (screenHeight-16) + "px";
}
</script>
<body onload= "onload ()" >
<div id= "Maincanvas" class= "Canvas" style= "width:100%; height:500px; " >
<!--H1 and H2 two objects--
<H1 id= "AAA" class= "Block draggable" style= "left:30px"; top:30px; " >aaaa<H2 id= "One" class= "Block draggable" style= "left:130px; top:130px; " >one<!--connecting lines of two objects, using CSS to represent,up_start;down_start;right_start;left_start-->
<div class= "connector AAA one Down_start" >
</div>
<!--means there are two lines going out of this object, connecting two different objects--
<div id= "Description2_block" class= "Block draggable" style= "left:350px; top:300px; ">
Totle
<div id= "Description2_out1" class= "Block Dock_point" style= "right: -2px; top:20%; " ></div>
<div id= "Description2_out2" class= "Block Dock_point" style= "right: -2px; top:80%; " ></div>
</div>
<div id= "No_js_code_block" class= "Block draggable" style= "left:580px; top:200px; ">
One
</div>
<div class= "connector description2_out1 no_js_code_block Right_start" >
</div>
<div id= "Drag_and_drop_block" class= "Block draggable" style= "left:580px; top:340px; ">
Both
</div>
<div class= "connector description2_out2 drag_and_drop_block Right_start" >
</div>
<!--two objects connected to one another--
<div id= "A" class= "Block draggable" style= "left:230px; top:230px; ">
Aaaaaa
<div id= "A1" class= "Block Dock_point" style= "right: -2px; top:20%; " ></div>
<div id= "A2" class= "Block Dock_point" style= "right: -2px; top:80%; " ></div>
</div>
<div id= "B" class= "Block draggable" style= "left:330px"; top:330px; ">
bbbbbb
<div id= "B1" class= "Block Dock_point" style= "left: -2px; top:20%; " ></div>
<div id= "B2" class= "Block Dock_point" style= "left: -2px; top:100%; " ></div>
</div>
<div class= "Connector A1 B1 Right_start" >
</div>
<div class= "connector b2 A2 Down_start" >
</div>
<p class= "block" style= "Position:absolute; bottom:2px; right:2px; " >tested on Internet Explorer 6, Mozilla Firefox 1.0 and 1.5, Opera 9.01</p>
</div>
</body>
A little demo of js-graph-it
