Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Obtaining all X,Y Co-ordinates of a page 2
- Thread starter ma701sd
- Start date
-
1
- #2
luciddream
Programmer
function moveThing()
{
x = new Number(window.event.clientX);
y = new Number(window.event.clientY);
window.status = x + " , " + y
}
document.onmousemove = moveThing;
this works in ie adam@aauser.com
{
x = new Number(window.event.clientX);
y = new Number(window.event.clientY);
window.status = x + " , " + y
}
document.onmousemove = moveThing;
this works in ie adam@aauser.com
try this:
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
thex = eobj.clientX
they = eobj.clientY
self.status = thex+","+they
}
document.onmousemove=mouseMoved
for IE...netscape, if I get a chance to figure it out, I'll post that too (probably not!) jared@aauser.com
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
thex = eobj.clientX
they = eobj.clientY
self.status = thex+","+they
}
document.onmousemove=mouseMoved
for IE...netscape, if I get a chance to figure it out, I'll post that too (probably not!) jared@aauser.com
-
1
- Thread starter
- #4
luciddream
Programmer
clientX/Y doesn't give you screen coordinates, it gives you window coordinates. adam@aauser.com
- Thread starter
- #8
Thanks for the code,
Let me take this one step further...
What Im trying to do is:
Allow a user to place an image or text anywhere on the page.
I can do this via capturing an X and Y co-ordiante via a form, passing the variable to a action page, and then using CSS and Coldfusion to use the variables to place the text/image according to the co-ordinate. This is rimitive but it works
However, the user needs to be able to visually see where they want to place the image or text on the input page, therefore I was thinking a series of checkboxes where a user can choose two checkboxes (to represent an X and Y Co-ordinate). This is then captured and displayed on the actionpage accordingly.
I dont think ive explained it very well, If a more detailed explanantion is required, then please let me know.
i am attaching my code to help clarify what I'm trying to do:
Createpage.cfm (this is the page where the users X'Y's co-ordinate is captured, but at the moment, the user is entering the co-ordinates blindly i.e. unsure what the co-ordinate (100,100) will yield)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<FORM ACTION= "previewXYpage.cfm" METHOD="POST">
Enter your X Co-ordinate <INPUT TYPE ="Text" NAME="X"><BR>
Enter your Y Co-ordinate <INPUT TYPE ="Text" NAME="Y"><BR>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
This is the actionpage where the variables are retrieved and positioned accordingly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">
#companyname
{
position:absolute;
top: <CFOUTPUT>#X#</cfoutput>px;
left: <cfoutput>#Y#</cfoutput>px;
}
</style>
</head>
<body>
<DIV ID="CompanyName">
YYY
</div>
</body>
</html>
I hope this visually clarifies what Im trying to do
ANyhelp would be greatly appreciated
Many thanks
Sam
Let me take this one step further...
What Im trying to do is:
Allow a user to place an image or text anywhere on the page.
I can do this via capturing an X and Y co-ordiante via a form, passing the variable to a action page, and then using CSS and Coldfusion to use the variables to place the text/image according to the co-ordinate. This is rimitive but it works
However, the user needs to be able to visually see where they want to place the image or text on the input page, therefore I was thinking a series of checkboxes where a user can choose two checkboxes (to represent an X and Y Co-ordinate). This is then captured and displayed on the actionpage accordingly.
I dont think ive explained it very well, If a more detailed explanantion is required, then please let me know.
i am attaching my code to help clarify what I'm trying to do:
Createpage.cfm (this is the page where the users X'Y's co-ordinate is captured, but at the moment, the user is entering the co-ordinates blindly i.e. unsure what the co-ordinate (100,100) will yield)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<FORM ACTION= "previewXYpage.cfm" METHOD="POST">
Enter your X Co-ordinate <INPUT TYPE ="Text" NAME="X"><BR>
Enter your Y Co-ordinate <INPUT TYPE ="Text" NAME="Y"><BR>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
This is the actionpage where the variables are retrieved and positioned accordingly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">
#companyname
{
position:absolute;
top: <CFOUTPUT>#X#</cfoutput>px;
left: <cfoutput>#Y#</cfoutput>px;
}
</style>
</head>
<body>
<DIV ID="CompanyName">
YYY
</div>
</body>
</html>
I hope this visually clarifies what Im trying to do
ANyhelp would be greatly appreciated
Many thanks
Sam
<style>
.clickablearea{cursor:hand;}
</style>
</head>
<body>
<script>
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
if(eobj.srcElement.className=="clickablearea"
{
thex = eobj.clientX
they = eobj.clientY
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
</script>
<div class="clickablearea">Ma701sd, you can store these coords.</div><br><br>
<div>But not these...</div>
<form name="formname">
<input name=x><input name=y>
</form> jared@aauser.com
.clickablearea{cursor:hand;}
</style>
</head>
<body>
<script>
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
if(eobj.srcElement.className=="clickablearea"
{
thex = eobj.clientX
they = eobj.clientY
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
</script>
<div class="clickablearea">Ma701sd, you can store these coords.</div><br><br>
<div>But not these...</div>
<form name="formname">
<input name=x><input name=y>
</form> jared@aauser.com
- Thread starter
- #10
Hi,
I was trawling through my emails and I found the reply for this post I put up ages ago!
Thanks for your replys
I tried it and it works although it's not exactly how I want it to work however you have provided the mechanics of what I need.
Can ask a favour, Could you possibly provide some coments (in real layman terms) as i've never done javascript before?
Also I modifed what you did to make it fit with what I'm doing, but I get a runtime error and asks would I like to debug? WHy does it do this, heres the code:
<style>
.clickablearea{cursor:hand;}
</style>
</head>
<body>
<script>
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
if(eobj.srcElement.className=="clickablearea"
{
thex = eobj.clientX
they = eobj.clientY
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
</script>
<div class="clickablearea">Ma701sd, you can store these coords.</div><br><br>
<div>But not these...</div>
<!--- <form name="formname"> --->
<!--- <input name=x><input name=y> --->
<FORM ACTION= "previewXYpage.cfm" METHOD="POST">
Enter your X Co-ordinate <INPUT NAME=X><BR>
Enter your Y Co-ordinate <INPUT NAME=Y><BR>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
Once Ive obtained the co-ordinate, I want to pass it to the next page for which I have have the code to manipulate..Is this correct in terms of the logisitics:
<STYLE TYPE="text/css">
#companyname
{
position:absolute;
top: <CFOUTPUT>#X#</cfoutput>px;
left: <cfoutput>#Y#</cfoutput>px;
}
</style>
</head>
<body>
<DIV ID="CompanyName">
the text variable positioned according the X and Y co-ordinates from the previous page
Many thanks and best regards
Samir
I was trawling through my emails and I found the reply for this post I put up ages ago!
Thanks for your replys
I tried it and it works although it's not exactly how I want it to work however you have provided the mechanics of what I need.
Can ask a favour, Could you possibly provide some coments (in real layman terms) as i've never done javascript before?
Also I modifed what you did to make it fit with what I'm doing, but I get a runtime error and asks would I like to debug? WHy does it do this, heres the code:
<style>
.clickablearea{cursor:hand;}
</style>
</head>
<body>
<script>
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
if(eobj.srcElement.className=="clickablearea"
{
thex = eobj.clientX
they = eobj.clientY
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
</script>
<div class="clickablearea">Ma701sd, you can store these coords.</div><br><br>
<div>But not these...</div>
<!--- <form name="formname"> --->
<!--- <input name=x><input name=y> --->
<FORM ACTION= "previewXYpage.cfm" METHOD="POST">
Enter your X Co-ordinate <INPUT NAME=X><BR>
Enter your Y Co-ordinate <INPUT NAME=Y><BR>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
Once Ive obtained the co-ordinate, I want to pass it to the next page for which I have have the code to manipulate..Is this correct in terms of the logisitics:
<STYLE TYPE="text/css">
#companyname
{
position:absolute;
top: <CFOUTPUT>#X#</cfoutput>px;
left: <cfoutput>#Y#</cfoutput>px;
}
</style>
</head>
<body>
<DIV ID="CompanyName">
the text variable positioned according the X and Y co-ordinates from the previous page
Many thanks and best regards
Samir
- Thread starter
- #11
sorry, I forgot to mention...
The error I get when I click on "Ma701sd, you can store these coords" is "document.formnanme.x is null or not an object"
Also, what do you mean when you said that the X/Y co-ordinates are given only for the screen co-ordinates/windows co-ordinates?
Once again, I really appreciate your help
Best Regards
Sam...
The error I get when I click on "Ma701sd, you can store these coords" is "document.formnanme.x is null or not an object"
Also, what do you mean when you said that the X/Y co-ordinates are given only for the screen co-ordinates/windows co-ordinates?
Once again, I really appreciate your help
Best Regards
Sam...
- Thread starter
- #13
Hey Jaredn,
Thanks, I got it sussed thanx,
But could you please provide some comments to the code as I dont fully understand what it's doing.
Also, what did you mean when you said
"X/Y co-ordinates are given only for the screen co-ordinates/windows co-ordinates?"
Many thanxs for your help
Thanks, I got it sussed thanx,
But could you please provide some comments to the code as I dont fully understand what it's doing.
Also, what did you mean when you said
"X/Y co-ordinates are given only for the screen co-ordinates/windows co-ordinates?"
Many thanxs for your help
function mouseMoved()
{
var eobj,thex,they
eobj = window.event
//store the event object
if(eobj.srcElement.className=="clickablearea"//check to see if its "clickable"
{
thex = eobj.clientX //store y coord
they = eobj.clientY //store x coord
//display them
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
//every time the mouse moves call mouseMoved jared@aauser.com
{
var eobj,thex,they
eobj = window.event
//store the event object
if(eobj.srcElement.className=="clickablearea"
//check to see if its "clickable"{
thex = eobj.clientX //store y coord
they = eobj.clientY //store x coord
//display them
document.formname.x.value=thex
document.formname.y.value=they
}
}
document.onclick=mouseMoved
//every time the mouse moves call mouseMoved jared@aauser.com
- Thread starter
- #15
- Thread starter
- #16
Hi Jaredn,
Sorry, but I have another question that I hope you might be able to help me with..
WHat I have done is embedded the code within two forms (Eventually I want to make as many forms as there are elements that I want to position). WHat I have done is made the clickable area a table row, but, As I have two forms and I click on the top row, the co-ordinates are displayed in the second forms input box. I hope this makes sense...I have posted the code..Please help
<form name="previewXYpage.cfm" ACTION ="previewXYpage.cfm" METHOD="Post">
<table bgcolor="#COCOCO" cellspacing="1" cellpadding="1" border="2">
<tr>
<td WIDTH=1%><div class="clickablearea">This a clickable row</td></div>
</tr>
</table>
The X Co-Ordinate is <input type="text" name="x" Value=0><BR>
The Y Co-Ordinate is <input type="text" name="y" Value=0>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
<form name="formname" ACTION ="previewXYpage.cfm" METHOD="Post" >
<table bgcolor="#COCOCO" cellspacing="1" cellpadding="1" border="2">
<tr>
<td WIDTH=1%><div class="clickablearea">This a clickable row</td></div>
</tr>
</table>
The X Co-Ordinate is <input type="text" name=x Value=0><BR>
The Y Co-Ordinate is <input type="text" name=y Value=0>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
Sorry, but I have another question that I hope you might be able to help me with..
WHat I have done is embedded the code within two forms (Eventually I want to make as many forms as there are elements that I want to position). WHat I have done is made the clickable area a table row, but, As I have two forms and I click on the top row, the co-ordinates are displayed in the second forms input box. I hope this makes sense...I have posted the code..Please help
<form name="previewXYpage.cfm" ACTION ="previewXYpage.cfm" METHOD="Post">
<table bgcolor="#COCOCO" cellspacing="1" cellpadding="1" border="2">
<tr>
<td WIDTH=1%><div class="clickablearea">This a clickable row</td></div>
</tr>
</table>
The X Co-Ordinate is <input type="text" name="x" Value=0><BR>
The Y Co-Ordinate is <input type="text" name="y" Value=0>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
<form name="formname" ACTION ="previewXYpage.cfm" METHOD="Post" >
<table bgcolor="#COCOCO" cellspacing="1" cellpadding="1" border="2">
<tr>
<td WIDTH=1%><div class="clickablearea">This a clickable row</td></div>
</tr>
</table>
The X Co-Ordinate is <input type="text" name=x Value=0><BR>
The Y Co-Ordinate is <input type="text" name=y Value=0>
<INPUT TYPE = "Submit" VALUE ="Enter">
<INPUT TYPE = "Reset" VALUE ="Clear">
</FORM>
</body>
</html>
- Thread starter
- #17
you can either add the class="clickable area" to any element on the page, or just remove that code entirely:
if(eobj.srcElement.className=="clickablearea"
take out above and accompanying braces that enclose the if code
than any part of the page will be 'clickable'...
jared@aauser.com
if(eobj.srcElement.className=="clickablearea"
take out above and accompanying braces that enclose the if code
than any part of the page will be 'clickable'...
jared@aauser.com
- Thread starter
- #19
Thanx Jaredn,
I tried the second option i.e remove the
if(eobj.srcElement.className=="clickablearea"
but what happens now is that when I submit to the action page by clicking "enter" button, the co-ordinates of the "enter" button are captured every time...
Is there anyway to stop this from happening?
Thanx
Sam
I tried the second option i.e remove the
if(eobj.srcElement.className=="clickablearea"
but what happens now is that when I submit to the action page by clicking "enter" button, the co-ordinates of the "enter" button are captured every time...
Is there anyway to stop this from happening?
Thanx
Sam
- Status
Similar threads
- Locked
- Question
- Locked
- Question