In Full-Screen Mode, Enable Two-Page Navigation with Next and Previous Buttons

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.4

Detailed description of issue
I am implementing a feature to display pages side by side. I have successfully added next and previous buttons for navigation in the normal view, allowing users to navigate two pages at a time. However, when in full-screen mode, I am unable to display these custom buttons in the same manner as the library’s default buttons, which appear at the bottom center. I also attempted to capture the events of the existing library’s previous/next buttons without success. Could you provide any suggestions on how to resolve this issue?

Expected behaviour
Users should be able to navigate two pages at a time using the previous and next buttons in full screen mode.

image
image1920×1204 115 KB

Does your issue happen with every document, or just one?
This issue occurs only when a document is opened in full-screen mode.

Code snippet

navigateToNextPage = () => {
        const totalPages = this.documentViewer.getPageCount();
        const currentPage = this.documentViewer.getCurrentPage();

        if (currentPage < totalPages) {
            const nextPage = Math.min(currentPage + 2, totalPages);
            this.documentViewer.setCurrentPage(nextPage);
            this.updatePageNumber();
        }
    };

    navigateToPreviousPage = () => {
        const currentPage = this.documentViewer.getCurrentPage();
        const previousPage = Math.max(currentPage - 2, 1);
        if (currentPage > 1) {
            this.documentViewer.setCurrentPage(previousPage);
            this.updatePageNumber();
        }
    };
2

Hi there,

Using your code, I am able to navigate to the 3rd & 4th page in double page mode in our demo (PDF.js Viewer Demo | PDF.js Express) in full screen mode:

image
image1920×830 115 KB

All I am applying is the code in the console:

const totalPages = documentViewer.getPageCount();
const currentPage = documentViewer.getCurrentPage();

if (currentPage < totalPages) {
    const nextPage = Math.min(currentPage + 2, totalPages);
    documentViewer.setCurrentPage(nextPage);
}

The bottom buttons still appear in full screen mode when the mouse is near that area.

Best regards,
Kevin Kim

3

Yes that logic currently working for normal view custom( created by me) buttons.

For full screen mode. How can I want get the event of user clicked on next and previous buttons?

4

You can add a listener using javaScript to the buttons.

This is the button element:

image
image1920×808 145 KB

then you can add an event listener to the button like so:
image
image1920×746 103 KB

Then the button will click to page 4 (page 3 first then the next page). This works in full screen mode as well.

Best regards,
Kevin Kim