1

Similar to what I asked in this question a while back about getting the index of string onClick with Android, I would like to now do the same thing with JavaScript (I'm using the jQuery library if there's any useful functions for me in there as well). I've searched online and Stack Overflow and can't seem to find anything. My answer in the question I linked deals with (x,y) coordinates and an offset, which I noticed jQuery has, but it seems to give the position of the entire element relative to the document and not the actual (x,y) coordinates. Is there a similar method of getting the (x,y) coordinates with JavaScript (or an even easier way to get the index onClick)? If my question isn't clear enough, given the following String:

Mary never went to school. Mary was way too cool.

I want to have it so that I can get back 3 if someone clicks on the 'y' in the first "Mary" and so on.

As always, any help or a solid direction is greatly appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vinay
  • 6,204
  • 6
  • 38
  • 55
  • 2
    Does it have to be text in a div? For something this accurate its probably easier to draw your own strings on a canvas element, and use it to calculate click vs text position. https://developer.mozilla.org/en/Drawing_text_using_a_canvas – arunkumar Sep 17 '11 at 20:32
  • Matt I understand how annoying it is to get questions on SO without any code. I would show some code if I had a proper direction and was messing up on a technical/implementation aspect. Right now I simply need some direction. I'm not asking for actual code. – Vinay Sep 17 '11 at 20:50
  • Do you want `(x, y)` or the index in a string? – pimvdb Sep 17 '11 at 20:51
  • arunkumar: Thanks for offering another direction to go about this. I'll probably go with ABentSpoon's method out of preference, but if you provide an answer saying to use a Canvas, I'll upvote it. – Vinay Sep 17 '11 at 20:53
  • pimvdb: index in the String. I simply was able to get the index in a String in Android via (x,y) coordinates. – Vinay Sep 17 '11 at 20:53
  • pimvdb: If you do have another way of going about this, please offer an answer so I can upvote it. It's always nice for other people searching for a solution to something to have choice in which way to go about doing something. – Vinay Sep 17 '11 at 20:56

1 Answers1

2

If the text is short enough, it wouldn't be horrible to wrap each letter in its own <span>.

Something like:

var text = $("#clickable-letter-div").html();

var wrapped = $.map(text.match(/./g), function(s, idx){
  return "<span class='letter'>" + s + "</span>"
}).join("");

$("#clickable-letter-div").html(wrapped);

$(".letter").click(function(){
  var pos = $(this).parent().children().index(this);
  alert(pos);
});
cillierscharl
  • 7,043
  • 3
  • 29
  • 47
ABentSpoon
  • 5,007
  • 1
  • 26
  • 23
  • Huh never thought of it that way. Yeah the Strings won't be too long. Perhaps 50 - 70 characters max per String/snippet. Thank you ABentSpoon, I'll definitely try this out. – Vinay Sep 17 '11 at 20:54
  • Just implemented this. Works like a charm. Thanks so much man. I would have been fine with just a general direction, but this was very concise, easy-to-follow code. I wish I could upvote twice. – Vinay Sep 17 '11 at 21:08
  • 2
    `s` should be HTML-escaped before being inserted into a markup string, otherwise `<` or `&` characters in the text will break. – bobince Sep 17 '11 at 21:35