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 --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.

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.

ruisoftware / jquery-rsrefpointer Goto Github PK