Jump to content

Positioning div's from JSON object


irken

Recommended Posts

Hello.

I'm trying to retreive top and left values from my JSON object. This is all good, but once I create divs with the values retreived, there's one div that just won't align properly. It's the div at the very top, that has a "top" style value of 0 and a left of 255. Doing this in XML using the same data as the JSON file, it aligns correctly. Could the 0 in JSON have anything to do with it? Perhaps it being "null" instead or whatever?

My JSON file looks like:

[code]
{
    "world":
    {
        "tiles":
        [
            {
                "id": "1",
                "image": "earth_1",
                "top": "123",
                "left": "123"
            },
            {
                "id": "2",
                "image": "earth_2",
                "top": "123",
                "left": "123"
            }
        ]
    }
}
[/code]

And 42 id's more with different top/left and background/image. Everything but the first entry is positioned correctly.

[code]
var Blob = new Class({
   
    initialize: function() {       
        new Ajax('default.js', { onComplete: this.callback }).request();
    },
   
    callback: function(responseText) {
       
        var obj = Json.evaluate(responseText);
       
        for (var i = 0; i < obj.world.tiles.length; i++)
        {
            var styles = {
                backgroundImage: 'url(' + obj.world.tiles[i].background + ')',
                width: '64px',
                height: '128px',
                position: 'absolute',
                margin: '0px',
                padding: '0px',
                textAlign: 'center',
                top: obj.world.tiles[i].top + 'px',
                left: obj.world.tiles[i].left + 'px'
            };
           
            new Element('div').injectInside($('world')).setStyles(styles).innerText = obj.world.tiles[i].id;
        }
    }
});
[/code]

You can see it in action here: http://blob.conventia.dk/blob/blob.index - I'm working on it as I'm writing this, so beware of errors. Also, I have no clue weather it workes in Firefox/others, but I don't believe I'm currently using functions that shouldn't work in all of them.
Link to comment
Share on other sites

Oops, old JSON document posted (tho nothing but the names have changed).. looks like this:

[code]
{
    "world":
    {
        "name": "Default",
       
        "tiles":
        [
            {
                "id": "1",
                "background": "earth_6.gif",
                "top": "0",
                "left": "255"
            },
            {
                "id": "2",
                "background": "earth_6.gif",
                "top": "16",
                "left": "193"
            }
        ]
    }
}
[/code]
Link to comment
Share on other sites

Omg. I'm sorry for wasting your time.. the "left" property of the first tile should be 225, not 255. Someone please shoot me. I just spent hours trying to figure it out, diden't really think of looking at the data itself, just figured it might've been something with the JSON reply.  ::)
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.