Sample code for adding annotation/note in Javascript

Question

I have an HTML file and I am opening it with Webkit.

I want to develop an app such that after opening it, I should be able to select some text and make it noted (say by pressing a 'Note Text' button).

When I press the button, a note image should appear on the right, but I cannot figure out the selected text position and I also have no idea about how to add a floating image on the right (maybe a div element)?

Can anyone give me a fragment of sample code about adding annotations/notes in Javascript?

What have you tried so far? Helping you is a lot easier when we can see what javascript/css/html you have already put together — Keith.Abramo
– Keith.Abramo, Commented Nov 23, 2011 at 12:28
In addition to what @Keith.Abramo said, have you tried googling javascript selection position and javascript floating button? — bezmax
– bezmax, Commented Nov 23, 2011 at 12:30

Mike Partridge · Accepted Answer · 2011-11-23 12:47:03Z

2

I recently used this article on Quirksmode.org to get started with identifying a user selection in Javascript. Essentially, IE differs from other browsers in what information you get about the selection: Mozilla and other browsers provide the relatively powerful Selection, while IE provides a TextRange.

If you're able to stick to Webkit-based browsers, you have significant ability to identify selected text with the Selection returned by window.getSelection().

As for adding a floating image near your selected text, you can use the anchorNode property of the Selection to find the element near to which you'll want to add your image. To do the actual positioning of the image - yes, probably in a div, I recommend learning about positioning in CSS.

answered Nov 23, 2011 at 12:47

Mike Partridge

5,2878 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sample code for adding annotation/note in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related