Getting started

The blocks

	    <style>

	      .block { position: absolute; }

	    </style>

  </head>
  <body onload="initPageObjects();">
    <div class="canvas" id="mainCanvas"
      style="width: 350px; height: 250px; border: 1px solid black;">

	      <h1 class="block" id="h1_block"

	        style="left: 10px; top:10px;">

	          h1 block

	      </h1>

	      <h2 class="block" id="h2_block"

	        style="left: 200px; top: 100px;">

	        h2 block

	      </h2>

</div>
</body>
</html>

Absolute positioning is not required for js-graph-it to work, hence, we must explicitly declare that we want the blocks to be placed in an absolute position within the canvas.

This can be done declaring that the block class has absolute positioning in a style section, into an external css file or in the style attribute of each block.

Any html element within a canvas can be a block and can be connected with other blocks. In this sample we place a h1 element into the page as the first block.

To declare that our h1 element is a block, add the block class to it.

A unique id is required and we will use it to refer to the block.

Since we specified absolute positioning for blocks, we need to set the top left corner coordinates for the h1 element.

Note: the top and left styles values for a block are considered relative to the top left corner of the canvas.

A second block is a h2 element.

« previous