HTML book-like pagination

by

Building on Dan’s answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Hope this helps…

More Related Contents:

  1. How do I re-trigger a WebKit CSS animation via JavaScript?
  2. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  3. How to use pagination on HTML tables?
  4. Freeze Header until Irrelevant (HTML, CSS and JS)
  5. When we using alert vs popup div tag? [closed]
  6. Download the text over image using jquery
  7. Replacing css file on the fly (and apply the new style to the page)
  8. How to autosize a textarea using Prototype?
  9. How to silently hide “Image not found” icon when src source image is not found
  10. Webkit-based blurry/distorted text post-animation via translate3d
  11. How to Include CSS and JS files via HTTPS when needed?
  12. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  13. Use images like checkboxes
  14. Setting CSS value limits of the window scrolling animation
  15. How can I generate the opposite color according to current color?
  16. CSS delivery optimization: How to defer css loading?
  17. Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
  18. Scale element proportional to Background Cover with jQuery
  19. What are the possible ways to hide an element via CSS [closed]
  20. Bootstrap Dropdown with Hover
  21. What are some good ways to prevent people from copying my source code? [closed]
  22. Failed to load resource: the server responded with a status of 404 (Not Found)
  23. Images not loading when relative path is used in React
  24. how to get the base url in javascript
  25. Resize external website content to fit iFrame width
  26. How to show hidden divs on mouseover?
  27. Auto Mobile Site Redirect
  28. Styling Vuetify selectors
  29. Google’s Imageless Buttons
  30. How to apply background-color to a selected option?

Leave a Comment