Page 1 of 2

How to print text on a SPECIFIC location, document.write

Posted: Sat Oct 01, 2005 4:48 am
by pilau
The title says it all - how can I tell the browser to print text in a specific location?

Posted: Sat Oct 01, 2005 5:01 am
by n00b Saibot
you should first write to a div/span and then use css to position it absolutely

Posted: Sat Oct 01, 2005 5:14 am
by pilau
What do you mean use CSS to absolute position it?

Posted: Sat Oct 01, 2005 5:25 am
by n00b Saibot
Look at following snippet

Code: Select all

<span style="position: absolute; left: 100px; top: 100px;"></span>
position:absolute tells browser to render it using asbolute coordinates provided
left is x-coordinate
top is y-coordinate.

Posted: Sat Oct 01, 2005 5:28 am
by pilau
Wow cool! I made the text float over the image 8)

Posted: Sat Oct 01, 2005 5:38 am
by n00b Saibot
pilau wrote:Wow cool! I made the text float over the image 8)
yeah! other day I made a pig fly over Manhattan :lol:

Posted: Sat Oct 01, 2005 7:55 am
by foobar
If you want to print text into a specific element using JavaScript you can do the following:

Code: Select all

<script type="text/javascript">
document.getElementById("some_element").innerHTML = "foo";
</script>

Posted: Sat Oct 01, 2005 8:46 am
by pilau
That's exactly what Saibot said, but thanks Foobar :)

Posted: Sat Oct 01, 2005 10:21 am
by Maugrim_The_Reaper
Just to note that you should give your <div> or <span> an "id" attribute that the javascript getElementbyID() can actually find...;) Make sure its UNIQUE and not used by any other elements.

CSS - a must have :)

Posted: Sat Oct 01, 2005 10:39 am
by Charles256
yes it is.before you know it you got divs in divs in divs and the madness is thickening because noone can stop the absolute control you have!!! :oops: sorry..lost myself...

Posted: Sat Oct 01, 2005 11:03 am
by Maugrim_The_Reaper
:)

Just try and keep it organised - comment heavily - use ids that describe the <div>.

Should see some of my designs...horror shows...;)

Posted: Sat Oct 01, 2005 11:57 am
by pilau
Heh, Maugrim.
Well, the design is going well, and soon you'll see the complete result.

Posted: Sat Oct 01, 2005 4:40 pm
by Weirdan
btw, it's recommended to use :

Code: Select all

document.getElementById('id').appendChild(document.createTextNode('text'));
instead of .innerHTML

Posted: Sun Oct 02, 2005 8:19 am
by pilau
Ok, ok - hold on, no rush.

What's createTextNode?

Posted: Mon Oct 03, 2005 1:41 am
by n00b Saibot
it does what it says on the label - create Text node - a new node (i.e. an element) under parent element which contains text.
appendChild puts it under (DOM heirarchy-wise, in real it is rendered inside) the element referenced to.