[mikemike2004]

Dear all,

Hi, I'm an undergraduate currently embarking on my final year project. The objective is to implement a sticky note annotation system where the stickies must be linked to the text on the webpages. Also, the system is to provide a function to highlight selected texts.

SO my design is:

1) capture the selected text
2) encapsulate the selected text with a <span id="spanTag"> tag
3) to add a sticky, just append a new <div id="sticky"> to the span
3) to highlight, just change the background color property of the <span id="spanTag"> to yellow

Problem:

Initially, I have tried first capturing the selected text, then find the parent element of the text node handling the selection event and split the whole text node into three sections. The purpose is to capture the substring before the selected text and the substring after the selected texts. This method was no good since it prevents the page to be highlighted more than once.

Secondly, I have tried using W3C Range object and IE's TextRange. I use the W3C Range object's insertNode method to insert a <span> tag encapsulating the range. With IE, I used the TextRange object's pasteHTML method to add <span tag. This method works much better than the first and it's more stable. However, problem arises when a user wants to highlight text across two paragraphs e.g. end of paragraph 1 and start of paragaph 2. The Range just starts a new line with the selected texts hence changing the appearance of the web page.

Can anyone please suggest a better way of doing this!?OR any other way to achieve the objective???

NB: I also need to save the information in a database so that a user can see his/her annotations + other user's annotations on a webpage.

THANK YOU VERY MUCH for your attention.

Regards,

Mike