Place your message here

Your Guide to Professional
Web Site Design and Development

Web Development
HTML Codes
Javascript Snippets
216 Safe Colors
Web Directory
Web Resources
Internet Channels

Web Development: Business, Advertising, Internet Marketing, Promotion and Web Site Design

| Web Development | HTML Codes | HTML Tips | Javascript Snippets | 216 Safe Colors | Symbols | Recommendations |

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:

  1. 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.

  2. 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.

  3. 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.

  4. The number of milliseconds to pause between size increments. Specifying 1 is the fastest expansion. Specifying 3000 will increment the size every three seconds.

  5. 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.

  6. 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

    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

Applying a previously defined class is effective:

<div class="special" id="TestDiv">
text to expand

When applying HTML markup, like heading and paragraph tags, put the markup outside the DIV tag:

<div id="TestDiv">
text to expand

If you need to separate blocks of text with paragraph spacing, use BR tags:

<div id="TestDiv">
text to expand
more text to expand

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

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>

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

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.