 Use JavaScript to Expand Text within Your Web Page
By
William
Bontrager
This is a fun little
JavaScript.
Pop it into you page, and you can make certain text on your page expand --
fast, slow, in jumps, or relatively steady. The source code is at the
demonstration
page.
Why would you want to do that? Here are a few reasons you might consider
using the script:
-
To emphasize numbers representing
percentage or price when you have a sale.
-
Instead of a logo on every page,
have your company name on every page in expanding text.
-
Important or popular navigation links
can suddenly double in size about half a minute after the page loads.
-
Draw attention to an ad by having
a period character next to or within an the ad grow larger by one pixel size
every 5 seconds or so.
-
If you publish articles, titles or
bylines can have expanding text.
-
Any important text that must be
emphasized, whether one word or blocks of text, can use this expanding text
technique to attract attention.
-
Just for fun.
Complete instructions are in the
JavaScript code found at the demonstration page at the URL above.
You specify:
-
The starting size of the text, when
it starts to expand, specified in pixels. You'll probably want this about
the size of the default text of your page, but that's optional. Starting
at 1 pixel in size is a nice effect.
-
The ending size of the text, when
it's finished expanding, specified in pixels. The maximum size can extend
the text way past the browser window border, if you make it large enough.
It's fun to play with.
-
The number of pixels the text size
shall increase with every size increment. Specifying 1 presents the smoothest
expansion. Big jumps, or one jump from smallest to largest, might be appropriate
for some implementations.
-
The number of milliseconds to pause
between size increments. Specifying 1 is the fastest expansion. Specifying
3000 will increment the size every three seconds.
-
The number of milliseconds to wait
before the first size change is made.
This number should be large enough to let your page load completely before
the first change happens. Otherwise, the text that is supposed to expand
might not yet be loaded when the script tries to increment its size, which
would result in a JavaScript error message.
Specifying 250 for a quarter second is probably the minimum, and that would
be for very fast loading pages. Once you determine a working number, double
it so instances of slow server or slow Internet connections can still load
the page and run the JavaScript successfully -- if your connection is DSL
or satellite, you might want to triple the number.
For some implementations, waiting ten or more seconds might be appropriate,
to let the viewer begin reading a story before drawing attention to an ad,
for example.
-
The id of the text.
The text in your page that you want to expand is enclosed with a DIV tag.
Example:
<div id="TestDiv">
text to expand
</div>
In the above example, the id of the text to expand is
TestDiv.
There likely are some things that
you can't do in the way that might be intuitive. I couldn't test every
combination, of course, but I found several things you'll want to be aware
of:
Embedded CSS styles won't be effective in the DIV tag, but previously
defined classes are.
Embedding a style is not effective:
<div style="color: blue;" id="TestDiv">
text to expand
</div>
Applying a previously defined class is effective:
<div class="special" id="TestDiv">
text to expand
</div>
When applying HTML markup, like heading and paragraph tags, put the markup
outside the DIV tag:
<h1>
<div id="TestDiv">
text to expand
</div>
</h1>
If you need to separate blocks of text with paragraph spacing, use BR tags:
<p>
<div id="TestDiv">
text to expand
<br><br>
more text to expand
</div>
</p>
If the expanding text is within a table, put the table tags outside the DIV
tag:
<table border="1"
cellpadding="11"><tr><td>
<div id="TestDiv">
text to expand
</div>
</td></tr></table>
With the above code, the table will expand as the text expands, causing the
box around the text to expand in order to accommodate the enlarging text.
The B, I, and U font change tags work within the expanding text:
<div id="TestDiv">
<u>text</u> <i>to</i>
<b>expand</b>
</div>
The DIV tag will cause a line break if there is less than one blank line
above the DIV tag.
Writing and testing the expanding text JavaScript code was a lot of fun.
Hopefully, you'll find pleasure in its use.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee. |
|
Web
Development
