FSS FSS - 3 months ago 20
CSS Question

relative/absolute position css (convert area element rect coordinates)

I am a beginner in CSS/HTML. Thank you for reading!

I have a bunch of area elements (rectangles). Here in Javascript the 'this' refers to each area element- I assign each of the area element coordinates the relevant variable (left, top, right, bottom). I would like to convert those coordinates into the CSS div format, but I'm stuck on the syntax. Right now the area elements (displayed as divs) are of the right width and height, but at the wrong position on the graph. I want them to be at the same position as the area elements were.

Any suggestions at all are very appreciated!

var offset = this.coords;
var coordarray = offset.split(",");
var left = coordarray[0];
var top = coordarray[1];
var right = coordarray[2];
var bottom = coordarray[3];
var ident = this.id;
var w = right - left;
var h = bottom - top;

var elementDiv = $('<div class="area"></div>')
.css({position: 'absolute', left: left px, top: top px, border: 'solid'}). //help with this line!
width(w).height(h);
$("body").append(elementDiv);
elementDiv.hide();

Answer

CSS is expecting percentages or pixels, and JS is returning just the numeric value. You need to append 'px' or '%' to the values you're storing in the left, top, right, and bottom vars.

Comments