get a single word from point(x,y)

[Dave]

Hi all,
I have a problem with DOM.

If I have the xy coordinates in a web page, how can I get (possibly
using Javascript) the corresponding word placed into the web page at
the given coordinates?

Thank you.

[Dan Rumney]

Re: get a single word from point(x,y)

I have a problem with DOM.

>
If I have the xy coordinates in a web page, how can I get (possibly
using Javascript) the corresponding word placed into the web page at
the given coordinates?

The DOM is the Document Object Model which describes the *structure* of
the document and contains no information about how it is displayed.

The rendering of the document is controlled by the User Agent (generally
a web browser, but could be a screen reader or some other UA). This
renders the document according to its own internal rules and, where
appropriate, according to the associated CSS style-sheets.

If you need to place a word at a specific location, one method would be
to put it in a DIV and then set its style property such that its
positioning is absolute and set its top and left properties accordingly.

Just a word of warning: accessibility is a hot button on this forum.
This kind of functionality is not going to come across on screen readers
and text only browsers and some people take issue with this. Ultimately,
the judgment call is yours, but I would strongly recommend that you look
into the impact of this Javascript on the page's accessibility and make
an informed decision as to whether this is an issue for you.

[Dan Rumney]

Re: get a single word from point(x,y)

I have a problem with DOM.

>
If I have the xy coordinates in a web page, how can I get (possibly
using Javascript) the corresponding word placed into the web page at
the given coordinates?

Thinking about this, there are 2 readings:

1) How do I place a word at co-ordinates (x,y) on a visual web page?

2) How do I determine which word is at co-ordinates (x,y) on a visual
web page?

Which are you asking?

[Dave]

Re: get a single word from point(x,y)

Thinking about this, there are 2 readings:
>
1) How do I place a word at co-ordinates (x,y) on a visual web page?
>
2) How do I determine which word is at co-ordinates (x,y) on a visual
web page?
>
Which are you asking?

It's the second.

[Dan Rumney]

Re: get a single word from point(x,y)

>2) How do I determine which word is at co-ordinates (x,y) on a

>visual web page?

>

>Which are you asking?

>
It's the second.

OK, well there is no way to do that using just the DOM, because of the
description I provided in my previous post.

Also, unless you're using absolute positioning, the location of a
given word will vary according to the size of the page because
paragraph's will wrap according to window width.

Without knowing why you need this functionality (i.e. how it fits in
with your application), it's hard to know what to suggest.

One option would be to wrap your relevant words in a span, each with
an onClick event handler to report that the word has been clicked...
might be appropriate, might not be.

Try http://javascript.internet.com/page-...hted-text.html
for one possible solution

[Dave]

Re: get a single word from point(x,y)

On 2 Giu, 19:38, Dan Rumney <danrum...@warp mail.netwrote:

OK, well there is no way to do that using just the DOM, because of the
description I provided in my previous post.
>
Also, unless you're using absolute positioning, the location of a
given word will vary according to the size of the page because
paragraph's will wrap according to window width.
>
Without knowing why you need this functionality (i.e. how it fits in
with your application), it's hard to know what to suggest.
>
One option would be to wrap your relevant words in a span, each with
an onClick event handler to report that the word has been clicked...
might be appropriate, might not be.
>
Tryhttp://javascript.inte rnet.com/page-details/highlighted-text.html
for one possible solution

I founded a similar solution.
The function createTextRange () is used to returns a TextRange object
and moveToPoint(x,y ) is a method of TextRange object that moves the
start position of the text range to the given point.

Thank You, Dan.

This is a code example (only for IE):

<HTML><HEAD>
<TITLE>moveToPo int Example</TITLE>
<script>
function selectMe() {
var r=document.body .createTextRang e();
r.moveToPoint(e vent.x, event.y);
r.expand("word" );
alert(r.text);
}
</script>
</HEAD>
<H1 id=myH1 onClick="select Me()">Click on a word and it will
highlight</H1>
</BODY></HTML>

moveToPoint(x,y )

[Bjoern Hoehrmann]

Re: get a single word from point(x,y)

* Dave wrote in comp.lang.javas cript:

>If I have the xy coordinates in a web page, how can I get (possibly
>using Javascript) the corresponding word placed into the web page at
>the given coordinates?

I think only Internet Explorer for Windows offers a simple solution here

var rng = document.body.c reateTextRange( );
rng.moveToPoint (window.event.x , window.event.y) ;
rng.expand("wor d");

Getting at least the element should be relatively simple using the semi-
standard document.elemen tFromPoint(...) method. If you put every word in
its own element that would be sufficient, otherwise narrowing it down to
the word would be a bit tricky.
--
Björn Höhrmann · mailto:bjoern@h oehrmann.de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

[Jorge]

Re: get a single word from point(x,y)

On Jun 2, 7:55 pm, Dave <dtm...@gmail.c omwrote:

On 2 Giu, 19:38, Dan Rumney <danrum...@warp mail.netwrote:
>
>
>

OK, well there is no way to do that using just the DOM, because of the
description I provided in my previous post.

>

Also, unless you're using absolute positioning, the location of a
given word will vary according to the size of the page because
paragraph's will wrap according to window width.

>

Without knowing why you need this functionality (i.e. how it fits in
with your application), it's hard to know what to suggest.

>

One option would be to wrap your relevant words in a span, each with
an onClick event handler to report that the word has been clicked...
might be appropriate, might not be.

Something ~like this ?

<html><head>
<style>
h1 { text-Align: center; }
text { font-size: 25px; }
</style>
<script>

window.onload= function () {

var txt= " Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.",
e, d= document,
x= function (p) { return d.getElementByI d(p) },
y= function (p) { return d.createElement (p) },
anArray, target= d.body.appendCh ild(y("h1"));

txt+= " Nullam consequat lectus sit amet enim. Proin , ipsum";
txt+= " eu tincidunt iaculis, massa enim quam, at molestie ";
txt+= "enim tellus ac dolor. Aenean tempor tortor. ";
txt+= "Vestibulum sed sem. Curabitur sed erat a nibh tristique.";
txt+= " Lorem ipsum dolor sit amet, consectetuer elit. Etiam ";
txt+= "et pede. Morbi ullamcorper quam. Etiam faucibus, tellus";
txt+= " non mollis gravida, metus mauris posuere mauris, non augue";
txt+= " augue sit amet justo. Suspendisse leo. Proin diam turpis, ";
txt+= " non, tempus vel, ac, nibh. Suspendisse a nunc. Suspendisse";
txt+= " gravida ullamcorper dolor. Maecenas pretium sapien. Donec";
txt+= " volutpat odio ut erat. Nulla facilisi. Nullam dolor.";
txt+= txt+txt;
anArray= txt.split(" ");
for(i= 0; i< anArray.length; i++) {
(d.body.appendC hild(e= y("text"))).inn erHTML= anArray[i]+ " ";
e.onmouseover= function (e) {
target.innerHTM L= this.textConten t+" ("+e.clientX +", "+e.clientY
+")";
};
}
};

</script></head><body></body></html>

--Jorge.

[Jorge]

Re: get a single word from point(x,y)

On Jun 2, 7:38 pm, Dan Rumney <danrum...@warp mail.netwrote:

One option would be to wrap your relevant words in a span, each with
an onClick event handler to report that the word has been clicked...
might be appropriate, might not be.

Or something ~like this ?

<html><head>
<style>
h1 { text-Align: center; }
text { font-size: 25px; }
</style>
<script>

window.onload= function () {

var txt= " Lorem ipsum dolor sit amet, consectetuer adipiscing.",
a, e, i, d= document,
y= function (p) { return d.createElement (p) },
t= d.body.appendCh ild(y("h1"));

txt+= " Nullam consequat lectus sit amet enim. Proin , ipsum";
txt+= " eu tincidunt iaculis, massa enim quam, at molestie ";
txt+= "enim tellus ac dolor. Aenean tempor tortor. ";
txt+= "Vestibulum sed sem. Curabitur sed erat a nibh tristique.";
txt+= " Lorem ipsum dolor sit amet, consectetuer elit. Etiam ";
txt+= "et pede. Morbi ullamcorper quam. Etiam faucibus, tellus";
txt+= " non mollis gravida, metus mauris posuere mauris, non augue";
txt+= " augue sit amet justo. Suspendisse leo. Proin diam turpis, ";
txt+= " non, tempus vel, ac, nibh. Suspendisse a nunc. Suspendisse";
txt+= " gravida ullamcorper dolor. Maecenas pretium sapien. Donec";
txt+= " volutpat odio ut erat. Nulla facilisi. Nullam dolor.";
txt+= txt+txt;
a= txt.split(" ");
for(i= 0; i< a.length; i++) {
(d.body.appendC hild(e= y("text"))).inn erHTML= a[i]+ " ";
e.onmouseover= function (e) {
t.innerHTML= this.textConten t+" ("+e.clientX +", "+e.clientY+")" ;
};
}
};

</script></head><body></body></html>

--Jorge.