[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

find exact location of cursor on browser

Posted on 2011-02-22
18
Medium Priority
?
351 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 2
18 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34957672
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
ID: 34957918
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:Gurvinder Pal Singh
ID: 34957924
did you checked the first link?
0
Technology Partners: 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!

 

Author Comment

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

Expert Comment

by:Gurvinder Pal Singh
ID: 34957976
Yes, search for 'getRelativeCoordinates' or just scroll down
0
 

Author Comment

by:bhomass
ID: 34958028
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:Gurvinder Pal Singh
ID: 34958060
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
ID: 34958091
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:Gurvinder Pal Singh
ID: 34958243
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
 

Author Comment

by:bhomass
ID: 34958308
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:Gurvinder Pal Singh
ID: 34958316
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
ID: 34958548
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
ID: 34965149
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
ID: 34965230
I'd say - rather not possible.
0
 

Accepted Solution

by:
bhomass earned 0 total points
ID: 34966295
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34967272
@bhomass: So now you are willing to switch to GWT? and you found my solution messy! :)
0
 

Author Comment

by:bhomass
ID: 34967728
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
ID: 35005320
found solution myself
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

649 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