Highlighting text selections

[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

[CloudedVision]

Try innerHTML:

Code: Select all

myobj.innerHTML = myobj.innerHTML + "<div id="new_note!"></div>";

[mikemike2004]

I have tried innerHTML and it works the same as the first method. For the first method I initially parse the whole text node that's handling the selection into three parts, the substring BEFORE the selected string, the substring AFTER the selected substring and the selected subtring. Then I created a text node contianing the BEFORE substring, a text node containing the AFTER substring and a text node containing the "<span>" + the selected substring.
Then I removed the entire text node containing the selected substring and append the newly created text nodes back on. It worked but not in a very stable way. Also, no other highlighting could be done on texts appearing after the highlighted string! I did the same using innerHTML and the result is the same.

[CloudedVision]

im still not quite seeing what your trying to get at, but possibly use js to mess around with the CSS styling to acheive your affect.

[mikemike2004]

I have posted my work online. Please go to http://www.geocities.com/mailsation99/addtoolbar.html. It's a bookmarklet and only two functions (add sticky and highlight) work but annotations are not saved because server side is done implemented yet. What I'm trying achieve is something like the Diigo annotation system. A system where users can annotate on a web page by adding sticky notes or highlighting texts and they can be saved for retrieval later and by other users of the application.

[CloudedVision]

The link is broken.

[mikemike2004]

Sorry, it's http://www.geocities.com/mailstation99/addtoolbar.html