Peek Page Preview. Format - JAVASCRIPT,CSS Dependencies req: JQuery

By Aishwarya Agrawal

This is a peek box that is revealed in case of hover on the scrollbar. The box contains the preview of the page at that scrollHeight. Format - JAVASCRIPT,CSS Dependencies req: JQuery

Packet Name:- Page Preview

Format:- JAVASCRIPT,CSS Dependencies req: JQuery

Current Problem: To peek at any point on a given web page we have to go to that position, which could be not that simple in the case of long documents

Proposed Solution: A peek box is revealed in case of hover on the scrollbar. The box contains the preview of the page at that scrollHeight

Functions of the packet: It has 2 basic functions
1. How the page preview at the corresponding scroll height.
2. Show and hide the box at all other times.

Content of the zip: This is a code packet containing two files
1. previewscript.js: Containing the JavaScript.
2. previewstyle.css: Containing the CSS.
3. demo.HTML: A demo of what the box would work without further customization.
4. README

How to Use: It involves just 2 steps (look at the demo.HTML first and hover over the scrollbar)
1. Download and add the two files (previewscript.js, previewstyle.css) to the same folder as index.HTML of your file

2. Add the given lines to the bottom of the body tag i.e. add previewscript.js and jquery to the HTML file.

 

script src="http://code.jquery.com/jquery-3.4.1.min.js"/

script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"/

script src="previewscript.js"/

(Look at README for details)

Made by: Aishwarya Agrawal