get a single word from point(x,y)

D

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.
 
D

Dave

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?
Click to expand...


It's the second.
 
D

Dan Rumney

2) How do I determine which word is at co-ordinates (x,y) on a
It's the second.
Click to expand...

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-details/highlighted-text.html
for one possible solution
 
D

Dave

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.internet.com/page-details/highlighted-text.html
for one possible solution
Click to expand...



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>moveToPoint Example</TITLE>
<script>
function selectMe() {
var r=document.body.createTextRange();
r.moveToPoint(event.x, event.y);
r.expand("word");
alert(r.text);
}
</script>
</HEAD>
<H1 id=myH1 onClick="selectMe()">Click on a word and it will
highlight</H1>
</BODY></HTML>

moveToPoint(x,y)
 
B

Bjoern Hoehrmann

* Dave wrote in comp.lang.javascript:
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?
Click to expand...

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

var rng = document.body.createTextRange();
rng.moveToPoint(window.event.x, window.event.y);
rng.expand("word");

Getting at least the element should be relatively simple using the semi-
standard document.elementFromPoint(...) 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.
 
J

Jorge

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.getElementById(p) },
y= function (p) { return d.createElement(p) },
anArray, target= d.body.appendChild(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.appendChild(e= y("text"))).innerHTML= anArray+ " ";
e.onmouseover= function (e) {
target.innerHTML= this.textContent+" ("+e.clientX+", "+e.clientY
+")";
};
}
};

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

--Jorge.
 
J

Jorge

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.
Click to expand...

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.appendChild(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.appendChild(e= y("text"))).innerHTML= a+ " ";
e.onmouseover= function (e) {
t.innerHTML= this.textContent+" ("+e.clientX+", "+e.clientY+")";
};
}
};

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

--Jorge.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Simple (x,y) graph 3
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How to automatically append x,y values to a matrix 2
Graph of quadratic function with CanvasRenderingContext2D 2
Finding new coordinates of x and y for image(s) 2
Is there a way to get a single mode using all the points within a 2D array? 2
Making a post URL one-time-only or "single use URL" 1
[HELP] Add-on - Twitch chat input 0

Members online

No members online now.
Total: 2,825 (members: 1, guests: 2,824)
Robots: 225

Forum statistics

Threads
474,141
Messages
2,570,817
Members
47,367
Latest member
mahdiharooniir

Latest Threads

Top