jquery.rsRefPointer
v1.0.7
Published
SVG arrows between two DOM elements
Downloads
11
Maintainers
ruisoftwareReadme
#jquery-rsRefPointer 
Eases web navigation, through the use of visual relationships (arrows) between page elements.
Can be usefull to help the user cross-reference content that might not be noticeable at first sight.
Demo available at src/demo/dragonfly.html
#Key Features
- Arrows makes a visual connection from a start element to an end element, even when the position/size of these elements change;
- Non intrusive. The arrows are hidden by default and only appear when the mouse overs the start element (or when the start element receives focus for mobile devices). Alternatively they can be always visible;
- Shapes available: Line, Polyline, Quadratic Bezier curves and Cubic Bezier curves;
- Powerfull design-time mode that provides a Photoshop alike GUI. The tool generates JS code with all the parameters filled for you;
- Small footprint, excluding the design-time mode file, that should never be used in production anyway.
#Installation
You can install from npm:
npm install jquery.rsRefPointer --saveor directly from git:
<script src="http://rawgit.com/ruisoftware/jquery-rsRefPointer/master/src/jquery.rsRefPointer.js"></script>or you can download the Zip archive from github, clone or fork this repository and include jquery.rsRefPointer.js from your local machine.
You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.
Usage
<!doctype html>
<html>
<head>
<title>jquery-rsRefPointer plug-in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://rawgit.com/ruisoftware/jquery-rsRefPointer/master/src/jquery.rsRefPointer.js"></script>
<script>
$(document).ready(function () {
$('.source').rsRefPointer();
});
</script>
<style>
.source {
background-color: cyan;
}
</style>
</head>
<body>
Mouse over
<span class="source">here</span>
to see two arrows pointing to
<span class="target">[this target]</span>
and this image
<img width="400" height="200" class="target" src="http://lorempixel.com/400/200/sports">
<p>Shrink your browser width to cause a line break on the image.<br>Watch how the arrow follows the target new location.</p>
<body>
</html>You can check it out here on CodePen.
In this example, you can see two arrows, one for each .target element. Because there is one .source element, only one instance of the plug-in is binded to the .source element.
If there was three .source elements and two .target elements, then three instances of the plug-in would be created (one for each .source) and each instance would show 2 arrows. You can test this, by adding more .source elements in the CodePen link.
#Design-time mode This mode is nothing more than a tool to help you configure the arrows the way you wish. The workflow is:
- Enter Design-time mode
- Edit your arrows
- Generate code and copy it
- Paste the new code into your page
- Exit Design-time mode
Enter Design-time mode
Add the jquery.rsRefPointer-design.js script after the jquery.rsRefPointer.js script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer.js"></script>
<script src="http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer-design.js"></script>Save your html and refresh your page. Now, you have entered Design-time mode. Sample on CodePen.
Edit your arrows
You can add new arrows, add middle points to the selected arrow, delete arrows or points and drag points to new positions.
You might change several arrow style properties, as well.
Generate code and copy it
When you are done, click on "Generate Code", click on "Select all" and copy it.
Paste the new code into your page
Back to your editor, replace your old code
with the new one
Exit Design-time mode
Remove the jquery.rsRefPointer-design.js script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer.js"></script>Refresh your page. Design-time is gone and now you have your fancy arrows running.Check it out here
As you can see, design-time is a temporary tool that should be used to fecth the correct parameters. It is not intended to be deployed into production.
License
This project is licensed under the terms of the MIT license
Bug Reports & Feature Requests
Please use the issue tracker to report any bugs or file feature requests.
Contributing
Please refer to the Contribution page from more information.