Skip to content
Eric Han Liu edited this page Aug 10, 2018 · 17 revisions

How to use Diva.js

Go to a page with a document viewer serving up a specific document. For example, try this demo instance.

  • To browse through the pages, simply scroll up or down, using the scrollbar or the scroll wheel on your mouse.

    • You can also use the arrow or page up and page down keys. The 'Home' key jumps to the first page of the document, while 'End' jumps to the last page.
  • To zoom in and out, press the zoom buttons to the upper left of the document viewer pane (A).

  • To zoom in on a specific part of the document, double-click an area on a page. (If on a touch device, pinch outwards or double-tap.)

    • To zoom out, simply hold the control-key while double-clicking, or pinch inwards.
    • The viewer will attempt to keep the clicked region under the cursor (this is not always possible when zooming out).
  • To go to a specific page, enter that page label (as specified in the image manifest) or page number in the text box in the upper right (B) and press "Go" or hit the enter key. Suggestions will appear and update while typing to show what page labels exist in the document.

  • To enter or leave fullscreen mode, click the fullscreen button in the far upper right corner (D).

  • To change views, click the view icon in the top right of your screen (C).

    • The view icon changes depending on whether you are in document, book, or grid view. Choose a different view in the drop down menu. Document and Book View work similarly. The only difference is that the Book View displays two pages side by side.
    • In Grid view:
      • To adjust the number of pages that display in each row, use the grid buttons (fewer and more).

        The left button (fewer) decreases the number of pages per row, making each page larger. The right button (more) increases the number of pages per row, making them smaller.

      • To leave grid view, either click the icon again or double-click on a specific page you would like to view.

See Using the Plugins for instructions on how to use the Manipulation, Download, and Metadata plugins (represented by the slider and download buttons above each page, if enabled in a particular instance of Diva.js.)

Touch Devices

Diva.js currently supports a limited variety of touch devices, most notably the iPad. The iPod touch, iPhone, and Android may also work, although performance is lacking due to hardware limitations.

Features:

  • Pinch-zoom on a page to zoom in or out in document view. Double-tap in Document view to zoom in, and in Grid view to get to a particular page.
  • Scroll with one finger within the document viewer. Inertial scrolling is supported.
  • If you add Diva.js as an app to the homepage, the URL bar will disappear, giving you extra screen real estate.
  • The document viewer will resize dynamically depending on the touch device screen size and orientation.