User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 332,580 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,099 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
•
•
•
•
FAQ | Community Rules | Welcome Guide
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 325 | Replies: 5
Reply
•
•
Join Date: Oct 2007
Posts: 54
Reputation: still_learning is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
still_learning still_learning is offline Offline
Junior Poster in Training

Get coordinates?

  #1  
7 Days Ago
Hi,

I have created a website that has a page where you can drag layers around to different areas on the page. Is there any way that I can find the new coordinates of a layer after I drag it? What I ultimately need to do is store the coordinates in my database so that I can save the changes made after dragging stuff around. But for starters, I would just like to at least be able to output the coordinates right on the page so that I can see it is working. Please let me know what I can do. Thanks!
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: May 2008
Location: New Zealand
Posts: 12
Reputation: Mohan0704 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
Mohan0704's Avatar
Mohan0704 Mohan0704 is offline Offline
Newbie Poster

Re: Get coordinates?

  #2  
6 Days Ago
I think I know what you mean...


so I'll try to fix it...


ok,
this isn't very accurate, but will do the trick.

first, create a id called 'txt'

then copy this javascript:

Help with Code Tags
JavaScript Syntax (Toggle Plain Text) 
  1. document.onmousemove=showcoords;
  2.  
  3. function showcoords(e)
  4. {
  5. var xpos;
  6. var ypos;
  7. if (navigator.AppName="Microsoft Internet Explorer")
  8. {
  9. xpos = event.x; ypos = event.y;
  10. }
  11. else
  12. {
  13. xpos = e.pageX; ypos = e.pageY
  14. }
  15. document.getElementById ("txt").value = "X: "+xpos+" Y: "+ypos;
  16. }


Then,
Measure how much from the top and left it is.
In other words, put the cursor at the top-left corner of the layer and you'll know where it is.
write it down and store it on your database

Done.
Last edited by peter_budo : 6 Days Ago at 12:15 pm. Reason: Keep It Organized - please use [code] tags
Reply With Quote  
•
•
Join Date: Sep 2005
Posts: 557
Reputation: digital-ether will become famous soon enough digital-ether will become famous soon enough 
Rep Power: 5
Solved Threads: 34
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Posting Pro

Re: Get coordinates?

  #3  
6 Days Ago
•
•
•
•
Originally Posted by still_learning View Post
Hi,

I have created a website that has a page where you can drag layers around to different areas on the page. Is there any way that I can find the new coordinates of a layer after I drag it? What I ultimately need to do is store the coordinates in my database so that I can save the changes made after dragging stuff around. But for starters, I would just like to at least be able to output the coordinates right on the page so that I can see it is working. Please let me know what I can do. Thanks!


Could you post some of the code you're working with?
It seems that in order to drag layers around you'll need to know their coordinates?
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote  
•
•
Join Date: Oct 2007
Posts: 54
Reputation: still_learning is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
still_learning still_learning is offline Offline
Junior Poster in Training

Re: Get coordinates?

  #4  
6 Days Ago
I need it to work so that when I quit dragging a layer and let go of the mouse, the coordinates are automatically grabbed. But I do not need the coordinates of the mouse, I need the coordinates as far as Left and Top go.

The company I am working for will not allow me to post the code. But I have found a website that has a very similar technique for dragging. Please look below and if you can, let me know how I could get the new coordinates based off of this code.....

Help with Code Tags 
<script>

var concernedLayers=new Array()
concernedLayers[0]=new Array("aName",425,160)
concernedLayers[1]=new Array("bName",415,380)
concernedLayers[2]=new Array("cName",290,285)
concernedLayers[3]=new Array("dName",310,285)
concernedLayers[4]=new Array("eName",305,290)
concernedLayers[5]=new Array("fName",635,545)
//syntax is: entry[x]=new Array(LAYERName, its_WIDTH, its_HEIGHT)
//you can go on with indexes [1], [2]...
var engagedZindex=0;
var engaged=null;

//DOM detected build up:
if(document.getElementById){
obj1="document.getElementById('"
obj2="')"
style=".style"
eX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientX":"event.clientX";
eY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientY":"event.clientY";
offsetX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageXOffset":"document.body.scrollLeft"
offsetY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageYOffset":"document.body.scrollTop"
}
else if(document.all){
obj1="document.all['"
obj2="']"
style=".style"
eX="event.clientX"
eY="event.clientY"
offsetX="document.body.scrollLeft"
offsetY="document.body.scrollTop"
}
else if(document.layers){
obj1="document.layers['"
obj2="']"
style=""
eX="e.pageX"
eY="e.pageY"
offsetX="pageXOffset"
offsetY="pageYOffset"
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP)
}
//DOM build up now over

function events(e){//argument must be set as e 
var Xin=eval(eX)
var Yin=eval(eY)
/*thanks to Dynamic HTML by Danny Goodman for
settings of following looping idea*/
for(var i=0;i < concernedLayers.length;i++){
var OGG=eval(obj1+concernedLayers[i][0]+obj2+style);
//is it visible?:
var visib=OGG.visibility
if(visib=="hidden"||
visib=="hide"){continue}
var layerW=concernedLayers[i][1]
var layerH=concernedLayers[i][2]
var L=parseFloat(OGG.left);//parseFloat: could carry a trailing "px" !
var T=parseFloat(OGG.top)
var offX=(document.layers)?0:eval(offsetX);//in case you scrolled
var offY=(document.layers)?0:eval(offsetY)
if(
Xin>(L-offX)&&Xin < (L-offX+layerW)&&
Yin>(T-offY)&&Yin < (T-offY+layerH))
{engaged=i;
moveX=Xin-L
moveY=Yin-T
engagedZindex=OGG.zIndex
setIndex(concernedLayers[i][0])
return}
}
engaged=null
/*keep this comment to reuse freely
http://www.unitedscripters.com */}

function setIndex(theLayer,how){
var OGG=eval(obj1+theLayer+obj2+style)
OGG.zIndex=(how)?how:101;
}

function disengage(){
if(engaged==null){return false}
setIndex(concernedLayers[engaged][0],engagedZindex)
moveX=null;
moveY=null;
engaged=null;
}

function dragLayer(e){
if(engaged==null){return false}
var Xin=eval(eX)
var Yin=eval(eY)
var OGG=eval(obj1+ concernedLayers[engaged][0]+ obj2+ style)
//now move it
OGG.top=Yin-moveY
OGG.left=Xin-moveX
/*keep this comment to reuse freely
http://www.unitedscripters.com */
}

document.onmousedown=events
document.onmousemove=dragLayer
document.onmouseup=disengage

</script>


Thanks
Reply With Quote  
•
•
Join Date: Sep 2005
Posts: 557
Reputation: digital-ether will become famous soon enough digital-ether will become famous soon enough 
Rep Power: 5
Solved Threads: 34
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Posting Pro

Re: Get coordinates?

  #5  
6 Days Ago
•
•
•
•
Originally Posted by still_learning View Post
I need it to work so that when I quit dragging a layer and let go of the mouse, the coordinates are automatically grabbed. But I do not need the coordinates of the mouse, I need the coordinates as far as Left and Top go.

The company I am working for will not allow me to post the code. But I have found a website that has a very similar technique for dragging. Please look below and if you can, let me know how I could get the new coordinates based off of this code.....

Help with Code Tags 
<script>

var concernedLayers=new Array()
concernedLayers[0]=new Array("aName",425,160)
concernedLayers[1]=new Array("bName",415,380)
concernedLayers[2]=new Array("cName",290,285)
concernedLayers[3]=new Array("dName",310,285)
concernedLayers[4]=new Array("eName",305,290)
concernedLayers[5]=new Array("fName",635,545)
//syntax is: entry[x]=new Array(LAYERName, its_WIDTH, its_HEIGHT)
//you can go on with indexes [1], [2]...
var engagedZindex=0;
var engaged=null;

//DOM detected build up:
if(document.getElementById){
obj1="document.getElementById('"
obj2="')"
style=".style"
eX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientX":"event.clientX";
eY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientY":"event.clientY";
offsetX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageXOffset":"document.body.scrollLeft"
offsetY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageYOffset":"document.body.scrollTop"
}
else if(document.all){
obj1="document.all['"
obj2="']"
style=".style"
eX="event.clientX"
eY="event.clientY"
offsetX="document.body.scrollLeft"
offsetY="document.body.scrollTop"
}
else if(document.layers){
obj1="document.layers['"
obj2="']"
style=""
eX="e.pageX"
eY="e.pageY"
offsetX="pageXOffset"
offsetY="pageYOffset"
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP)
}
//DOM build up now over

function events(e){//argument must be set as e 
var Xin=eval(eX)
var Yin=eval(eY)
/*thanks to Dynamic HTML by Danny Goodman for
settings of following looping idea*/
for(var i=0;i < concernedLayers.length;i++){
var OGG=eval(obj1+concernedLayers[i][0]+obj2+style);
//is it visible?:
var visib=OGG.visibility
if(visib=="hidden"||
visib=="hide"){continue}
var layerW=concernedLayers[i][1]
var layerH=concernedLayers[i][2]
var L=parseFloat(OGG.left);//parseFloat: could carry a trailing "px" !
var T=parseFloat(OGG.top)
var offX=(document.layers)?0:eval(offsetX);//in case you scrolled
var offY=(document.layers)?0:eval(offsetY)
if(
Xin>(L-offX)&&Xin < (L-offX+layerW)&&
Yin>(T-offY)&&Yin < (T-offY+layerH))
{engaged=i;
moveX=Xin-L
moveY=Yin-T
engagedZindex=OGG.zIndex
setIndex(concernedLayers[i][0])
return}
}
engaged=null
/*keep this comment to reuse freely
http://www.unitedscripters.com */}

function setIndex(theLayer,how){
var OGG=eval(obj1+theLayer+obj2+style)
OGG.zIndex=(how)?how:101;
}

function disengage(){
if(engaged==null){return false}
setIndex(concernedLayers[engaged][0],engagedZindex)
moveX=null;
moveY=null;
engaged=null;
}

function dragLayer(e){
if(engaged==null){return false}
var Xin=eval(eX)
var Yin=eval(eY)
var OGG=eval(obj1+ concernedLayers[engaged][0]+ obj2+ style)
//now move it
OGG.top=Yin-moveY
OGG.left=Xin-moveX
/*keep this comment to reuse freely
http://www.unitedscripters.com */
}

document.onmousedown=events
document.onmousemove=dragLayer
document.onmouseup=disengage

</script>


Thanks


Basically, you'll want to add up all the offsets of each parent element until there are no more parent elements.

http://www.quirksmode.org/js/findpos.html

quicksmode explains it a bit. Its a good start, but not usable.
To make it usable you'll also have to account for relatively positioned elements. I'm not sure if window scroll and parent element scroll offsets are included or if you need to cater for that as well.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote  
•
•
Join Date: Oct 2007
Posts: 54
Reputation: still_learning is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
still_learning still_learning is offline Offline
Junior Poster in Training

Re: Get coordinates?

  #6  
6 Days Ago
I have to be honest I don't even know where to start.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 12:50 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC