Some test text!

Hiding DOM elements

In this document
chevron_rightFinding data-element attribute values
chevron_rightConstructor option
chevron_rightRelevant APIs
chevron_rightList of elements

Hiding DOM elements is an essential aspect of a customizable UI. WebViewer UI supports hiding/showing elements both initially and dynamically.

linkFinding data-element attribute values

To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

we can find that it has a data-element value of leftPanel. Now we can use that value to hide/show it.

linkConstructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

const viewerElement = document.getElementById('viewer');
const myWebViewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  disabledElements: [
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, viewerElement);

linkRelevant APIs

To hide/show the DOM elements on the fly, you can use the following APIs:

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM.

linkList of elements

Header

  • header

    • leftPanelButton
    • viewControlsButton
    • panToolButton
    • selectToolButton
    • fitButton
    • zoomOutButton
    • zoomInButton
    • freeHandToolGroupButton
    • freeHandToolButton
    • freeHandToolButton2
    • freeHandToolButton3
    • freeHandToolButton4
    • textToolGroupButton
    • highlightToolButton
    • highlightToolButton2
    • highlightToolButton3
    • highlightToolButton4
    • underlineToolButton
    • squigglyToolButton
    • strikeoutToolButton
    • shapeToolGroupButton
    • rectangleToolButton
    • ellipseToolButton
    • lineToolButton
    • arrowToolButton
    • polylineToolButton
    • polygonToolButton
    • cloudToolButton
    • signatureToolButton
    • freeTextToolButton
    • stickyToolButton
    • miscToolGroupButton
    • calloutToolButton
    • stampToolButton
    • toolsButton
    • searchButton
    • menuButton

Panels

  • leftPanel

    • notesPanelButton
    • notesPanel
    • thumbnailsPanelButton
    • thumbnailsPanel
    • outlinesPanelButton
    • outlinesPanel
  • searchPanel

Overlays

  • viewControlsOverlay

    • defaultPageTransitionButton
    • continuousPageTransitionButton
    • singleLayoutButton
    • doubleLayoutButton
    • coverLayoutButton
    • rotateCounterClockwiseButton
    • rotateClockwiseButton
  • menuOverlay

    • filePickerButton
    • fullScreenButton
    • downloadButton
    • printButton
  • pageNavOverlay
  • toolsOverlay
  • searchOverlay

Popups

  • annotationPopup

    • annotationCommentButton
    • annotationStyleEditButton
    • annotationDeleteButton
  • annotationStylePopup
  • toolStylePopup
  • stylePopup
  • textPopup

    • copyTextButton
    • textHighlightToolButton
    • textUnderlineToolButton
    • textSquigglyToolButton
    • textStrikeoutToolButton
  • contextMenuPopup

    • panToolButton
    • stickyToolButton
    • highlightToolButton
    • freeHandToolButton
    • freeTextToolButton

Modals

  • signatureModal

    • signatureModalCloseButton
    • signatureModalClearButton
    • signatureModalSignButton
  • printModal
  • loadingModal
  • errorModal
  • passwordModal