block by tophtucker 2e72c41ffb8e7ecab8d9

Arrow connector helper

Full Screen

It is conceivable that one might want a setup whereby someone can arrange a Web Page such that certain things point to certain other things without writing any javascript or a ton of custom css or whatever. This is a solution.


In the data-arrow-target attribute of an HTML element, provide a CSS selector. If the selector matches more than one element, lines will be drawn from the element to all the matching elements.

E.g.: <div id="one" data-arrow-target="#two"></div>

2. JavaScript

arrowConnector() returns a render function.

// Gets your renderer
var connect = arrowConnector();

// Renders for the first time

// Render on resize"resize", connect);

3. CSS

Arrows get a class .arrow-connector. Do as you will with it.

The end.