Ingenuity, Anyone?

I am trying to use JavaScript to place a pop-up near the current caret position of a text area, like the following, which will pop up when the user presses Control and Space simultaneously in the text area:



Unfortunately I can not find any way to get the coordinates of the caret position in the text area, so I believe there is no way for me to do what I want.

This leaves me with a couple of alternatives:

1. Determine a better place for that pop-up box to go. Some of the more realistic places would be:
   1. At the top left of the textarea. (Probably not the best idea from a user-experience side)
   2. To the right of the text area.
   3. At the top left/right of the page.
2. Use something other than that pop-up box. e.g. this
3. Instead of using a key press to trigger the pop-up, use a mouse click.
4. Develop my own algorithm for finding the coordinates of the caret position. This would be great but very difficult due to the possibility of a people using different fonts and zoom levels. (I don't even know if getting the zoom level is possible.)
5. Hope someone on Neoseeker has an alternative that is not listed here.

So that's where you guys come in. If anyone has a solution to my original problem, that'd be amazing, but if not I'm open to alternatives that would provide the same level of user experience. Even feedback on some of the options already listed would be great.

As an aside, this is part of something I want to build for NAMFox to improve the way people can utilize markup here on Neoseeker. If you are familiar with Intellisense/Autocomplete in IDEs like Visual Studio, Eclipse, and Zend Studio, then it would work very similar to those, but for markup.

Note: This only has to work on Mozilla Firefox, so don't worry about a cross-browser solution.

Thanks in advance.

[size=1][color=#666666]This message was edited by Artificer on Mar 21 2008.

Why not have an option whether it is used or not? So if the user has the option on, it will automatically appear when it recognises part of the string, otherwise it is permanently off. If you then can't work out how to place it perfectly with the caret position you could perhaps have an 'Auto-Complete' field next to the text box.

Also, I don't know if this would help: http://www.thescripts.com/forum/thread145153.html

I found it with a quick google search, but to be honest I don't know how useful it is...js isn't my strong point!

Thanks for the link, Liam. I wish it were that easy though. I really need to get the x-y coordinates of that location, not the position of the caret in the text area itself.

However, I think I'm done trying to get that...if I can force the textareas to have a common font and size (i.e. what I showed in that picture above) then I can do it, even with the zoom level. It's not the best solution, but there's no other way that will provide the same experience.

I don't really want to post the code here but I might post a sample page later showing how I can get coordinates to let you view the code at your leisure.

Artificer, I thought it was pronounced Art-if-ih-sher, guess not. Also, your voice is deep...
Besides you, cool features!

Thanks for the links, cat. I tried this initially about three years ago, but it just became too buggy, because the font sizes were different on Firefox 2 vs Firefox 3, the zoom level on Firefox changed the number of characters per line, and there were so many nuances about how different characters like tabs, hyphens, slashes, and other symbols were handled with regards to line breaks that I was never happy with it working.

Also I would have to change the font on Firefox for Mac to monospace, which didn't sit well with a lot of people.