Open snenp opened 7 years ago
@snenp can you show me how to hide the toolbars? I tried but still not work.
@fiq265 You have to put style="display:none;"
in the div that you want to hide, at the file index.html of viewerjs.
Here you have all the code of body from index.html without toolbars.
<body>
<div id = "viewer">
<div id = "titlebar" class = "no-print" style="display:none;">
<div id = "documentName" style="display:none;"></div>
<div id = "titlebarRight">
<button id = "print" class = "toolbarButton print" title = "Print"></button>
<button id = "presentation" class = "toolbarButton presentation" title = "Presentation"></button>
<button id = "fullscreen" class = "toolbarButton fullscreen" title = "Fullscreen"></button>
<button id = "download" class = "toolbarButton download" title = "Download"></button>
</div>
</div>
<div id = "toolbarContainer" class = "no-print" style="display:none;">
<div id = "toolbar">
<div id = "toolbarLeft">
<div id = "navButtons" class = "splitToolbarButton">
<button id = "previous" class = "toolbarButton pageUp" title = "Previous Page"></button>
<div class="splitToolbarButtonSeparator"></div>
<button id = "next" class = "toolbarButton pageDown" title = "Next Page"></button>
</div>
<label id = "pageNumberLabel" class = "toolbarLabel" for = "pageNumber">Page:</label>
<input type = "number" id = "pageNumber" class = "toolbarField pageNumber"/>
<span id = "numPages" class = "toolbarLabel"></span>
</div>
<div id = "toolbarMiddleContainer" class = "outerCenter">
<div id = "toolbarMiddle" class = "innerCenter">
<div id = 'zoomButtons' class = "splitToolbarButton">
<button id = "zoomOut" class = "toolbarButton zoomOut" title = "Zoom Out"></button>
<div class="splitToolbarButtonSeparator"></div>
<button id = "zoomIn" class = "toolbarButton zoomIn" title = "Zoom In"></button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" title="Zoom" oncontextmenu="return false;">
<option id="pageAutoOption" value="auto" selected>Automatic</option>
<option id="pageActualOption" value="page-actual">Actual Size</option>
<option id="pageWidthOption" value="page-width">Full Width</option>
<option id="customScaleOption" value="custom"> </option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
</select>
</span>
<div id = "sliderContainer">
<div id = "slider"></div>
</div>
</div>
</div>
<div id = "toolbarRight"></div>
</div>
</div>
<div id = "canvasContainer">
<div id = "canvas"></div>
</div>
<div id = "overlayNavigator" class = "no-print" style="display:none;">
<div id = "previousPage"></div>
<div id = "nextPage"></div>
</div>
<div id = "overlayCloseButton" class = "no-print" style="display:none;">
✖
</div>
<div id = "dialogOverlay" class = "no-print" style="display:none;"></div>
<div id = "blanked" class = "no-print" style="display:none;"></div>
</div>
</body>
@snenp Thanks, I use another package which uses this viewerJS but this method does not work for that package. I found the index.html with this code and change as yours but still does not work. btw thanks very much for the solution.
Hi,
I have hidden the toolbars but the space they occupied remains empty. I would like to be able to fill that space with the preview of the PDF.
Also if possible I would like to set a zoom by default, and remove any margins.
Is it possible?