PDA

View Full Version : Need help with div positioning

GateKeeper
09-10-2002, 01:50 PM
This might be the wrong place to ask this question, if it is, just let me know and I will ask it on the proper forum.

I have my little distance measuring function working properly and am now trying to implement a way to mark the path between the origin point and the destination point. The problem arises when the marking function is called. Instead of placing the divs on the existing page, the function opens a new page with all the divs right where they are supposed to be realative to that page. The code I am using is below. Of course, I am still having a blonde hair day and it is probably something simple, but if anyone can give me a little guidance here, I would be thankful.

<script language="javascript">
var dxcoord = 0
var dycoord = 0
var oxcoord = 0
var oycoord = 0
var dist = 0

function getpoints()
{

if (window.event.shiftKey == true)
{
dxcoord=window.event.offsetX
dycoord=window.event.offsetY
}
else
{
oxcoord=window.event.offsetX
oycoord=window.event.offsetY
}

if (dxcoord!=0 && dycoord!=0 && oxcoord!=0 && oycoord!=0)

finddist()
}

function finddist()
{
dist=Math.round(Math.sqrt(Math.pow((oxcoord-dxcoord),2)+Math.pow((oycoord-dycoord),2)))
marktrail()
}

function marktrail()
{
nomoves=Math.round(dist/14)
xmove=Math.round((oxcoord-dxcoord)/nomoves)
ymove=Math.round((oycoord-dycoord)/nomoves)

for (i=0;i<nomoves;i++)
{
xmark=oxcoord+(xmove*i)
ymark=oycoord+(ymove*i)

markstring='<div style="width:14;height:14;position:absolute;z-index:1;top:'+ymark+';left:'+xmark+';visibility:visible"><img src="trail-marker.gif" height="10" width="10" border="0"></div>'

document.write (markstring)
}
}

</script>

GK
JohnKrutsch
09-10-2002, 02:35 PM
When ever you call document.write() from a function it overwrites the exisitng page. If you want to have this happen on the same page you are going to have to dynamically re-write some the divs on your page.
GateKeeper
09-10-2002, 02:40 PM
That's what I figured, can ya point me in the general direction of where I can find some info on that.

GK
JohnKrutsch
09-10-2002, 02:45 PM
What does the rest of your page look like? Post the code so we can see how to best help you with this.
GateKeeper
09-10-2002, 02:53 PM
This is the full code for the page. What I am trying to get is the "trail-marker" image drawn on the "world" image as a way of marking the line between the two points.


<html>
<head>

<script language="javascript">
var dxcoord = 0
var dycoord = 0
var oxcoord = 0
var oycoord = 0
var dist = 0

function getpoints()
{

if (window.event.shiftKey == true)
{
dxcoord=window.event.offsetX
dycoord=window.event.offsetY
}
else
{
oxcoord=window.event.offsetX
oycoord=window.event.offsetY
}

if (dxcoord!=0 && dycoord!=0 && oxcoord!=0 && oycoord!=0)

finddist()
}

function finddist()
{
dist=Math.round(Math.sqrt(Math.pow((oxcoord-dxcoord),2)+Math.pow((oycoord-dycoord),2)))
marktrail()
}

function marktrail()
{
nomoves=Math.round(dist/14)
xmove=Math.round((oxcoord-dxcoord)/nomoves)
ymove=Math.round((oycoord-dycoord)/nomoves)

for (i=0;i<nomoves;i++)
{
xmark=oxcoord+(xmove*i)
ymark=oycoord+(ymove*i)

markstring='<div style="width:14;height:14;position:absolute;z-index:1;top:'+ymark+';left:'+xmark+';visibility:visible"><img src="trail-marker.gif" height="10" width="10" border="0"></div>'

document.write (markstring)
}
}

</script>
</head>

<body leftmargin=0 topmargin=0>

<IMG SRC="world.jpg" BORDER=0 HEIGHT=1728 WIDTH=2304 ALT="" onclick="getpoints()">

</body>
</html>

Thanks again.

GK
JohnKrutsch
09-10-2002, 03:02 PM
Can you attach the pics?
GateKeeper
09-10-2002, 03:05 PM
here is the marker image
GateKeeper
09-10-2002, 03:08 PM
the world image is too big to attach, give me a minute to upload it and I will give you a link to it.
GateKeeper
09-10-2002, 03:13 PM
http://members.aol.com/lrdgarron/private/world.jpg (http://members.aol.com/lrdgaron/private/world.jpg)
GateKeeper
09-11-2002, 02:15 PM
A thought just occured to me. If I were to place the world image within a div that has an ID attribute and then use either a document.write or innerHTML to write additional images using a pixelLeft and pixelTop style, would this eliminate the problem with the entire page being rewritten?
GateKeeper
09-11-2002, 04:06 PM
I think I may have found a solution to my problem with this script. In the function that draws out the markers, I added a line before beginning the "for" loop that redraws the map itself. I know it isn't necessarily a pretty way of doing it, but it seems to work. I would still prefer it if the map didn't have to be redrawn, and I know Jon was looking at the problem. I would still welcome any help that might be offered. Here is the new version of the script.

<html>
<head>

<script language="javascript">
var dxcoord = 0
var dycoord = 0
var oxcoord = 0
var oycoord = 0
var dist = 0

function getpoints()
{

if (window.event.shiftKey == true)
{
dxcoord=window.event.offsetX
dycoord=window.event.offsetY
}
else
{
oxcoord=window.event.offsetX
oycoord=window.event.offsetY
}

if (dxcoord!=0 && dycoord!=0 && oxcoord!=0 && oycoord!=0)

finddist()
}

function finddist()
{
dist=Math.round(Math.sqrt(Math.pow((oxcoord-dxcoord),2)+Math.pow((oycoord-dycoord),2)))
marktrail()
}

function marktrail()
{
nomoves=Math.round(dist/14)
xmove=Math.round((oxcoord-dxcoord)/nomoves)
ymove=Math.round((oycoord-dycoord)/nomoves)

document.write ('<div style="position:absolute;z-index:0;top:0;left:0;visibility:visible"><IMG SRC="world.jpg" BORDER=0 HEIGHT=1728 WIDTH=2304 ALT=""></div>')

for (i=0;i<nomoves;i++)
{
xmark=oxcoord-(xmove*i)
ymark=oycoord-(ymove*i)

markstring='<div style="width:14;height:14;position:absolute;z-index:1;top:'+ymark+';left:'+xmark+';visibility:visible"><img src="trail-marker.gif" height="10" width="10" border="0"></div>'

document.write (markstring)
}
}

</script>
</head>

<body leftmargin=0 topmargin=0>

<IMG SRC="world.jpg" BORDER=0 HEIGHT=1728 WIDTH=2304 ALT="" onclick="getpoints()">

</body>
</html>

The images used are available in previous posts.

GK