Draw a straight line between any two points using only a DOM element, thus allowing CSS styles to be applied
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


jQuery DOM Line

Draw a line between any two arbitrary points, using a simple DOM element.

Full documentation and examples available at http://gilmoreorless.github.io/jquery-dom-line/



$.line(fromPoint, toPoint[, options]);

fromPoint and toPoint are required objects with x and y numeric properties, relative to the top left of the page. options is an optional object, as listed below.

Return value is a jQuery object containing the element used for the line.


The options object passed to $.line is an object with the following available properties:

  • elem - jQuery selector of the element to use for the line, useful for re-using a single element for subsequent lines (default: empty - creates a new div)
  • className - CSS class added to the line div element (default: "jquery-line") - not used if elem option is provided
  • lineWidth - Thickness of the line in pixels (default: 1)
  • lineColor - CSS color of the line (default: black)
  • returnValues - If true, returns an object with the calculated dimensions for the line (see below), instead of a jQuery object (default: false)

Return Values

If the returnValues option is set to true, a plain object is returned with the following defined properties:

  • from - The fromPoint argument passed to the function
  • to - The toPoint argument passed to the function
  • center - The centre point of the line (and also the point of rotation) - contains x and y properties
  • rotation - The amount of rotation applied to the line - contains deg (degrees) and rad (radians) properties

Todo List

  • Add option to calculate CSS props without creating the line elem - can be used for animation positions