JavaScript Library Which Allows To Visually Connect Elements In A Web Page | jqSimpleConnect

jqSimpleConnect is a lightweight JavaScript library that provides functionality for visually linking elements in a web page. It uses <div> elements to draw connectors, to avoid dependencies with SVG and Canvas, and to be much faster and simpler.

Its only requirement is jQuery, another JavaScript library, which must be included in the web page with jqSimpleConnect.

jquery connections js, jquery plugin to connect two html elements with a line, draw responsive line between two divs

How to make use of it:

1. Add the jQuery library and jqSimpleConnect jQuery plugin to your HTML page.

<script src="//"></script>
<script src="js/jqSimpleConnect.min.js"></script>

2. Use JavaScript to draw a virtual line connecting the #el-a  #el-b block elements.

<div id="el-a">Element A</div>
<div id="el-b">Element B</div>
jqSimpleConnect.connect("#el-a", "#el-b", {/*OPTIONS*/});

3. Parameters and options.

// elementA: A CSS selector or a jQuery's object for select the first element.
// elementB: A CSS selector or a jQuery's object for select the second element.
jqSimpleConnect.connect(elementA, elementB, {

  // the color of the line
  color: 'green',

  // the width of the line
  radius: 10,

  // a boolean indicating if the corners must be round
  roundedCorners: true,

  // the anchor type of the first element
  anchorA: 'horizontal'

  // the anchor type of the second element
  anchorB: 'vertical'

4. API.

// Repaints an specific connection from the page.
// connectionId: The connection's unique identifier.
// Returns true if the connection was repainted or false if no connection with that identifier was found.
jqSimpleConnect.repaintConnection = function(connectionId)

// Repaints all the connections in the page.
jqSimpleConnect.repaintAll = function()

// Removes an specific connection from the page.
// Returns true if the connection was removed or false if no connection with that identifier was found.
jqSimpleConnect.removeConnection = function(connectionId)

// Removes all the connections in the page.
jqSimpleConnect.removeAll = function()

visualize connections using jquery, jqSimpleConnect Plugin/Github, jquery connect plugin example, connect divs with lines jquery, jquery connections example

See Demo And Download

Official Website(jfmdev): Click Here

This superior jQuery/javascript plugin is developed by jfmdev. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…