{"id":24708755,"url":"https://github.com/ruisoftware/jquery-rsrefpointer","last_synced_at":"2026-05-05T11:31:50.467Z","repository":{"id":20747599,"uuid":"24032046","full_name":"ruisoftware/jquery-rsRefPointer","owner":"ruisoftware","description":"Displays arrows linking related elements in the page","archived":false,"fork":false,"pushed_at":"2017-03-22T15:15:49.000Z","size":381,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T09:04:46.556Z","etag":null,"topics":["arrow","codepen","design","editor","javascript","jquery","position","relationship"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruisoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-14T20:05:35.000Z","updated_at":"2017-08-05T14:15:26.000Z","dependencies_parsed_at":"2022-09-07T13:13:40.778Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsRefPointer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ruisoftware/jquery-rsRefPointer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsRefPointer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsRefPointer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsRefPointer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsRefPointer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsRefPointer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsRefPointer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270962391,"owners_count":24675965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arrow","codepen","design","editor","javascript","jquery","position","relationship"],"created_at":"2025-01-27T06:47:25.093Z","updated_at":"2026-05-05T11:31:50.429Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-rsRefPointer [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsRefPointer.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsRefPointer)\r\n**Eases web navigation, through the use of visual relationships (arrows) between page elements.**\r\n\r\nCan be usefull to help the user cross-reference content that might not be noticeable at first sight.\r\n\r\n![rsrefpointerdemo](https://cloud.githubusercontent.com/assets/428736/14316951/842a4b5a-fc0e-11e5-8080-7d55c3efdf16.gif)\r\nDemo available at `src/demo/dragonfly.html`\r\n\r\n# Key Features\r\n - Arrows makes a visual connection from a start element to an end element, even when the position/size of these elements change;\r\n - 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;\r\n - Shapes available: Line, Polyline, Quadratic Bezier curves and Cubic Bezier curves;\r\n - Powerfull design-time mode that provides a Photoshop alike GUI. The tool generates JS code with all the parameters filled for you;\r\n - Small footprint, excluding the design-time mode file, that should never be used in production anyway.\r\n\r\n# Installation\r\n\r\nYou can install from [npm](https://www.npmjs.com/):\r\n````bash\r\nnpm install jquery.rsRefPointer --save\r\n````\r\nor directly from git:\r\n````javascript\r\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsRefPointer/master/src/jquery.rsRefPointer.js\"\u003e\u003c/script\u003e\r\n````\r\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsRefPointer.js` from your local machine.\r\n\r\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\r\n\r\n# Usage\r\n````javascript\r\n\u003c!doctype html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n  \u003ctitle\u003ejquery-rsRefPointer plug-in\u003c/title\u003e\r\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\r\n  \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsRefPointer/master/src/jquery.rsRefPointer.js\"\u003e\u003c/script\u003e\r\n  \u003cscript\u003e\r\n    $(document).ready(function () {\r\n      $('.source').rsRefPointer();\r\n    });\r\n  \u003c/script\u003e\r\n  \r\n  \u003cstyle\u003e\r\n    .source {\r\n      background-color: cyan;\r\n    }\r\n  \u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n  Mouse over\r\n  \u003cspan class=\"source\"\u003ehere\u003c/span\u003e\r\n  to see two arrows pointing to\r\n  \u003cspan class=\"target\"\u003e[this target]\u003c/span\u003e\r\n  and this image\r\n  \u003cimg width=\"400\" height=\"200\" class=\"target\" src=\"http://lorempixel.com/400/200/sports\"\u003e\r\n    \r\n  \u003cp\u003eShrink your browser width to cause a line break on the image.\u003cbr\u003eWatch how the arrow follows the target new location.\u003c/p\u003e\r\n\u003cbody\u003e\r\n\u003c/html\u003e\r\n`````\r\nYou can check it out [here](http://codepen.io/ruisoftware/pen/qZVadX \"on CodePen\") on CodePen.\u003cbr\u003e\r\nIn 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.\u003cbr\u003e\r\nIf 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.\r\n\r\n# Design-time mode\r\nThis mode is nothing more than a tool to help you configure the arrows the way you wish.\u003cbr\u003e\r\nThe workflow is:\r\n 1. Enter Design-time mode\r\n 2. Edit your arrows\r\n 3. Generate code and copy it\r\n 4. Paste the new code into your page\r\n 5. Exit Design-time mode\r\n\r\n### Enter Design-time mode\r\nAdd the `jquery.rsRefPointer-design.js` script **after** the `jquery.rsRefPointer.js` script:\r\n````javascript\r\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\r\n  \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer.js\"\u003e\u003c/script\u003e\r\n  \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer-design.js\"\u003e\u003c/script\u003e\r\n````\r\nSave your html and refresh your page.\u003cbr\u003e\r\nNow, you have entered Design-time mode. [Sample](http://codepen.io/ruisoftware/pen/wGPzjw \"on CodePen\") on CodePen.\r\n\r\n### Edit your arrows\r\nYou can add new arrows, add middle points to the selected arrow, delete arrows or points and drag points to new positions.\u003cbr\u003e\r\nYou might change several arrow style properties, as well.\u003cbr\u003e\r\n![screen shot 2016-04-05 at 01 00 20](https://cloud.githubusercontent.com/assets/428736/14265099/dafed496-fac9-11e5-846b-3e8c7182c46e.png)\r\n\r\n### Generate code and copy it\r\nWhen you are done, click on \"Generate Code\", click on \"Select all\" and copy it.\r\n![screen shot 2016-04-05 at 01 03 47](https://cloud.githubusercontent.com/assets/428736/14265470/4bf964cc-faca-11e5-81b2-6d4201d7cb6d.png)\r\n\r\n### Paste the new code into your page\r\nBack to your editor, replace your old code\u003cbr\u003e\r\n![screen shot 2016-04-05 at 01 31 43](https://cloud.githubusercontent.com/assets/428736/14266063/45cd56d6-face-11e5-82c7-04424ab77116.png)\r\n\u003cbr\u003ewith the new one\u003cbr\u003e\r\n![screen shot 2016-04-05 at 01 05 57](https://cloud.githubusercontent.com/assets/428736/14265527/a2520cca-faca-11e5-97c5-a73e640159a0.png)\r\n\r\n### Exit Design-time mode\r\nRemove the `jquery.rsRefPointer-design.js` script.\r\n````javascript\r\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\r\n  \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsrefPointer/master/src/jquery.rsRefPointer.js\"\u003e\u003c/script\u003e\r\n````\r\nRefresh your page. Design-time is gone and now you have your fancy arrows running.\u003cbr\u003e[Check it out here](http://codepen.io/ruisoftware/pen/mPqORy \"on CodePen\")\r\n\r\nAs you can see, design-time is a temporary tool that should be used to fecth the correct parameters.\u003cbr\u003e\r\nIt is not intended to be deployed into production.\r\n\r\n# License\r\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\r\n\r\n# Bug Reports \u0026 Feature Requests\r\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsRefPointer/issues) to report any bugs or file feature requests.\r\n\r\n# Contributing\r\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsRefPointer/blob/master/CONTRIBUTING.md) from more information.\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsrefpointer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rsrefpointer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsrefpointer/lists"}