...

View Full Version : Problem of setting Firefox Image style.left



lbsssd
11-14-2008, 01:46 AM
When setting the image's left, firefox rounds the style.left to the nearest 10s, e.g., if image.style.left sets as 1021, the final value for image.style.left is 1020px, if image.style.left sets as 1029,the final value for image.style.left is 1030px, Why?

It works well at IE 6 & 7.
//item is an object passed in
image = document.createElement("img");
image.style.position = "absolute";
image.style.left = item.x + "px";
image.style.top = item.y + "px";
image.setAttribute("id", item.id);
image.src = imageURL+"id="+item.id;
image.style.width = item.width+ "px";
image.style.height = item.height+ "px";
editorDiv.appendChild(image);

Appreciate the help!

-LBS

itsallkizza
11-14-2008, 04:16 PM
Firefox doesn't do that:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}

img
{
border: 1px solid #ff0000;
}
</style>
<script type="text/javascript">
// <![CDATA[
function moveImgs()
{
var imgs = document.getElementsByTagName("img");
var l = 0;
var h = 0;
for (var i=0;i<imgs.length;i++)
{
imgs[i].style.position = "absolute";
imgs[i].style.left = l+"px";
imgs[i].style.top = h+"px";
l+=3;
h+=111;
}
}

window.onload = moveImgs;
// ]]>
</script>
</head>
<body>

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />

</body>
</html>

Your problem lies elsewhere in your code. Perhaps wherever the x value is assigned to item.

lbsssd
11-14-2008, 07:09 PM
Thanks for the reply. It seems to be the var size issue.

When the number size is less than 7 digits, it seems OK:

item.x:365184 item.y:332800
image.style.left:365184px image.style.top:332800px

But when it's great 6, it starts to round the number:

item.x:1463296 item.y:1332864
image.style.left:1463300px image.style.top:1332860px

item.x:2927488 item.y:2666752
image.style.left:2927490px image.style.top:2666750px

itsallkizza
11-15-2008, 07:45 AM
I'm intrigued as to what project requires such insanely high values for X and Y... There's got to be a way to relativize your coordinates somehow.

Anyway, my best guess is that certain browser CSS interpreters allocate a certain number of bytes for those left/right/top/bottom position values and when you exceed that upper limit, instead of going SNES on you and making them all negative, they might consolidate the values with a key, rounding to the nearest whatever amount to conserve space (so it fits in the allocated bytes).

lbsssd
11-18-2008, 11:36 PM
We are developing map tiles as what google does for gmap. At street zoom level, the tile offsets could be big number. Again thanks for your inputs.

itsallkizza
11-20-2008, 07:00 AM
Don't take this the wrong way, and I obviously am basing this on very little amount of information, but to me it seems like poor coding, or at least poor planning to end up with numbers that big representing coordinates.

It's best to have relative coordinates for your visible data, have mod variables that keep the visible content relative to the screen. You know, the whole concept of moving the book under the magnifying glass rather than moving the magnifying glass over the book.

EDIT: ...or vice versa, whatever suits your needs.

lbsssd
11-21-2008, 07:00 PM
It's a good suggestion. Will take a look later. Appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum