CSS positioning on click event

http://stackoverflow.com/questions/13574117/css-is-really-ignoring-me

by jesus_tesh

HTML

<div id="fields"></div>

CSS

body { margin: auto; }
    #fields {position: relative; width: 408px; height: 370px; background: url('http://hhsrv.n.dk/chat/gfx/rum/sms/old/gummicelle.jpg') repeat-x; border: 1px #DDD solid; }
      .field {width: 2px; height: 2px; background: #FF0000; position: absolute;}
    #user { top: 500; border: 1px solid black; background: url('http://www.geekabit.dk/community/profil/figur/1335803573_149116.gif') no-repeat; width: 52px; height: 77px;
margin: -97px 0 0 -20px; }

JavaScript

var fields = [];
var row = 1.2;
var col = 0;
var $canvas = $('#fields');
var offset = 0;
var x, y;
var width = 68;
var height = 68;
// Load felter (kan forbedres eller laves som faste koordinater)

for (var f = 1; f < 56; f++) {
    fields.push([height / 2 + offset + col * width, row * height / 2]);
    col++;
    if (col > 4 + (row % 2)) {
        col = 0;
        row++;
        offset = height / 2 - offset;
    }
}
// Tilføj felter

for (var f in fields) {
    $canvas.append($('<div class="field" id="f' + f + '" style="left: ' + fields[f][0] + 'px; top: ' + fields[f][1] + 'px;">' + f +'</div>'));
}

// Standard felt for figuren (30)

standardPos = $('#f25').append('<div id="user" />');

// Opdater felter (Kan laves om til on('click', ...) som på HH)

var $fields = $('.field');

$canvas.on('click', function(e) {
    var f = getXY(e.pageX, e.pageY);
    var arr = new Array(0,1,2,3,4,5,6,7,8,9,10,11,16,22,27,33,38,44,49);
    var locked = parseInt(f);

    if($.inArray(locked, arr) != -1 ) {
        console.log("Dette er et låst felt");
        return false;
    } else {
        if (f) {
            console.log('f' + locked);
            $('#user').appendTo('#f' + f);
            console.log(getXY(e.pageX,e.pageY));
        }
    }
});

// Find nærmeste felt

function getXY(x, y) {
    for (var f in fields) {
        if (Math.abs(x - fields[f][0]) + Math.abs(y - fields[f][1]) <= width / 2) {
            return f;
        }
    }
    return false;
}