Question

A while back I asked a question on how to Highlight lines of text on mouseover. However, as I used this for a while I noticed a few flaws with this system. One them was that users lose track of where they were after switching to a new tab/moving the mouse to do something else.

That’s why I want to do the same thing, except with mouseclicks, or even better, the arrow keys on the keyboard.

I have no idea if this is possible as I have no experience with jQuery. If anyone knows a script like this or if anyone could write me one that would be great!

Many thanks in advance!

Answer 1

Here is this jquert part

$(document).ready(function() {
  $(".textWrapper").click(function(e) {
      var relativePos = e.pageY - this.offsetTop;
      var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
      $(".highlight", this).css("top", textRow + "px");
      $(".highlight", this).show();
  });
});

And the js fiddle of course
http://jsfiddle.net/gFTrS/8/

For the arrow keys it is a bit trickier cause i need a way to figure out the number of lines in the paragraph