Connect Two DOM Elements With A Directional Arrow – domarrow.js

Category: Javascript | February 11, 2019
Author: schaumb
Views Total: 430
Official Page: Go to website
Last Update: February 11, 2019
License: MIT

Preview:

Connect Two DOM Elements With A Directional Arrow – domarrow.js

Description:

domarrow.js is a JavaScript component that draws a directional arrow connecting between two DOM elements to reveal the relationship between them.

No need of SVG or Canvas element. Built using pure JavaScript, HTML, and CSS.

See also:

How to use it:

Load the domarrow.js and domarrow.css in the HTML document.

<link rel="stylesheet" href="domarrow.css">
<script src="domarrow.js"></script>

Create two elements on the page.

<div id="d1"></div>
<div id="d2"></div>

Create a directional arrow between these two elements.

<connection from="#d1" to="#d2" tail></connection>

Set the color of the directional arrow.

<connection from="#d1" to="#d2" color="red" tail></connection>

Hide the arrow (line only).

<connection from="#d1" to="#d2" color="red"></connection>

You Might Be Interested In:


Leave a Reply