Question

I’m building a context menu component using jQuery that essentially builds a div programmatically and then shows it at the coordinates specified by the user. Everything is set except that i’m just not able to position the div at the co-ordinates. It appears at the top left corner of the window. This is what i’m trying

$(menu).css({ location: 'absolute', left: '300px', top: '250px' }).appendTo("body").show();

300px and 200px are hardcoded now but will be calculated using input supplied by the client code in reality.
I have even tried appending it to an element inside the body like:

$(menu).css({ 'location': 'absolute', 'left': '300px', 'top': '250px' }).appendTo($('div#cntnr')).show();

But nothing is working.
It shows at the top left corner of the browser and NOT at what is specified.
jQuery gurus, pls help.

Answer 1

Do you mean position:'absolute' ?

Even though you are creating the menu programmatically, I recommend you just assign the menu a class name, and allow yourself (or the customer) to alter the attributes of that css class. This is clearly a pure css thing, there’s no point sticking those values in the javascript, when they can be cleanly separated to a more appropriate place. It will also clean the javascript up, in that your code will define behaviour, not behaviour and style.

Clean abstraction and easy customisation.