Annotating a webpage
Inside Technique : Extending the Browser : Annotate Extension
The annotate extension is designed to let you add comments to a web-page. By combining this with the Generate Page extension in the InsideDHTML Tools pack, you can annotate and send an instance of a web-page to a friend.
This extension follows the same principal of the URL sample. When the user right clicks and selects annotate, we prompt the user for a comment, and then highlight the selected text and insert the comment into the document. A marker is inserted that represents the comment. When the user clicks the marker, the annotation is alternatively displayed and hidden.
The script below represents the framework for the annotate extension: <SCRIPT>
// Get the source document
var doc = external.menuArguments.document
// Create a textrange for the user´s selection
var sel = doc.selection.createRange()
// Ask the user for a comment
var comment = prompt(”Enter your annotation:”,”\")
// Highlight selected text
sel.execCommand(”BackColor”,false,”Yellow”)
// Insert annotation after highlighted text
sel.collapse(false)
sel.pasteHTML(buildAnnotation(comment, getID(doc.all)))
</SCRIPT>
The above script represents all of the annotate extension minus the functions that build the annotation. The buildAnnotation function takes the user´s comment and a unique ID (supplied by getID) and returns an HTML string with the user´s comment and a small script for hiding and showing the text: <SCRIPT>
function getID(els) {
// Need to find a unique ID
var prefix =”idhtmlan_”
var cnt=1
while (els[prefix+cnt]!=null)
cnt++
return (prefix+cnt)
}
function getClick(id) {
// Build the click handler
var str=”var sEl = document.all[´” + id + “´].style;
sEl.display = (sEl.display == ´none´) ? ´´ : ´none´”
return str
}
function buildAnnotation(comment,id) {
var cl = getClick(id)
var str=”\"
str += “<SUP STYLE=”cursor: default; color:
navy; text-decoration: underline” ONCLICK=”\" + cl + “”>*
</SUP>”
str += “<TABLE ID=”\"+id+”\" STYLE=”position: absolute;
display: none; background: white; border: 1pt black solid; “>
<TR><TD>”
str+= comment
str+= “</TD></TR></TABLE>”
return str
}
</SCRIPT>