• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 355
  • Last Modified:

find exact location of cursor on browser

it is possible to find the html element which contains the current cursor location using DOM. however, I don't see any way to find the cusor position within the element.

for example, if you have <span>my text</span>. If the user clicks the mouse right after 'my', is there any way to determine the cursor position of 2 within the span element?
0
bhomass
Asked:
bhomass
  • 9
  • 7
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
jquery solution
   $("#special").click(function(e){

      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;

      $('#status2').html(x +', '+ y);
   });

and this also
http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23698983.html
0
 
bhomassAuthor Commented:
I know about the methods for getting x and y coordinates. That is not what I am looking for.

I am looking for the cursor position in terms of number of chars within the containing element.
0
 
Gurvinder Pal SinghCommented:
did you checked the first link?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bhomassAuthor Commented:
yeah, it returns x, y coordinates just like the other examples. did I miss something?
0
 
Gurvinder Pal SinghCommented:
Yes, search for 'getRelativeCoordinates' or just scroll down
0
 
bhomassAuthor Commented:
yes, it may return x, y coordinates relative to its container, but it is x, y coordinates, nevertheless.

I am looking for the "char index". for example,
cusorPos = 2;  as in my very original scenario.
0
 
Gurvinder Pal SinghCommented:
but if you know the size of those characters (from font size), you can still manage to find the number of characters.

0
 
bhomassAuthor Commented:
right, that's a lot of programming using fontmetrics. I am wondering if someone has made that available already.
0
 
Gurvinder Pal SinghCommented:
you can try splitting this span (or which ever element that is needed to show this mouse cursor character index) into smaller spans, so that when you do a mouse over on them you can know the index.

check this to know how to split the span into smaller span
http://stackoverflow.com/questions/4607613/jquery-text-effect-where-words-appear-one-by-one
0
 
bhomassAuthor Commented:
I need char precision. that would call for one span per char.

it is a thought, but too messy to work. right now, I am prepared to do the fontmetric calculation if no open source solution exists.
0
 
Gurvinder Pal SinghCommented:
It may not be as messy as you are thinking, since only that span element needs to get split where this feature is required, not everywhere else.

0
 
Lukasz ChmielewskiCommented:
This thread seem to have getCursorPos function, which may be - I'm not entirely sure - the thing that you want. Take a look at it.
http://cutesoft.net/forums/thread/20556.aspx
0
 
bhomassAuthor Commented:
that apparently only works for input elements, such as <input type="text" >.

I need this for inside a <span> or <div> element.
0
 
Lukasz ChmielewskiCommented:
I'd say - rather not possible.
0
 
bhomassAuthor Commented:
0
 
Gurvinder Pal SinghCommented:
@bhomass: So now you are willing to switch to GWT? and you found my solution messy! :)
0
 
bhomassAuthor Commented:
I haven't responded to your last post yet. I need to allow the user to click every where on a page. There is no ONE span to split. Every span needs that capability.

btw, I was already using GWT. I thought for something like this, I would have to go to native javascript to get what I want.
0
 
bhomassAuthor Commented:
found solution myself
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 9
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now