title: Make a div follow caret position in a textarea?
body: <p>JSBin here: <a href="http://jsbin.com/cusisidoja/1/edit?html,js,output" rel="nofollow">http://jsbin.com/cusisidoja/1/edit?html,js,output</a></p>
  
  <hr>
  
  <p>I'm trying to POC a context menu that will pop up given certain keywords are entered in a textarea element. The idea is to implement functionality similar to the way code completion drop-downs work in an IDE.</p>
  
  <p>I realize the scope of this project so the details of the keywords and menu contents aren't important right now. What I'm trying to figure out is how to locate the caret position as the user is typing.</p>
  
  <hr>
  
  <p>So stepping back and breaking the problem down into its most fundamental component:</p>
  
  <p>How can I get the caret position of a textarea in terms of x,y coordinates that are meaningful to CSS styling?</p>
  
  <p>I threw together a JSBin with (what I believe to be) a decent shell for watching/updating the scope of a div when text is changed in the textarea: <a href="http://jsbin.com/cusisidoja/1/edit?html,js,output" rel="nofollow">http://jsbin.com/cusisidoja/1/edit?html,js,output</a></p>
  
  <p>I know this is a far cry from what I'm trying to do, but it's as far as I can get given what I currently understand. I'm also open to the possibility that the only way to accomplish this would be either through external libraries or by use of jQuery, but I don't even know where to begin.</p>