top position of text spread across two columns

Question

I'm having problem with setting top position for the text. There is main div with "column-count:2" and inside there is some text which spreads in two columns. Text is in divided in different tags call "sen". There is also some text which is highlighted with some class. Now I need to find top position of highlighted text which is spread across both the columns But it is giving me wrong position value, i.e. top position in second column i.e. 0

Here is the fiddle link to get the clear idea: https://jsfiddle.net/trupti11/1gt0bf54/

$(function() {
  //This gives top as 0 even though some part of class "h45" is at bottom
  console.log("position sen tag with class h45 " + $('.h45').position().top);

  //This gives correct position of class "span_1892"
  console.log("position span " + $('.span_1892').position().top);

  //problem here: This gives wrong position of class "span_1893" which needs to be something 65px
  console.log("position span " + $('.span_1893').position().top);
});

.textBox {
  width: 500px;
  height: 200px;
  column-count: 2;
  margin: 0;
  padding: 0;
  position: relative;
}

span {
  background-color: #ff0;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
  <sen name="44" class="h h44">
    Barnitz erwiderte seinen Gruß und verharrte einen Moment lang in dieser Pose, als erwarte er, für ein Propagandaplakat <span class="span_1892">fotografiert</span> zu werden.</sen>
  <sen name="45" class="h h45"> Es wäre nicht das <span class="span_1893">erste Mal gewesen, denn</span> so hochgewachsen, kräftig und blond wie er war, verkörperte er das arische Ideal.</sen>
</div>

The values are correct. `.h45` and `.span_1983` are at the top of the `.textBox` element, hence `0` is returned. What are you expecting to see? — Rory McCrossan, Mar 31 '17 at 10:22
What are you trying to achieve? Oh BTW, sen is an invalid HTML element. — , Mar 31 '17 at 10:25
@jeff I need to know exact position of "span_1893" i.e. text "erste Mal" — pravid, Mar 31 '17 at 11:32

Alessandro · Answer 1 · 2017-03-31T12:48:20.603

Probably, the easiest way to accomplish this is to add the height of column one to the position that you find in column two:

function getPosition(target){
  var col = target.closest("sen");
  var h_span = 0;
  //Loop through all "sen" items
  $.each($("sen"), function(i, val){
    //Exit when found the "sen" contains my target
    if(!$(val).find(target).length){
      h_span += $(val).height();
    }else{
      return;
    }
  });
  return text_pos = h_span + target.position().top;
}

var target = $('.span_1893');
console.log("position span is "+ getPosition(target));

.textBox {
  width: 500px;
  height: 200px;
  column-count: 2;
  margin:0;
  padding:0;
  position:relative;
}

span {
  background-color:#ff0;
  padding:0;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
<sen name="44" class="h h44">
Barnitz erwiderte seinen Gruß und verharrte einen Moment lang in dieser Pose, als erwarte er, für ein Propagandaplakat <span class="span_1892">fotografiert</span> zu werden.</sen>
<sen name="45" class="h h45"> Es wäre nicht das <span class="span_1893">erste Mal gewesen, denn</span> so hochgewachsen, kräftig und blond wie er war, verkörperte er das arische Ideal.</sen>
</div>

I hope it helps you. Bye

Thanks for reply. But that doesn't give correct position as some of the text is part of first column, so I can not add up the heights. Besides this is just one scenario, I can not know always whether text is part of first or second or any other column. — pravid, Mar 31 '17 at 11:29
Ok, I updated my snippet... You could find dinamically the "parent sen" — Alessandro, Mar 31 '17 at 12:49

top position of text spread across two columns

1 Answers1