Member Avatar for indianbaski

Dear All,

Hi.. I need help… Multicolumn text flowing through multipage sliding, should calculate total column, gap, text size, image size for different browser. To be control with Previous Page & Next Page. At the ending of story the next Page sliding should stop.
Please give me suggestions how to implement with CSS, javascript, jsscript, if any...

Best Regards, baski

  • 2 Contributors
  • 4 Replies
  • 132 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by indianbaski

Dani AI

Generated

— the blank pages you describe usually come from a pagination miscalculation: columns/pages are estimated from widths that change (font rendering, images, scrollbars), or the script runs before webfonts/images finish loading. asked for code — below is a practical, robust approach and a few quick fixes that stop the slider from showing empty pages.

Do this in order:

  1. Wait for fonts and images to load before calculating pages (use document.fonts.ready and image onload). Webfonts change line metrics; recalc when they finish.
  2. Measure the exact page box (account for padding, border, scrollbar, and column-gap). For CSS columns, column width + gap determines logical page width; for manual pagination measure the container clientHeight and clientWidth with getBoundingClientRect.
  3. Build pages by filling a fixed-size page container and appending whole paragraphs/blocks until adding the next block overflows; if you must split text inside a block, use a Range-based binary search on character offset (Range.getClientRects) to find the last character that fits. This avoids per-browser line-wrapping surprises.

Small implementation tips:

  • Wait for resources, then call buildPages. Rebuild on resize (debounced).
  • Use transform: translate3d(...) for smooth GPU-accelerated sliding.
  • After you compute pages, keep current = Math.max(0, Math.min(current, pages.length-1)) and disable the Next button when current === pages.length - 1 to prevent sliding into emptiness.

Example snippets:

Promise.all([
  document.fonts ? document.fonts.ready : Promise.resolve(),
  ...Array.from(document.images).filter(i=>!i.complete)
    .map(img=>new Promise(r=>{img.onload=img.onerror=r;}))
]).then(buildPages);
pageIndex = Math.max(0, Math.min(pageIndex, pages.length-1));
next.disabled = (pageIndex === pages.length-1);
prev.disabled = (pageIndex === 0);

See MDN for reliable details on CSS multi-column behavior and the Range/getClientRects and Font Loading APIs: CSS Multi-column Layout, Range API, Font Loading API.

Recommended Answers

All 4 Replies

Member Avatar for twiss

Well, post what you tried?

Member Avatar for indianbaski

thanks..I tried to implement like site of http://www.arpia.be/arpia2/ ( but the blank pages keep on sliding) I need support in this.. thanks

Member Avatar for twiss

What code do you use? Do you have it live somewhere?

Member Avatar for indianbaski

I have attached the js and css, if you can give any suggestion.

All the link files already available in arpia site itself.
thanks

Arpia_Multicolumn.zip (17.26 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.