jquery.rsRefPointer
Advanced tools
#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
#Installation
You can install from npm:
npm install jquery.rsRefPointer --save
or 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.
<!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:
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.
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.
When you are done, click on "Generate Code", click on "Select all" and copy it.
Back to your editor, replace your old code
with the new one
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.
This project is licensed under the terms of the MIT license
Please use the issue tracker to report any bugs or file feature requests.
Please refer to the Contribution page from more information.
FAQs
SVG arrows between two DOM elements
We found that jquery.rsRefPointer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.