style.left DHTML Issue

T

Tim_axe

Gawd
Joined
Dec 12, 2003
Messages
946
I'm building a web application for a modified WRT-54G that takes available GPS position and puts it on a map image. I have already figured out the image, transforming my GPS information into coordinates for the image, getting the GPS information, etc...basically it is all done, but it has an odd behavior...

Whenever I update the position of my 'markers' on the screen, the page width changes. See example image/link combination below (links to the same page as on the router, but with a static GPS position file instead of a script to get a new position):


Click for Web-Version of WRT-54G Where-am-I

The behavior seems to be linked to having the cursor DIV inside of another DIV that has the map image. When the cursor is moved, something about the same size as the map DIV moves too and extends the window. But it only changes the width - it doesn't seem to influence the page height...

I don't know how to fix this behavior and would like to figure it out...if anyone has any suggestions, or can find websites that have any sort of similar code that I can reverse engineer it would be appreciated. See the comments in the above example page for websites that I used to help build it. Thank you.
 
The problem only occurs in FireFox, not IE.

I didn't have much time to play with it, but I've had similar problems running scripts on relative DIVs. It's similar to the "box model" issues of the past.

Simply put, you have to use absolute positioning when overlapping DIVs -- it's the best way to avoid these weird layout issues. If you have a main DIV (aka your MAP one), it should be relative while you could place all your other DIVs using absolute. It's important to remember that ABSOLUTE coordinates (left, top) will start from the top, left corner of it's relative parent DIV. I hope that makes sense... If you really need a detailed explanation, let me know and I'll be more than happy to elaborate.

Anyhoo, I did a quick fix:
Code: 
<HTML>
<HEAD>
<TITLE>Where Am I? [[Web Demo by Cliffm]]</TITLE>
<SCRIPT>
var imageWidth  = 1200;
var imageHeight = 650;
var mapTop  =46.77534;
var mapLeft  =-117.13300;
var mapBot   =46.68536;
var mapRight =-116.89040;


function setMarker(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("map").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("map").offsetTop;
    document.getElementById("marker1").style.left = (pos_x);
    document.getElementById("marker1").style.top = (pos_y);
    
   document.getElementById("marker").innerHTML = "<B>You Clicked:</B> " + Math.round( 10000 *( (pos_y/imageHeight)*(mapBot-mapTop)+mapTop ))/10000+ " <B>N</B> " + Math.round( 10000 *( (pos_x/imageWidth)*(mapRight-mapLeft)+mapLeft ))/10000 + " <B>E</B>";
}

function requestCoords() {
    
    /* Testing Code
    var curPosX = (mapLeft + mapRight) / 2;
    var curPosY = (mapTop + mapBot) / 2;
    End Testing Code */

    
    var oRequest = new XMLHttpRequest();
    var sURL = "http://"+self.location.hostname+"/projects/vast/whereami/gps.txt";
    
    oRequest.open("GET",sURL,false);
    oRequest.setRequestHeader("User-Agent",navigator.userAgent);
    oRequest.send(null)
    
    if (oRequest.status==200){
       if (oRequest.responseText.charAt(7) == '?') { alert('No GPS Lock!') }
       else {
	curPosY = parseFloat(oRequest.responseText.slice(7,17));
	curPosX = parseFloat(oRequest.responseText.slice(17,25));
       
       document.getElementById("marker0").style.left = ((mapLeft-curPosX)/(mapLeft-mapRight)*imageWidth - 0);
       document.getElementById("marker0").style.top = ((mapTop-curPosY)/(mapTop-mapBot)*imageHeight - 47);
       
       document.getElementById("coordinates").innerHTML = "<B>Currently At:</B> " + Math.round( 10000*curPosY )/10000 + " <B>N</B> " + Math.round( 10000*curPosX )/10000 + " <B>E</B>";
      }
    }
    else alert("Error executing XMLHttpRequest call!");
    
    
}

</SCRIPT>
</HEAD>
<BODY>
<H1>Where Am I?</H1>
<H3>VASTwrt Web Tracking :: RED Router</H3>

<FORM NAME="mapforum" METHOD="POST">
<INPUT TYPE="BUTTON" ONCLICK="requestCoords()" VALUE="Request New Coordinates"></INPUT>
<BR><BR>
<DIV ID="map" ONCLICK="setMarker(event)" STYLE="position:absolute;background-image:url('http://files.timaxe.com/projects/vast/whereami/justmoscow.jpg');width:1200px;height:650px;">
<DIV ID="coordinates" style="position:relative;z-index:2;"><B>Currently At:</B> XX.xxxx <B>N</B> XX.xxxx <B>E</B></DIV>
<DIV ID="marker" style="position:relative;z-index:2;"><B>You Clicked:</B> XX.xxxx <B>N</B> XX.xxxx <B>E</B></DIV>
<DIV ID="marker0" style="position:relative;z-index:3;">*</DIV>
<DIV ID="marker1" style="position:absolute;z-index:3;">x</DIV>
</DIV>
</FORM>
<!--
Helpful website references:
http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/
http://msconline.maconstate.edu/tutorials/JSDHTML/JSDHTML13/jsdhtml13-02.htm
http://www.kourbatov.com/faq/reading2.htm
http://www.devarticles.com/c/a/JavaScript/JavaScript-Remote-Scripting-Reading-Data-From-the-Server/2/
http://www.w3schools.com/jsref/jsref_obj_string.asp
-->
</BODY>
</HTML>

Here's what I changed:

1) I removed some of the unnecessary coordinate changes:
It was...
document.getElementById("marker1").style.left = (pos_x-3); and
document.getElementById("marker1").style.top = (pos_y-68);
now...
document.getElementById("marker1").style.left = (pos_x);
document.getElementById("marker1").style.top = (pos_y);
(you may want to move it a few pixels in order to center the X at the point the user clicks)

2) I added position:absolute; to the <div id="map"> and <div id="marker1">

I hope this helps...

Good luck.
 
Thank you. Changing the DIVs to absolute helped address most of these issues. I'll put the fix online later tonight/tomorrow when I'm done traveling, but it seems that this solution works pretty well.
 
You must log in or register to reply here.
Back
Top