Looking for a solution to place a textarea element directly over an ordered list (<ol>) with list items (<li>). This would allow the user to edit the list.
The translation functions to convert items to text and vice versa have already been implemented. For the second part, all the <li> elements are removed and recreated from the text.
The challenge lies in positioning this textarea precisely over the list.
Edit:
Below is some code snippet:
<h2>TODO List</h2>
<div id="container">
<ol id="theol" style="margin-left: 10px; padding-left: 15px; width: 270px; border: 1px solid Gray;">
<li><span>Locate the ol element</span></li>
<li><span>Add the text input after it</span></li>
<li><span>Change text input style to position it over the <ol></span></li>
<li><span>Capture ENTER or ESC (maybe blur() too)</span></li>
<li><span>If ESC then just abandon everything</span></li>
<li><span>If ENTER (or blur()) then clear all the <li> and recreate them</span></li>
<li><span>Get rid of input</span></li>
</ol>
</div>
<script src="http://cdn.jsdelivr.net/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- injected script -->
<script type="text/javascript">
var theol = $('ol#theol');
var newlist = $('<textarea/>').insertAfter(theol);
// how can we position 'newlist' exactly over 'theol'?
</script>
Note that the script is injected through a bookmarklet, so pre-existing data cannot be controlled. Additionally, the styling may not be fixed as shown above (such as margin, padding, width), and the height might vary based on content.