473,321 Members | 1,778 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

get a single word from point(x,y)

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.
Jun 27 '08 #1
8 3026
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.
Jun 27 '08 #2
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?
Jun 27 '08 #3
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.
Jun 27 '08 #4
>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
Jun 27 '08 #5
On 2 Giu, 19:38, Dan Rumney <danrum...@warpmail.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.internet.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>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)
Jun 27 '08 #6
* 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?
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.
--
Björn Höhrmann · mailto:bj****@hoehrmann.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/
Jun 27 '08 #7
On Jun 2, 7:55*pm, Dave <dtm...@gmail.comwrote:
On 2 Giu, 19:38, Dan Rumney <danrum...@warpmail.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.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[i]+ " ";
e.onmouseover= function (e) {
target.innerHTML= this.textContent+" ("+e.clientX+", "+e.clientY
+")";
};
}
};

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

--Jorge.
Jun 27 '08 #8
On Jun 2, 7:38*pm, Dan Rumney <danrum...@warpmail.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.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[i]+ " ";
e.onmouseover= function (e) {
t.innerHTML= this.textContent+" ("+e.clientX+", "+e.clientY+")";
};
}
};

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

--Jorge.
Jun 27 '08 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Charlie | last post by:
I need help figuring out how to print a single entry from a database using vb.net. I have written a program that will allow the user to view/edit/add a recipe to an Access 2000 database. My problem...
4
by: gregus | last post by:
Hi everyone!!! I want to read data from several files into a single buffer. How can I do this??? I have something like this: //... typedef unsigned short word; const unsigned int W_SIZE =...
0
by: mharris | last post by:
I need help with merging two Word documents into one through C# code. The problem isn't so much getting the documents put into one as it is maintaining the appropriate formatting, or rather...
3
by: Tarrant | last post by:
Hello, I am having amazing difficulties in getting SQL to search for a single word in a text field. I have tried using PATINDEX and LIKE statements but they don't work, sure they 'work', but not in...
7
by: gar | last post by:
Hi, I need to replace all the double quotes (") in a textbox with single quotes ('). I used this code text= Replace(text, """", "'" This works fine (for normal double quotes).The problem...
1
by: Andrew Burton | last post by:
I'm poking at a small "single page application" (SPA), ala TiddlyWiki, to act as kind of a local, single-user version of Twitter (no real application, except to familiarize myself with JavaScript)....
0
by: Atos | last post by:
SINGLE-LINKED LIST Let's start with the simplest kind of linked list : the single-linked list which only has one link per node. That node except from the data it contains, which might be...
1
by: veer | last post by:
Hi i made program on searching and if a word is present in a file more than one time this program search it one time and exit the file but i want to show all the locations of the searched word in...
11
by: arnuld | last post by:
C takes input character by character. I did not find any Standard Library function that can take a word as input. So I want to write one of my own to be used with "Self Referential Structures" of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.