Integrating Diva

Here you will find information about how to integrate Diva into existing websites.

Layout

A note about Diva IDs and selectors

Generally, element classes control the base styles of all Diva instances at once, while element IDs control different styles for each instance. If you look at the HTML in your browser's inspector, you'll notice that classes look like .diva-outer, while IDs look like #diva-1-outer. The ID prefix allows you to control the styles of each Diva instance separately if you have multiple instances on the same page.

Panel size adjustments

If your web application makes any changes to the size of the document viewer pane separate from window resize events, fire the PanelSizeDidChange event to tell Diva about the change so that it can render properly. For more information about events and how to fire one, see the Events System page.

Settings

Here is a selection of settings that you may wish to change in order to fully integrate Diva with your website. For a full list of settings, go to the Settings Page.

blockMobileMove

• Required: No
• Default value: false

When set to true, users viewing the document from a touch device (e.g. an iPad) are unable to move the webpage, to give it more of an app-like feel. This also results in users being unable to scroll the page, which is fine if the document viewer is the only element on the page; if this is not the case, then this behaviour is undesired, in which case it can be disabled by ignoring this setting or setting it to false.

enableAutoTitle

• Required: No
• Default value: true

If set to true, a div element containing the title of the document, with id diva-?-title (where ? is the number of the document viewer, 1-indexed), will be created as the first child of the wrapper element. This only needs to be set to false if you don't want the title to appear, if you want it to appear somewhere completely different in the document, or want to add something before or after the title; for the latter cases, you can get the title of the document using the getItemTitle() method. If you just want to change the appearance of the title you can easily do so through CSS, by targeting the .diva-title class.

enableKeyScroll

• Required: No
• Default value: true
• Comment (in the code): Captures scrolling using the arrow and page up/down keys regardless of page focus. When off, defers to default browser scrolling behavior.

When set to true, the user can scroll down through the document by using the arrow, page up, and page down keys anywhere on the page. This overrides the default arrow and page up/down keys behaviour of scrolling the page (as opposed to the document viewer), and can be disabled if desired (i.e. if there is other content on the webpage that the user may wish to scroll).

enableSpaceScroll

• Required: No
• Default value: false
• Comment (in the code): Scrolling down by pressing the space key

When set to true, pressing the spacebar scrolls the document viewer rather than the entire webpage.

fillParentHeight

• Required: No
• Default value: true

By default, the Diva viewer will fill its parent height. It achieves this by using a flexbox layout, which might break the layout of your website in very particular cases or cause display issues in older browsers. It can thus be disabled by setting fillParentHeight to false, in which case the viewer will, by default, have a height of 700px. This can easily be changed by changing the CSS for the .diva-outer element.