Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Location
    San Diego, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem of setting Firefox Image style.left

    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

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Firefox doesn't do that:
    Code:
    <!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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Location
    San Diego, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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).
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    lbsssd (11-18-2008)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Location
    San Diego, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Last edited by itsallkizza; 11-20-2008 at 06:02 AM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Location
    San Diego, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's a good suggestion. Will take a look later. Appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •