Animated Highlighting

Here is a way to give an important word or phrase a noticeable highlight, a subtle animation. It can be used for a price, a phone number, anything that needs attention.

Individual letters of the word are highlighted, one letter at a time. Highlight can be bolded, italicized, underlined, overlined, or a different color.

The idea for this article was seeded by a JavaScript snippet found at the JavaScript Source website.

Here is a demonstration of Animated Highlighting applied to an email address.

If you need help, please send an email to:
HelpingHand@example.com

Use these links to change the highlight in the demonstration:
[bolded]   [italicized]   [underlined]   [overlined]   [red]   [gold]   [green]   [blue]

Implementing Animated Highlighting

Applying Animated Highlighting to a word or phrase requires two steps.

1. Put the word/phrase between span tags with an id value.

2. Put the JavaScript somewhere on the web page below the word/phrase.

1. The Word/Phrase with an ID Value

Put the word or phrase to be highlighted between span tags. The span tag needs to have an id value.

Example:

<span id="mytext">word/phrase</span>

The id value may be something other than "mytext". The value will be required by the JavaScript.

2. The JavaScript

Put this JavaScript in the web page source code somewhere below the location of the word/phrase.

<script type="text/javascript">
/* 
   Animated Highlighting
   Version 1.0
   September 27, 2010

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2010 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/

// Three places to customize.

// Place 1 --
// What highlight shall be applied?
//   Use "b" for bold character.
//   Use "i" for italic character.
//   Use "u" for underlined character.
//   Use "o" for overlined character.
//   Specify the color (with "#") for colored 
//      character. Example: "#0000ff";

var Highlight = "b";

// Place 2 --
// How quickly shall the highlight changes occur?
//   Specify in milliseconds.

var Interval = 300;


// Place 3 --
// Specify the id value of the word/phrase to highlight.

var ID = "mytext";


// No other customizations required. //
var ThisID = document.getElementById(ID);
var ThisContent = ThisID.innerHTML;
var LastCharacter = ThisContent.length - 1;
var NowPoint = -1;
var HightlightCode = new String();
Highlight = Highlight.toLowerCase();
switch(Highlight) {
   case "b" : HightlightCode = '<span style="font-weight:bold;">'; break;
   case "i" : HightlightCode = '<span style="font-style:italic;">'; break;
   case "u" : HightlightCode = '<span style="text-decoration:underline;">'; break;
   case "o" : HightlightCode = '<span style="text-decoration:overline;">'; break;
   default  : HightlightCode = '<span style="color:'+Highlight+';">'; break;
   }

function HighlightCharacter() {
var s = new String();
NowPoint++;
if(NowPoint>LastCharacter) { NowPoint = 0; }
if(NowPoint==0) { s = HightlightCode + ThisContent.substr(0,1) + "</span>" + ThisContent.substr(1); }
else if(NowPoint==LastCharacter) { s = ThisContent.substr(0,LastCharacter) + HightlightCode + ThisContent.substr(LastCharacter) + "</span>"; }
else { s = ThisContent.substr(0,NowPoint) + HightlightCode + ThisContent.substr(NowPoint,1) + "</span>" + ThisContent.substr(NowPoint+1); }
ThisID.innerHTML = s;
}

setInterval("HighlightCharacter()",Interval);
</script>

The JavaScript has three places to customize.

1. The type of highlight. The highlight can be bold, italic, underline, overline, or a different color.

2. Highlight change interval. Specify how quickly the highlight shall shift from one character to the next. Specify the interval in milliseconds.

3. ID value. Specify the id value of the span tag with the word or phrase to be highlighted.

Implementation is complete. Load the page into a browser and verify it works as expected.

An important word or phrase can be given Animated Highlighting. The highlighting may be used for critical information that needs to be noticed.

Will Bontrager