Entry
How can I allow the user to click anywhere in the document to make annotations?
How can I allow the user to click anywhere in the document to make annotations?
Mar 13th, 2001 06:48
Martin Honnen,
Here is an IE4+ solution that inserts an INPUT TYPE="text" field where
the user clicks and when the user has changed the content of the text
fields inserts its value in a predefined style into the document. Note
that there are no steps taken to store the annotations on the server.
The functions also contain NN6/Mozilla code but these do not work as the
range method insertNode is not yet implemented in NN6.0/NN6.01/Mozilla
0.8.
<HTML>
<HEAD>
<TITLE>
annotatable document
</TITLE>
<STYLE>
.annotation {
border: 1px solid green;
background-color: yellow;
color: blue;
}
</STYLE>
<SCRIPT>
var i = 0;
document.onclick = function (evt) {
if (document.all) {
var range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.pasteHTML(
'<INPUT ID="annotation" ONCHANGE="insertAnnotation(this)">');
document.all.annotation.focus();
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0);
var input = document.createElement('INPUT');
input.id = 'annotation';
input.setAttribute ('onchange', 'insertAnnotation(this)');
range.insertNode(input);
input.focus();
}
}
}
function insertAnnotation (input) {
if (document.all)
input.outerHTML = '<SPAN ID="annotation' + i++ +
'" CLASS="annotation">' + input.value + '</SPAN>';
else if (document.getElementById) {
var span = document.createElement('SPAN');
span.id = 'annotation' + i++;
span.className = 'annotation';
span.appendChild(document.createTextNode(input.value));
input.parentNode.replaceChild(span, input);
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.status =
'Click anywhere to annotate the document.';">
Kibology for all. All for Kibology.
<DIV>
I am not disappointed by Clinton. He is a politician. When looking for
moral character I turn to religious leaders like Kibo.
<DIV ALIGN="right">
Al Bore
</DIV>
</DIV>
</BODY>
</HTML>
Jeff Yates of http://pbwizard.com has implemented the missing
functionality of the Range object in JavaScript and has made that fix
available at
http://pbwizard.com/Standards/scripts/RangePatch.js
So for the time being you might want to use the following to have code
that works with IE and Mozilla.
<HTML>
<HEAD>
<TITLE>
annotatable document
</TITLE>
<STYLE>
.annotation {
border: 1px solid green;
background-color: yellow;
color: blue;
}
</STYLE>
<SCRIPT SRC="http://pbwizard.com/Standards/scripts/RangePatch.js">
</SCRIPT>
<SCRIPT>
var i = 0;
document.onclick = function (evt) {
if (document.all) {
var range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.pasteHTML(
'<INPUT ID="annotation" ONCHANGE="insertAnnotation(this)">');
document.all.annotation.focus();
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0);
var input = document.createElement('INPUT');
input.id = 'annotation';
input.setAttribute ('onchange', 'insertAnnotation(this)');
range.insertNode(input);
input.focus();
}
}
}
function insertAnnotation (input) {
if (document.all)
input.outerHTML = '<SPAN ID="annotation' + i++ +
'" CLASS="annotation">' + input.value + '</SPAN>';
else if (document.getElementById) {
var span = document.createElement('SPAN');
span.id = 'annotation' + i++;
span.className = 'annotation';
span.appendChild(document.createTextNode(input.value));
input.parentNode.replaceChild(span, input);
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.status =
'Click anywhere to annotate the document.';">
Kibology for all. All for Kibology.
<DIV>
I am not disappointed by Clinton. He is a politician. When looking for
moral character I turn to religious leaders like Kibo.
<DIV ALIGN="right">
Al Bore
</DIV>
</DIV>
</BODY>
</HTML>
