I would like to dynamically create a text box then dynamically position the text box. I have been able to dynamically create the text box with no problem but I have not been able to figure out how to position it. Any suggestions?
-
Please try to make your question titles meaningful. "Javascript question" is not going to be of much use to someone searching the archives.Buggieboy– Buggieboy2009-09-30 14:05:37 +00:00Commented Sep 30, 2009 at 14:05
Add a comment
|
4 Answers
Set the "top" and "left" positions? You may also need to set the "position" property to be "relative" or "absolute", depending on what you want to do.
Comments
var box = document.createElement('input'); // creates the element
box.style.position = 'absolute'; // position it
box.style.left = '100px';
box.style.top = '100px';
document.body.appendChild(box); // add it as last child of body elemnt
If you want to add it somewhere else in the document hierarchy you have to find the parent using getElementById and use that elements appendChild function.
Comments
Position where?
Are you trying to position at some specific point or inside some other element? Try using position: absolute either in the CSS for your textbox class or use the style property on the object in the DOM.
Comments
There's a trick to positioning elements using javascript:
var el = document.getElementById('myelementID');
el.style.left = 10 + "px";
el.style.top = 10 + "px";
Note the ' + "px"' part of that. You need to make sure the expression is a string with units before the assignment takes place or it won't work reliably. You can also use the offsetTop and offsetLeft properties instead of the style, but the "string with units" rule still applies.
2 Comments
slikts
You also need to set the 'position' property to 'absolute', otherwise the 'left'/'top' properties won't do anything.
Joel Coehoorn
I was figuring he'd already done that, but yes, that is necessary as well.