How to get content of a specific column of html page after splitting using css rule (-webkit-column-width :)

i split html page in multiple columns using css rule

var mySheet = document.styleSheets[0];
function addCSSRule(selector, newRule) 
{
   if (mySheet.addRule) {
       mySheet.addRule(selector, newRule);// For Internet Explorer                              
   } else {
       ruleIndex = mySheet.cssRules.length;
       mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex)//for firefox..
   }
}

addCSSRule('html', 'padding: 0px; height: 460px; -webkit-column-gap: 0px; -webkit-column- width: 320px;');

      

How to get content from a specific column. Please help me.

+3


source to share


2 answers


I'm sure there is no easy way to do this. Your best bet is to find the length of the text and get the 1st half (or the third, or the fourth, as it may be) of the content. It will be inaccurate, but it will be close.



Another way would be to select the content that starts at the top and determine the end of the column by the caret position. (I'm just a riffer here. Not sure if this actually works)

+1


source


I can get content in an hour to find and deploy. I hope my exchange will help someone. Pls register: jsfiddle.net/cuongtakien/7YMSL/1/



You can change the position of the start and end points and calculate the height of each column. Finally, you change my hardcode in code and get content.
 Thanks mattsven for posting about createRange in javascript. Have nice code!

+1


source







All Articles