Tips for determining the number of columns in a multi-column web layout using webkit

Having some static HTML content that needs to be formatted using multiple columns, which are presented as pages to the user. The method used is quite simple:

bodyID = document.getElementsByTagName('body')[0];
bodyID.style.width = desiredWidth;
totalHeight = bodyID.offsetHeight;
pageCount = Math.ceil(totalHeight/desiredHeight);
bodyID.style.width = desiredWidth*pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.webkitColumnGap = 0;
bodyID.style.webkitColumnCount = pageCount;

The issue arises when webKit generates more columns than asked for if the content exceeds the specified number of pageCount.

The challenge is to determine the total number of columns rendered in order to implement pagination accurately. However, retrieving the value of 

document.getElementsByTagName('body')[0].style.webkitColumnCount
does not reflect the actual number of columns created.

Any suggestions on how to obtain the correct count of rendered columns?

Appreciate any help provided in advance.

javascripthtmlwebkitcssmultiple-columns

Answer №1

To my surprise, the solution was way simpler than I initially anticipated. All it took was obtaining the precise width of the page through bodyID.scrollWidth, followed by a simple division by desiredWidth to determine the exact number of pages.

I trust this information will prove beneficial to someone in need.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

javascripthtmlajax

Trigger the mousemove event only after the mouse click event has been activated

I need help with my code. I want an onmousemove event to occur when I click and move the mouse. Can someone assist me please? </head> <body> <img id="myImgId" alt="" src="Chrysa ...

javascript

Do two Express JS applications run on separate threads?

Running two express apps on different ports raises the question of whether they assign themselves to different cores, knowing that express typically runs on a single thread. The cluster module, however, replicates the express app and allows them to utiliz ...

javascriptnode.jsexpress

Real-time audio feed permanently stuck in Chromium-powered web browsers

Here is how the audio element appears. No interaction seems to take place with it. (Experimented on ungoogled chromium, Edge, and an android device using a default Chrome browser) Below is the HTML code for the audio element: <div> <audio co ...

htmlaudio

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

htmlcssencodingutf-8

Issues persist while attempting to save sass (.scss) files using Atom on a Mac

When attempting to work with sass files, I encountered an error message every time I tried to save the file: Command failed: sass "/Users/bechara/Desktop/<path of the file>/test.scss" "/Users/bechara/Desktop/<path of the file>/test.css" Errno: ...

cssnode.jsnpmsassatom-editor

Understanding Java and JavaScript variables within a JSP webpage

I am currently working on populating a pie chart from Google with data fetched from my database. Although I have successfully retrieved the desired results in my result set, I am facing challenges in converting my Java variables into JavaScript variables ...

javajavascriptjsp

Making an Ajax call to a RESTful API from another domain

My Restful API functions properly when called from Postman using a specific configuration. I provide the following details on Postman to receive a response: - POST: "" There is no need for authorization. Headers: Content-Type : application/json, username: ...

javascriptjqueryjsonajax

Struggling to verify HTTP GET Request in Node.js with Express.js authentication

Attempting to send data via a Get Request, the recipient is utilizing basicauth-middleware for authentication purposes. Authentication through the browser and within the original program (without sending data) is successful, with a confirmation message ind ...

javascriptnode.jshttpexpressget

Tips for accurately placing the iOS audio player in the footer section

In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer. To ad ...

htmlioscsshtml5-audio

React child component does not refresh upon modification of an array property

In my main application, I have two subcomponents that both receive the same model property. The first subcomponent deals with a number prop from model.myNumberProperty, and the second subcomponent handles an array prop from model.myArrayProperty. When ch ...

javascriptreactjsreact-hooks

How can I create space between a checkbox and its label in Google Web Toolkit (GWT)?

How can I create space between a Checkbox and its content in GWT? Checkbox c = new Checkbox("checkme"); c.setStyleName("checkbox_style"); When I try using padding or margin, the entire checkbox and its content move together. Is there a way to achieve a g ...

javascripthtmlcssgwt

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

Having trouble establishing a connection with the mysql database. Every time I attempt to start the node server, it keeps throwing a database connection error. The specific error message is as follows: connect ETIMEDOUT at Connection._handleConnectTimeou ...

javascriptmysqlnode.js

Refresh the three.js Raycaster when the window size changes

Currently, I am implementing a ray caster to choose objects within my three.js scene. The specific objects I am working with are box geometries shaped like flooring. After a successful selection of an object, I encountered an issue where resizing the wind ...

javascriptthree.jsraycasting

Exploring AngularJS's capabilities with Cross Domain POST requests

One query I have concerning CORS requests that include the HTTP Authorization header: I've noticed that the web browser doesn't seem to send the Authorization header with POST requests, is there a workaround for this? Below is the Angular code ...

javascriptasp.netangularjs

JavaScript and CSS Modal showing incorrect data

Currently, I am utilizing a Jinja2 Template within Flask to render an HTML document. The process involves passing a dictionary called "healthy_alerts" into the Jinja template. Below is a snippet of the dictionary (with sensitive values altered): healthy_a ...

javascripthtmlflaskmodal-dialog

What is the best way to decrease the font size of every element in the DOM?

Is there a way to decrease the size of all DOM elements by a specific amount? Currently, I am using Bootstrap styles where h5 is set at 14px and I need it to be 12px, and h1 is at 36px when I want it to be 34px, and so forth. I have considered two option ...

csstwitter-bootstrapcross-browser

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace

Maximizing Efficiency of Vendor Bundle in Angular 2 with Webpack

My MEAN application's client side is built in Angular2 with Webpack, but I'm facing slow loading times due to a large vendor modules JS file. Is there a way to optimize this situation? I want to separate the vendor's JS file. Below is my we ...

javascriptnode.jsangularwebpack

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

javascriptjqueryhtmlcss