Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hide toolbars and use empty space #235

Open
snenp opened this issue Jun 20, 2017 · 3 comments
Open

Hide toolbars and use empty space #235

snenp opened this issue Jun 20, 2017 · 3 comments

Comments

@snenp
Copy link

snenp commented Jun 20, 2017

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?
@fiq265
Copy link

fiq265 commented Jul 1, 2017

@snenp can you show me how to hide the toolbars?
I tried but still not work.

@snenp
Copy link
Author

snenp commented Jul 3, 2017

@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;">
            &#10006;
            </div>
            <div id = "dialogOverlay" class = "no-print" style="display:none;"></div>
            <div id = "blanked" class = "no-print" style="display:none;"></div>
        </div>
    </body>

@fiq265
Copy link

fiq265 commented Jul 3, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@snenp @fiq265