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
https://forums.phpfreaks.com/topic/34578-positioning-divs-from-json-object/
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]
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.  ::)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.