Replacing Text On a Web Page
Do you work with JavaScript code sometimes?
Yes?
Well, I've got a present for you.
The present is a function you can use to replace certain
areas of a web page with alternate content. The function is
copy 'n paste; no modifications necessary:
The area on the web page to be updated must be
identified with an element id. DIV's, SPAN's, P's, and other
tags can have id elements.
As an example, let's assume you have a DIV with the
id="mystuff" element. And let's suppose you want to replace
the content in the DIV with a "Hello!" between H1 tags.
This line of JavaScript code will do the trick:
Pretty simple :)
Notice the two parameters (the items between the
parenthesis')?
The first parameter is the value of the id. The second
is the content. Both may be assigned to variables before
calling the function:
The WriteContentIntoID() function can be called as often
as desired, with the same or different values for id and
content.
A working example is at http://grannysez.info/mistakes.html (The
premise on this page is that the number of mistakes made
during any one day is roughly equivalent to the number of
humans on earth.)
There, you'll see a number being incremented a bit more
often than once per second. The number is ded in a
paragraph, with the same font style as the rest of the text.
View the source code or use Master Snooper to
see how it's done.
The WriteContentIntoID() function can be used for pretty
much any regular web page content to be replaced using
JavaScript. Some ideas:
Periodic update of national debt numbers.
A clock or stopwatch, with the time
perpetually
updated on the page.
Price
changes effected by the amount of time spent
reading the
sales material.
Custom greetings for
specific time intervals while
a visitor stays on the page.
Presenting dice throw results.
Printing random answers as in 8-ball fortune
telling
games.
As an example, let's assume you present a welcome
message
to your site visitor when your web page first
loads. If the visitor stays around for, say, 20 seconds, you
change the message to a "Here is more of the same" link.
This is how such a thing might be done. First, the
welcome message:
Now, the JavaScript:
The JavaScript built-in function setTimeout() waits 20
sections (20000 milliseconds) and then runs the ChangeIt()
function, which uses WriteContentIntoID() to replace the
content.
It really is that simple. Just be sure to have the
WriteContentIntoID() available to your JavaScript code.
I think you'll enjoy playing with this fun little
function.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
