Programmer looking for a Programmer for 1 job

• Required Knowledge

  Javascript, DOM, Prototype, EXPERT LEVEL PROGRAMMER
  
• Additional Info

  Here goes:
  
  When a user clicks anywhere in a DIV (which may have child elements), I want to insert an element that displays a "comment" at that position. I've tried a few things, but it seems that this can be really tricky (especially with nested elements). Take this HTML as an example:
  
  HTML Code:
  
  <div id="main">
  Hello, my name is <strong>Adam</strong>.
  <br> Here is a list:<br>
  <ul>
  <li>123</li>
  <li>abc</li>
  </ul>
  </div>
  
  
  When they click the 'n' in name, for example, I'd like to insert a [span] tag there. I've been able to achieve this using ranges, but the results aren't 100% reliable.
  
  The user should be able to add as many comments as they want. They should not be able to click the "comment" element and insert a comment within a comment. I hope that makes sense.
  
  I also need to be able to keep track of the location of the comment (character count from parent div? character count from child div?) such that I can insert any saved comment when the page reloads. One problem is that the character count changes once a new comment is inserted... so maybe there is a better solution. Elements may not have IDs, so the only way I can think of storing this information is by the index of the child of the parent element and the offset of the text.
  
  Any ideas?
  
  Thanks.
  
  NOTE - I will be happy to clarify this example. Please do not submit an offer without a few questions or comments. I need someone who can do this right the first time and knows exactly how they'll go about doing it.
  

• Tags

  javascript, prototype, dom
  

• Comments

  You need to be logged in to make a comment.

• Make an Offer

  You need to be logged in to make an offer.