#jquery-rsOverview [](https://travis-ci.org/ruisoftware/jquery-rsOverview)
Displays two rectangles, one inside the other. The outer rectangle represents the content (document), while the inner rectangle represents the viewport (browser window).
It provides to the user a visual overview of where the viewport is located within the document as well their relative sizes.
#Use cases
- Custom horizontal scroll bar.
- Custom vertical scroll bar.
- Custom two directional scroll bar in a single control.
It works for the whole document page as well any overflowed element.
Also it can bookmark locations in the current page for a later visit.
You 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.
Check out a [demo](http://codepen.io/ruisoftware/pen/LbbGme "on CodePen").
#Key Features
- Works with the <body> (whole page) or any other element;
- Optionally auto hides itself if the viewport is larger than the content;
- Viewport size is updated when browser is resized;
- Overrides the native mouse wheel speed (if `mousewheel` property is not zero);
- Bookmark management:
- Toogle bookmarks at the current location;
- Scroll to next or previous bookmark;
- Clear all bookmarks;
- Load and save bookmarks;
- Highly customizable:
- Any markup you want, as long is not inline;
- Free to style the way you want in CSS;
- Strong event driven support;
- Responsive design, suitable for any window sizes;
#Installation
You can install from [npm](https://www.npmjs.com/):
````bash
npm install jquery.rsOverview --save
````
or directly from git:
````javascript
````
or you can download the Zip archive from github, clone or fork this repository and include `jquery.rsOverview.js` from your local machine.
You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.
#Usage
First, you must run grunt. Grunt among other tasks, minimizes the js file and places all production files inside a new dist folder.
Open the following file from `src/demo/demo.html` (or you can try it [live here](http://codepen.io/ruisoftware/pen/LbbGme "on CodePen")).
````html
jquery-rsOverview plugin demo
Make your own horizontal, vertical or bidirectional scroll bar.
````
# 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-rsSlideIt/issues) to report any bugs or file feature requests.
# Contributing
Please refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsSlideIt/blob/master/CONTRIBUTING.md) from more information.
