Utilizing CSS Multicolumn to display an HTML file, where the column width is set to match the window width, resulting in only one column being visible at a time
_windowWidth = $( window ).innerWidth();_windowHeight = $( window ).innerHeight();overflow: hidden.
To switch between visible columns, I use the following code snippet
$('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});I am looking to retrieve the text from the currently visible column.
$('#content').children(":visible").text();The closest solution I have come across is on Stack Overflow: Get text in CSS3 column?. It suggests using this function:
var getAllTextInColumn = function(rect){
/*
rect should be the size and x,y of the column
{ top, left, width, height }
*/
if(document.caretRangeFromPoint){
var caretRangeStart = document.caretRangeFromPoint(rect.left, rect.top);
var caretRangeEnd = document.caretRangeFromPoint(rect.left+rect.width-1, rect.top+rect.height-1);
} else {
return null;
}
if(caretRangeStart == null || caretRangeEnd == null) return null;
var range = document.createRange();
range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);
range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);
return range.toString();
};
However, I'm unsure how to obtain the rect of a specific column (e.g., column 3).
Any assistance on this matter would be greatly appreciated.
Thank you in advance.
UPDATE:
This function does work but I am having trouble determining its parameters. When I input
left = 0 , top = 0 , width = _windowWidth , height = _windowHeightWhen I input
left = _column * (_windowWidth + _columnGap) , top = 0 , width = _windowWidth , height = _windowHeightcaretRangeStart becomes null.
Trying variations like
left = 0 , top = 0 , width = _column * (_windowWidth + _columnGap) + _windowWidth , height = _windowHeightcaretRangeEnd becoming null, making it difficult to get the function working properly. Any help on finding the right combination would be highly appreciated.