{"id":24708752,"url":"https://github.com/ruisoftware/jquery-rsoverview","last_synced_at":"2026-05-18T09:10:48.729Z","repository":{"id":14829001,"uuid":"17551782","full_name":"ruisoftware/jquery-rsOverview","owner":"ruisoftware","description":"Birds-eye view of whole document or overflowed element","archived":false,"fork":false,"pushed_at":"2017-03-22T15:17:22.000Z","size":413,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T07:38:00.253Z","etag":null,"topics":["bidirectional","bookmark","bookmarks","codepen","document","javascript","jquery","overflow","overview","scrollbar","viewport"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-08T21:48:47.000Z","updated_at":"2016-11-15T13:37:48.000Z","dependencies_parsed_at":"2022-09-19T23:23:00.142Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsOverview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsOverview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsOverview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsOverview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsOverview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsOverview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244917825,"owners_count":20531657,"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","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":["bidirectional","bookmark","bookmarks","codepen","document","javascript","jquery","overflow","overview","scrollbar","viewport"],"created_at":"2025-01-27T06:47:24.795Z","updated_at":"2025-10-06T03:46:59.784Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-rsOverview [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsOverview.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsOverview)\nDisplays two rectangles, one inside the other. The outer rectangle represents the content (document), while the inner rectangle represents the viewport (browser window).  \n\nIt provides to the user a visual overview of where the viewport is located within the document as well their relative sizes.  \n\n# Use cases\n- Custom horizontal scroll bar.\n- Custom vertical scroll bar.\n- Custom two directional scroll bar in a single control.\n![rsoverview](https://cloud.githubusercontent.com/assets/428736/20385043/ebf1049a-acc6-11e6-98cc-ed2bfea53718.png)\n\nIt works for the whole document page as well any overflowed element.  \nAlso it can bookmark locations in the current page for a later visit.  \nYou can use the [beforeunload event](https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload) to save the bookmarks of tehe current page, just before a new page is loaded. After a new page is loaded, you can get their new bookmarks, thus never loosing track of the bookmarks.\n\nCheck out a [demo](http://codepen.io/ruisoftware/pen/LbbGme \"on CodePen\").\n\n# Key Features\n - Works with the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e (whole page) or any other element;\n - Optionally auto hides itself if the viewport is larger than the content;\n - Viewport size is updated when browser is resized;\n - Overrides the native mouse wheel speed (if `mousewheel` property is not zero); \n - Bookmark management:\n     - Toogle bookmarks at the current location;\n     - Scroll to next or previous bookmark;\n     - Clear all bookmarks;\n     - Load and save bookmarks;\n - Highly customizable:\n     - Any markup you want, as long is not inline;\n     - Free to style the way you want in CSS;\n     - Strong event driven support;\n - Responsive design, suitable for any window sizes;\n \n# Installation\n\nYou can install from [npm](https://www.npmjs.com/):\n````bash\nnpm install jquery.rsOverview --save\n````\nor directly from git:\n````javascript\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsOverview/master/src/jquery.rsOverview.js\"\u003e\u003c/script\u003e\n````\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsOverview.js` from your local machine.\n\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\n\n# Usage\n\nFirst, you must run grunt. Grunt among other tasks, minimizes the js file and places all production files inside a new dist folder.\n\nOpen the following file from `src/demo/demo.html` (or you can try it [live here](http://codepen.io/ruisoftware/pen/LbbGme \"on CodePen\")).\n\n````html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'\u003e\u003c/script\u003e\n    \u003cscript src='../../dist/jquery.rsOverview.min.js'\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n        #doc {\n            position: fixed;\n            width: 5em;\n            height: 15em;\n            right: 1em;\n            top: 1em;\n        }\n\n        #overflowed {\n            display: inline-block;\n            width: 30em;\n            height: 20em;\n            border: 1px grey dashed;\n            overflow: hidden; /* hide the native scroll bars. I want to use custom ones instead */\n        }\n\n        #element {\n            position: absolute;\n            left: 32em;\n            top: 10em;\n            width: 10em;\n            height: 8em;\n        }\n\n        #elementHoriz {\n            position: absolute;\n            left: .5em;\n            width: 29em;\n            top: 26.2em;\n            height: 1em;\n        }\n\n        #elementVert {\n            position: absolute;\n            top: 7.2em;\n            left: 29.6em;\n            height: 19em;\n            width: 1em;  \n        }\n\n        .content {\n            background-color: rgba(200, 100, 100, .5);\n            cursor: crosshair;\n        }\n\n        .viewport {\n            background-color: rgba(0, 0, 0, .5);\n            cursor: move;\n        }\n\n        #element .content {\n            background-image: url('./bug.jpg');\n            background-size: cover;\n            overflow: hidden; /* to hide the box-shadow below */\n        }\n\n        #element .viewport {\n            background-color: transparent;\n            box-shadow: 0 0 0 3em rgba(255, 255, 255, .4);\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003ejquery-rsOverview plugin demo\u003c/h1\u003e\n    \u003cp\u003eMake your own horizontal, vertical or bidirectional scroll bar.\u003c/p\u003e\n\n    \u003caside id='doc'\u003e\u003c/aside\u003e \u003c!-- bidirectional scroll bar for the whole document --\u003e\n \n    \u003cdiv id='overflowed'\u003e\n        \u003cimg src='./bug.jpg' width='653' height='436'\u003e\n    \u003c/div\u003e\n    \u003c!-- vertical, horizontal and bidirectional scroll bars --\u003e\n    \u003caside id='elementVert'\u003e\u003c/aside\u003e\n    \u003caside id='elementHoriz'\u003e\u003c/aside\u003e\n    \u003caside id='element'\u003e\u003c/aside\u003e\n\n    \u003cscript\u003e\n        // add some content to the page\n        var $body = $('body').css('white-space', 'nowrap');\n        for (var i = 0; i \u003c 250; ++i) {\n            $body.append('\u003cp\u003e' + new Array(15).join('The quick, brown fox jumps over a lazy dog. --' + i + '--') + '\u003c/p\u003e');\n        }\n\n        // bidirectional scroll bar for the whole document\n        $('#doc').rsOverview();\n        \n        // bidirectional scroll bar for the #overflowed element\n        $('#element').rsOverview({\n            monitor: $('#overflowed')\n        });\n\n        // vertical scroll bar for the #overflowed element\n        $('#elementVert').rsOverview({\n            monitor: $('#overflowed'),\n            direction: 'vertical'\n        });\n\n        // horizontal scroll bar for the #overflowed element\n        $('#elementHoriz').rsOverview({\n            monitor: $('#overflowed'),\n            direction: 'horizontal'\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n````\n# License\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\n\n# Bug Reports \u0026 Feature Requests\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsSlideIt/issues) to report any bugs or file feature requests.\n\n# Contributing\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsSlideIt/blob/master/CONTRIBUTING.md) from more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsoverview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rsoverview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsoverview/lists"}