Some test text!

Customizing the UI

In this document
chevron_rightCustomizing using a config file
chevron_rightMobile redirecting out of iframe

The legacy UI was designed to be adaptive to accommodate slow devices. Thus, there are two sets of different HTML and JavaScript files for desktop and mobile:

  • ReaderControl.html
  • ReaderControl.js
  • MobileReaderControl.html
  • MobileReaderControl.js

linkCustomizing using a config file

Since a config file is executed inside the iframe, you can use jQuery functions to easily get DOM elements and modify them. For example,

$('.right-aligned').children().first().remove();

Since the UI for the mobile viewer is different than the desktop viewer you may need to make a separate customization for each viewer. In your config file, you can check the $.mobile property to determine if the mobile viewer is loaded or not.

For example:

if ($.mobile) {
  // do mobile specific customization
} else {
  // do desktop specific customization
}
Most other APIs not related to the UI are the same for either viewer so you don't need to use this check everywhere.

linkMobile redirecting out of iframe

By default the mobile viewer will redirect the page so that it is not displayed inside an iframe. This is because often on a mobile device you'll want the document to take up the entire screen and iframes in mobile browsers have had their issues in the past.

If your app requires that the viewer be inline on an existing page you can add the option mobileRedirect: false when you are instantiating WebViewer.