Solved

find exact location of cursor on browser

Posted on 2011-02-22
18
330 Views
Last Modified: 2012-08-14
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
Comment
Question by:bhomass
  • 9
  • 7
  • 2
18 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
 

Author Comment

by:bhomass
Comment Utility
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
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
did you checked the first link?
0
 

Author Comment

by:bhomass
Comment Utility
yeah, it returns x, y coordinates just like the other examples. did I miss something?
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
Yes, search for 'getRelativeCoordinates' or just scroll down
0
 

Author Comment

by:bhomass
Comment Utility
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
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
but if you know the size of those characters (from font size), you can still manage to find the number of characters.

0
 

Author Comment

by:bhomass
Comment Utility
right, that's a lot of programming using fontmetrics. I am wondering if someone has made that available already.
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:bhomass
Comment Utility
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
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
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
 

Author Comment

by:bhomass
Comment Utility
that apparently only works for input elements, such as <input type="text" >.

I need this for inside a <span> or <div> element.
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
I'd say - rather not possible.
0
 

Accepted Solution

by:
bhomass earned 0 total points
Comment Utility
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
@bhomass: So now you are willing to switch to GWT? and you found my solution messy! :)
0
 

Author Comment

by:bhomass
Comment Utility
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
 

Author Closing Comment

by:bhomass
Comment Utility
found solution myself
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Jquery Typeahead - where is the source set? 1 13
Modify Table Width 6 13
CSS grid style change 2 13
angularls and plnkr 14 17
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now