S
Steve
Hi,
I'm reposting this for those who may not be able to retrieve
attachments.
Below is HTML with javascript to detect the clicked
word. I've added a relatively positioned DIV. Does not give the correct
result.
Even if I experiment with changing the Y coordinate, I can't find any
coordinates that give me the corrrect word after the first text chunk in
the DIV.
Any ideas?
Thanks,
Steve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Finding a word related to an event</title>
<script type="text/javascript">
function getWordFromEvent (evt) {
if (document.body && document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToPoint(evt.clientX, evt.clientY);
range.expand('word');
return range.text;
}
else if (evt.rangeParent && document.createRange) {
alert('else if');
var range = document.createRange();
range.setStart(evt.rangeParent, evt.rangeOffset);
range.setEnd(evt.rangeParent, evt.rangeOffset);
expandRangeToWord(range);
var word = range.toString();
range.detach();
return word;
}
else {
return null;
}
}
/* The implementation below of expandRangeToWord is not meant to be a
complete
implementation of the functionality to expand a range to a word, with
W3C DOM
ranges allowing different types of start/endContainer and the offset
being
a text offset or a node offset depending on the container node type
it would
take more than the few lines below to have a complete implementation.
So this function is here to demonstrate within this test case that
finding a
word from an event is possible but if you want to use it in complex
cases you
need a better implementation of expandRangeToWord as the one below
can throw
errors.
Also the current implementation considers any \S+ between \s and \s a
'word',
your aim when finding a work might differ.
*/
function expandRangeToWord (range) {
var startOfWord = /^\s\S+$/;
var endOfWord = /^\S+\s$/;
var whitespace = /^\s+$/;
// if offset is inside whitespace
range.setStart(range.startContainer, range.startOffset - 1);
while (whitespace.test(range.toString())) {
range.setEnd(range.endContainer, range.endOffset + 1);
range.setStart(range.startContainer, range.startOffset + 1);
}
while (!startOfWord.test(range.toString())) {
range.setStart(range.startContainer, range.startOffset - 1);
}
range.setStart(range.startContainer, range.startOffset + 1);
while (!endOfWord.test(range.toString())) {
range.setEnd(range.endContainer, range.endOffset + 1);
}
range.setEnd(range.endContainer, range.endOffset - 1);
return range.toString();
}
</script>
<script type="text/javascript">
function displayWord (text, inputId) {
var input;
if (text != null && document.getElementById && (input =
document.getElementById(inputId))) {
input.value = text;
}
}
function isMouseLeave (node, evt) {
if (node.contains && evt.toElement) {
return !node.contains(evt.toElement);
}
else if (evt.relatedTarget) {
return !contains(node, evt.relatedTarget);
}
}
function contains (container, containee) {
do {
if (container == containee) {
return true;
}
containee = containee.parentNode;
}
while (containee)
return false;
}
</script>
</head>
<body onclick="var word = getWordFromEvent(event);
if (word != null) {
alert('Clicked word: ' + word);
}"
<h1>Finding a word related to an event</h1>
<p onmousemove="displayWord(getWordFromEvent(event), 'wordOutput');"
onmouseout="if (isMouseLeave(this, event)) {
displayWord('', 'wordOutput');
}">
This is a test paragraph with an onmousemove event handler supposed to
display
the word the mouse is over in the text input below.
Kibology for all. All for Kibology.
</p>
<fieldset>
<legend>word under mouse in above paragraph</legend>
<label>
word:
<input type="text" id="wordOutput" value="" size="20" readonly>
</label>
</fieldset>
<hr>
<p onclick="var word = getWordFromEvent(event);
if (word != null) {
alert('Clicked word: ' + word);
}">
This is a test paragraph which you can click and then the word you
clicked on
should be displayed.
Kibology for all. All for Kibology.
</p>
<div>
Kibology1 for1 all1.
<br>
<br>
Kibology2 for2 all2.
<br>
<br>
<span>Kibology3 for3 all3.</span>
<br>
<br>
</div>
<DIV style="position: relative; top: 50px;">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm"><IMG
height=70 src="Yahoo_files/70iltl.jpg" width=70 border=0></A></TD>
<TD width=8> </TD>
<TD vAlign=top><FONT face=arial size=-1><A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm">Get
your degree online</A><BR>Bachelor?s, Master?s, Post grad,
Certificates.
Top colleges and universities. <A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm">Details</A>.</FONT></TD></TR></TBODY></TABLE>
<HR noShade SIZE=1>
<A
href="http://us.ard.yahoo.com/SIG=1299b5n...100000035&loc=as&tm=y&url=/st.jsp">Mortgage
rates near 1 year lows</A> - $170,000 loan for less than $585 a month.
<HR noShade SIZE=1>
<A
href="http://us.ard.yahoo.com/SIG=1291ukn...t.com/NFX/go/yhxxxnfx0020000375nfx/direct/01/">Netflix
delivers DVD rentals to you</A> - No late fees ? Only $9.99/month ? Try
free.
<HR noShade SIZE=1>
<A
href="http://www.yahoo.com/_ylh=X3oDMTB2MXQ5MTU3BF9TAzI3MTYxNDkEdGVzdAMwBHRtcGwDaW5kZXgtaWU-/s/239944">SBC
Yahoo! DSL</A> - Lowest price ever: $14.95/mo. for a year.<!--
SpaceID=2716149 loc=T noad-spid --> </DIV>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
I'm reposting this for those who may not be able to retrieve
attachments.
Below is HTML with javascript to detect the clicked
word. I've added a relatively positioned DIV. Does not give the correct
result.
Even if I experiment with changing the Y coordinate, I can't find any
coordinates that give me the corrrect word after the first text chunk in
the DIV.
Any ideas?
Thanks,
Steve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Finding a word related to an event</title>
<script type="text/javascript">
function getWordFromEvent (evt) {
if (document.body && document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToPoint(evt.clientX, evt.clientY);
range.expand('word');
return range.text;
}
else if (evt.rangeParent && document.createRange) {
alert('else if');
var range = document.createRange();
range.setStart(evt.rangeParent, evt.rangeOffset);
range.setEnd(evt.rangeParent, evt.rangeOffset);
expandRangeToWord(range);
var word = range.toString();
range.detach();
return word;
}
else {
return null;
}
}
/* The implementation below of expandRangeToWord is not meant to be a
complete
implementation of the functionality to expand a range to a word, with
W3C DOM
ranges allowing different types of start/endContainer and the offset
being
a text offset or a node offset depending on the container node type
it would
take more than the few lines below to have a complete implementation.
So this function is here to demonstrate within this test case that
finding a
word from an event is possible but if you want to use it in complex
cases you
need a better implementation of expandRangeToWord as the one below
can throw
errors.
Also the current implementation considers any \S+ between \s and \s a
'word',
your aim when finding a work might differ.
*/
function expandRangeToWord (range) {
var startOfWord = /^\s\S+$/;
var endOfWord = /^\S+\s$/;
var whitespace = /^\s+$/;
// if offset is inside whitespace
range.setStart(range.startContainer, range.startOffset - 1);
while (whitespace.test(range.toString())) {
range.setEnd(range.endContainer, range.endOffset + 1);
range.setStart(range.startContainer, range.startOffset + 1);
}
while (!startOfWord.test(range.toString())) {
range.setStart(range.startContainer, range.startOffset - 1);
}
range.setStart(range.startContainer, range.startOffset + 1);
while (!endOfWord.test(range.toString())) {
range.setEnd(range.endContainer, range.endOffset + 1);
}
range.setEnd(range.endContainer, range.endOffset - 1);
return range.toString();
}
</script>
<script type="text/javascript">
function displayWord (text, inputId) {
var input;
if (text != null && document.getElementById && (input =
document.getElementById(inputId))) {
input.value = text;
}
}
function isMouseLeave (node, evt) {
if (node.contains && evt.toElement) {
return !node.contains(evt.toElement);
}
else if (evt.relatedTarget) {
return !contains(node, evt.relatedTarget);
}
}
function contains (container, containee) {
do {
if (container == containee) {
return true;
}
containee = containee.parentNode;
}
while (containee)
return false;
}
</script>
</head>
<body onclick="var word = getWordFromEvent(event);
if (word != null) {
alert('Clicked word: ' + word);
}"
<h1>Finding a word related to an event</h1>
<p onmousemove="displayWord(getWordFromEvent(event), 'wordOutput');"
onmouseout="if (isMouseLeave(this, event)) {
displayWord('', 'wordOutput');
}">
This is a test paragraph with an onmousemove event handler supposed to
display
the word the mouse is over in the text input below.
Kibology for all. All for Kibology.
</p>
<fieldset>
<legend>word under mouse in above paragraph</legend>
<label>
word:
<input type="text" id="wordOutput" value="" size="20" readonly>
</label>
</fieldset>
<hr>
<p onclick="var word = getWordFromEvent(event);
if (word != null) {
alert('Clicked word: ' + word);
}">
This is a test paragraph which you can click and then the word you
clicked on
should be displayed.
Kibology for all. All for Kibology.
</p>
<div>
Kibology1 for1 all1.
<br>
<br>
Kibology2 for2 all2.
<br>
<br>
<span>Kibology3 for3 all3.</span>
<br>
<br>
</div>
<DIV style="position: relative; top: 50px;">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm"><IMG
height=70 src="Yahoo_files/70iltl.jpg" width=70 border=0></A></TD>
<TD width=8> </TD>
<TD vAlign=top><FONT face=arial size=-1><A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm">Get
your degree online</A><BR>Bachelor?s, Master?s, Post grad,
Certificates.
Top colleges and universities. <A
href="http://us.ard.yahoo.com/SIG=129gi91....classesusa.com/featuredschools/fos/index.cfm">Details</A>.</FONT></TD></TR></TBODY></TABLE>
<HR noShade SIZE=1>
<A
href="http://us.ard.yahoo.com/SIG=1299b5n...100000035&loc=as&tm=y&url=/st.jsp">Mortgage
rates near 1 year lows</A> - $170,000 loan for less than $585 a month.
<HR noShade SIZE=1>
<A
href="http://us.ard.yahoo.com/SIG=1291ukn...t.com/NFX/go/yhxxxnfx0020000375nfx/direct/01/">Netflix
delivers DVD rentals to you</A> - No late fees ? Only $9.99/month ? Try
free.
<HR noShade SIZE=1>
<A
href="http://www.yahoo.com/_ylh=X3oDMTB2MXQ5MTU3BF9TAzI3MTYxNDkEdGVzdAMwBHRtcGwDaW5kZXgtaWU-/s/239944">SBC
Yahoo! DSL</A> - Lowest price ever: $14.95/mo. for a year.<!--
SpaceID=2716149 loc=T noad-spid --> </DIV>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>