4

Sorry for my English.

I'm using css multi-column layout , is there a way to get content of a specific column , or how to find the index of the string where sperate the columns.

<title>Multi-column Layout</title>
<style type="text/css">
  div.foo { 
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
</style>
<body>
  <div class="foo">
  <script>
    var i = 30, s = [];
    while (i--) {
      s.push('<p>Lorem ipsum dolor sit amet, consectetur adipiscing'
         + ' elit. In magna arcu, condimentum a tempor vel,'
         + ' imperdiet nec lacus. Vestibulum iaculis arcu et justo'
         + ' suscipit non pharetra sem pulvinar. Suspendisse nec'
         + ' enim non dolor fringilla blandit.<\/p>'); 
    }
    document.write(s.join(''));
  </script>
  </div>    
</body>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user615816
  • 439
  • 4
  • 16
  • Let the world see what you have tried so far! – sgowd Feb 24 '12 at 11:42
  • i'm following this tutorial. http://www.quirksmode.org/css/multicolumn.html and i'm using "Test 5: height + column-width" – user615816 Feb 24 '12 at 11:57
  • 2
    Not so hasty, the question is reasonable. – RobG Feb 24 '12 at 12:10
  • 1
    Not without some heavy lifting in JavaScript. I did something similar with jQuery by wrapping each word (it was simple text) with a `` and then iterating all the spans to see which ones were at the top of the column and then re-parsing back into text between the two words in each column. Things then started to get ugly if the page was zoomed. Is your content just text or does it contain markup? Also why do you need to do this? Depending on _why_, there might be an alternative approach to solving your question. – andyb Feb 24 '12 at 12:19
  • i'm developing an iPad ebook reader , i'm using this to turn chapters into pages. My content will contain imgs also. – user615816 Feb 24 '12 at 12:27
  • 1
    Your problem is different to a previous question but my (not perfect) answer to http://stackoverflow.com/questions/5405789/increase-font-size-with-javascript-around-fixed-floated-images-in-css-columns/ might help or could be adapted (maybe the ``ification of the paragraphs part and checking which ones are at the top). Be warned though, the JavaScript is not simple but is fairly well commented – andyb Feb 24 '12 at 12:45

1 Answers1

-1

Easy solution here.

http://jsbin.com/igizoy/2

Add the ID to each column, and add a class. Then you can can add a handler to get the id of any row.

Dovy
  • 1,278
  • 10
  • 19