I have this line to add a new element in the screen, but the absolute position is not working.

Javascript

function drawElement(e,name){   
    $("#canvas").append("<div id='" + name + "' class='element'"
    + "left="+e.pageX+" top=" + e.pageY +">"
    + name
    +"</div>");
}

CSS

.element{
    display:inline-block;
    background:blue;
    position:absolute;  
}

What I doing wrong?

1. List item

I have this line to add a new element in the screen, but the absolute position is not working.

Javascript

function drawElement(e,name){   
    $("#canvas").append("<div id='" + name + "' class='element'"
    + "left="+e.pageX+" top=" + e.pageY +">"
    + name
    +"</div>");
}

CSS

.element{
    display:inline-block;
    background:blue;
    position:absolute;  
}

What I doing wrong?

1. List item

• javascript
• css
• css-position

• Can you give an example of the output you get pared to the output you expect? A working example of the current behaviour would also help. – Jon Cram Commented Oct 8, 2011 at 14:15

3 Answers 3

var element = $('<div />',{'name': name, 'class': element})
                          .css({ 'left': e.pageX, 'top': e.pageY })
                          .html(name);  
$("#canvas").append(element); 

    function drawElement(e,name){   
        div = $("<div />")
            div.attr("id", name);
            div.attr("class", 'element')
            div.css("top", e.pageY)
            div.css("left", e.pageX)
            div.html(name)

            $("#canvas").append(div)
    }

Update: from ment below (didn't know you could do that!) :)

    function drawElement(e,name){   
        div = $("<div />")
        div.attr({id: name, class: 'element'});
        div.css({top: e.pageY, left: e.pageX})
        div.html(name)
                $("#canvas").append(div)
    }

Write the top and left positions into the style attribute, like this->

.append("<div id='" + name + "' class='element'"
+ "style='left:"+e.pageX+";top:" + e.pageY +";'>"

Although you should probably do it like this, so that it's more... controllable.

var newElem = $('<div />').addClass('element').css({'left': e.pageX, 'top' : e.pageY});

 $("#canvas").append(newElem);