Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ruisoftware/jquery-rsrefpointer
Displays arrows linking related elements in the page
https://github.com/ruisoftware/jquery-rsrefpointer
arrow codepen design editor javascript jquery position relationship
Last synced: 4 days ago
JSON representation
Displays arrows linking related elements in the page
- Host: GitHub
- URL: https://github.com/ruisoftware/jquery-rsrefpointer
- Owner: ruisoftware
- Created: 2014-09-14T20:05:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T15:15:49.000Z (almost 8 years ago)
- Last Synced: 2025-01-02T18:05:41.705Z (28 days ago)
- Topics: arrow, codepen, design, editor, javascript, jquery, position, relationship
- Language: JavaScript
- Homepage:
- Size: 372 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# jquery-rsRefPointer [](https://travis-ci.org/ruisoftware/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](https://www.npmjs.com/):
````bash
npm install jquery.rsRefPointer --save
````
or directly from git:
````javascript
````
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
````javascript
jquery-rsRefPointer plug-in
$(document).ready(function () {
$('.source').rsRefPointer();
});
.source {
background-color: cyan;
}
Mouse over
here
to see two arrows pointing to
[this target]
and this image
Shrink your browser width to cause a line break on the image.
Watch how the arrow follows the target new location.
`````
You can check it out [here](http://codepen.io/ruisoftware/pen/qZVadX "on CodePen") 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:
1. Enter Design-time mode
2. Edit your arrows
3. Generate code and copy it
4. Paste the new code into your page
5. Exit Design-time mode
### Enter Design-time mode
Add the `jquery.rsRefPointer-design.js` script **after** the `jquery.rsRefPointer.js` script:
````javascript
````
Save your html and refresh your page.
Now, you have entered Design-time mode. [Sample](http://codepen.io/ruisoftware/pen/wGPzjw "on CodePen") 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.
````javascript
````
Refresh your page. Design-time is gone and now you have your fancy arrows running.
[Check it out here](http://codepen.io/ruisoftware/pen/mPqORy "on CodePen")
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](https://opensource.org/licenses/mit-license.php)
# Bug Reports & Feature Requests
Please use the [issue tracker](https://github.com/ruisoftware/jquery-rsRefPointer/issues) to report any bugs or file feature requests.
# Contributing
Please refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsRefPointer/blob/master/CONTRIBUTING.md) from more information.