0

Current Issue is that I need to know the named page's total pages.

Example like this:

<div>
  <div class='page namedPage'></div>
  <div class='page namedPage'></div>
  <div class='page'></div>
  <div class='page'></div>
  <div class='page'></div>
</div>

There are 5 pages, but only the top two pages are named page and need to display page number like "Page 1 / 2", "Page 2 / 2", like below:

.namedPage {
  page: namedPage
}

@page namedPage{
 @bottom-center: {
  content: "Page" counter(page) "/" counter(something idk)
 }
}

I've looked into https://stackoverflow.com/a/49317785, but this solution doesn't work for dynamic named page content, I am not sure how many named pages it will be. Looking for a better way to walk around it, thanks in advance.

JustAG33K
  • 1,403
  • 3
  • 13
  • 28
GoldDigger
  • 53
  • 7
  • You can use `document.getElementsByClassName("page").length`. – Apoorva Chikara Aug 10 '22 at 03:31
  • Sorry I forgot to mention that the number needs to be displayed through page media bottom-center pseudo class, JS can't access to css pseudo class, it can't be done to change the content of page @bottom-center – GoldDigger Aug 10 '22 at 03:45

1 Answers1

1

Finally using document.querySlelctorAll(".rest-of-the-pages").lengthto get rest of the pages' length, then set Paged.js property "--pagedjs-page-count".

pagesArea.style.setProperty("--pagedjs-page-count", ${totalPages} - ${selectLength});
GoldDigger
  • 53
  • 7