Home : HTML5 Web Viewing Controls : Removing buttons from the WebDocumentViewer toolbar
Q10404 - HOWTO: Removing buttons from the WebDocumentViewer toolbar

Customization of the WebDocumentViewer (WDV) toolbar is easily done with Jquery and CSS.

A very basic WDV implementation prior to any customization you may make will expose zoom and fit icons on the toolbar, however there are also buttons for saving, and several annotations which customers sometimes wish to remove.

You do not ever want to fully remove a button from the toolbar or set their css display to none, as this can have unwanted side effects. The supported means of hiding buttons is to use their  hide() function which can be accomplished with a bit of jQuery.

For example to hide the "BestFit" button for zoom you would do the following in your css file:

$('.atala-ui-icon-fit-best').parent().hide();

With it hidden, you would then still be able to programmatically call a click on the action to enable the behavior: EX: $('.atala-ui-icon-fit-best').parent().trigger('click');

If you need to unhide a previously hidden button, you just call the show() function on it:

$('.atala-ui-icon-fit-best').parent().show();

Button jQuerySelector
  Zoom Controls
Zoom Area $('.atala-ui-icon-zoom-area').parent()
Zoom Out $('.atala-ui-icon-zoom-out').parent()
Zoom In $('.atala-ui-icon-zoom-in').parent()
  Rotation Controls
Rotate Left $('.atala-ui-icon-rotate-left').parent()
Rotate Right $('.atala-ui-icon-rotate-right').parent()
  Annotation Buttons
Highlight $('.atala-ui-icon-highlight').parent()
Line $('.atala-ui-icon-line').parent()
Frehand $('.atala-ui-icon-freehand').parent()
Rectangle $('.atala-ui-icon-rectangle').parent()
Text $('.atala-ui-icon-text').parent()
Ellipse $('.atala-ui-icon-ellipse').parent()
Lines $('.atala-ui-icon-lines').parent()

In order to ensure the buttons exist in the DOM, you need to ensure the control is initialized first... the common approach is to bind to the viewer initialized event to call your hide commands

Example: Hide the Rotation buttons on startup

_viewer.bind('initialized', function(e) {
        $('.atala-ui-icon-rotate-left').parent().hide();
        $('.atala-ui-icon-rotate-right').parent().hide();
});

 

Related Articles
No Related Articles Available.

Article Attachments
No Attachments Available.

Related External Links
No Related Links Available.
Help us improve this article...
What did you think of this article?

poor 
1
2
3
4
5
6
7
8
9
10

 excellent
Tell us why you rated the content this way. (optional)
 
Approved Comments...
No user comments available for this article.

Powered By InstantKB.NET v1.3
Copyright © 2002, 2017. InstantASP Ltd. All Rights Reserved