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

JavaScript and client side scripting.

Moderator: General Moderators

pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

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

Post by pilau »

The title says it all - how can I tell the browser to print text in a specific location?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

you should first write to a div/span and then use css to position it absolutely
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

What do you mean use CSS to absolute position it?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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.
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

Wow cool! I made the text float over the image 8)
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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:
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post 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>
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

That's exactly what Saibot said, but thanks Foobar :)
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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 :)
Charles256
DevNet Resident
Posts: 1375
Joined: Fri Sep 16, 2005 9:06 pm

Post 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...
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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...;)
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

Heh, Maugrim.
Well, the design is going well, and soon you'll see the complete result.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

btw, it's recommended to use :

Code: Select all

document.getElementById('id').appendChild(document.createTextNode('text'));
instead of .innerHTML
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

Ok, ok - hold on, no rush.

What's createTextNode?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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.
Post Reply