https://github.com/ruisoftware/jquery-rsoverview
Birds-eye view of whole document or overflowed element
https://github.com/ruisoftware/jquery-rsoverview
bidirectional bookmark bookmarks codepen document javascript jquery overflow overview scrollbar viewport
Last synced: about 1 month ago
JSON representation
Birds-eye view of whole document or overflowed element
- Host: GitHub
- URL: https://github.com/ruisoftware/jquery-rsoverview
- Owner: ruisoftware
- License: mit
- Created: 2014-03-08T21:48:47.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T15:17:22.000Z (over 9 years ago)
- Last Synced: 2025-03-18T07:38:00.253Z (over 1 year ago)
- Topics: bidirectional, bookmark, bookmarks, codepen, document, javascript, jquery, overflow, overview, scrollbar, viewport
- Language: JavaScript
- Homepage:
- Size: 403 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
#doc {
position: fixed;
width: 5em;
height: 15em;
right: 1em;
top: 1em;
}
#overflowed {
display: inline-block;
width: 30em;
height: 20em;
border: 1px grey dashed;
overflow: hidden; /* hide the native scroll bars. I want to use custom ones instead */
}
#element {
position: absolute;
left: 32em;
top: 10em;
width: 10em;
height: 8em;
}
#elementHoriz {
position: absolute;
left: .5em;
width: 29em;
top: 26.2em;
height: 1em;
}
#elementVert {
position: absolute;
top: 7.2em;
left: 29.6em;
height: 19em;
width: 1em;
}
.content {
background-color: rgba(200, 100, 100, .5);
cursor: crosshair;
}
.viewport {
background-color: rgba(0, 0, 0, .5);
cursor: move;
}
#element .content {
background-image: url('./bug.jpg');
background-size: cover;
overflow: hidden; /* to hide the box-shadow below */
}
#element .viewport {
background-color: transparent;
box-shadow: 0 0 0 3em rgba(255, 255, 255, .4);
}
jquery-rsOverview plugin demo
Make your own horizontal, vertical or bidirectional scroll bar.
// add some content to the page
var $body = $('body').css('white-space', 'nowrap');
for (var i = 0; i < 250; ++i) {
$body.append('<p>' + new Array(15).join('The quick, brown fox jumps over a lazy dog. --' + i + '--') + '</p>');
}
// bidirectional scroll bar for the whole document
$('#doc').rsOverview();
// bidirectional scroll bar for the #overflowed element
$('#element').rsOverview({
monitor: $('#overflowed')
});
// vertical scroll bar for the #overflowed element
$('#elementVert').rsOverview({
monitor: $('#overflowed'),
direction: 'vertical'
});
// horizontal scroll bar for the #overflowed element
$('#elementHoriz').rsOverview({
monitor: $('#overflowed'),
direction: 'horizontal'
});
````
# 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.