Rotating Fade Marquee

A marquee is an attention-getting message somewhere on a web page. Perhaps with an attention-getting border around the message.

A marquee is designed to get attention. It can be used to rotate through a list of things like

• Product features.
• Weekend sports scores.
• Weather forecast (temperature: 54°; wind: NE 5 mph; humidity: 75%).
• Current specials.

The Rotating Fade Marquee fades out the current item on the list then fades in the next item.

I'll show you how to make your own for your web pages. The fade speed and the pause between items are customizable.

Note: The fade will work in IE only if the page has a valid DOCTYPE tag.

Here is an example.

The marquee is positioned on the web page with a div. The div needs a specific id value and needs specific CSS inline style definitions.

Here is the code for the div.

<div 
   id="RM_FadeInOutContentDiv" 
   style="opacity:1.0; filter:alpha(opacity=100);">
</div>

The above is minimum. The id value and both the opacity and the filter inline style definitions are required.

A CSS class attribute may be added to the div. Other inline style definitions may be added to the style attribute.

If the div is given a border, the border will fade in and out with the message.

For a border that does not fade, wrap the above div in another div, one with a border defined. This is what the above example marquee uses:

<div style="border:3px dotted gold; padding:5px; text-align:center; font-size:14px;">

<div 
   id="RM_FadeInOutContentDiv" 
   style="opacity:1.0; filter:alpha(opacity=100);">
</div>

</div>

The marquee messages are inserted into the div with JavaScript.

This JavaScript contains the marquee messages used in the above example marquee. See below the code for customization notes.

<script type="text/javascript"><!--
/* 
   Rotating Fade Marquee
   Version 1.0
   November 14, 2011

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2011 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use this 
   software provided this notice appears on 
   all copies. 
*/

// Leave the next line as is (customization is further below):
var RM_content = new Array();

////////////////////////////////////////////////////////////
//
// Customization section.
//
// Three places to customize.
//
// Place One:
// Specify the content for each message, one per line, between 
//    quotation marks and parenthesis. Example (with ______ 
//    representing the content):
//       RM_content.push("______");
//    Content may contain HTML code (like links and CSS), even 
//    image tags.
// If the content itself contains quotation marks, precede 
//    each quotation mark with a backslash character. 
//    Example: He said, \"five!\"

RM_content.push("Fourteen years ago, a software programmer came to the web.");
RM_content.push("You'll find lots of free stuff on the <a href=\"https://www.willmaster.com/\" target=\"_blank\"><u>programmer's website</u></a>.");
RM_content.push("Also commercial software and WordPress plugins.");
RM_content.push("The programmer does custom work for special requirements.");
RM_content.push("Head over <a href=\"https://www.willmaster.com/\" target=\"_blank\"><u>to the website <b>now</b></u></a> and get your goodies.");


// Place Two:
// Specify the number of seconds to pause between displaying 
//    one marquee and the next. A decimal number is acceptable.

var RM_PauseBetweenEach = 2.5;


// Place Three:
// Transitions are from 100% opacity to 0%, then from 0% to 100%.
//
// Two transition preferences can be specified. The number of 
//    transition steps per fade and how fast the steps shall 
//    occur.
// For the steps, the larger the number, the smoother and slower 
//    the transition.
// For the speed, the lower the number the faster the transition.

var RM_TransitionSteps = 25; // Number of steps per fade.
var RM_TransitionSpeed = 50; // How fast the steps shall occur.


// End of customization section.
////////////////////////////////////////////////////////////
RM_TransitionSteps = parseInt( (100 / RM_TransitionSteps) + .5 );
var RMlastPointer = RM_content.length - 1;
var RMopacity = 100;
var RMpointer = 0;
var RMfader;
var RMdiv;
var RMie;

function RM_StartRotateMarquee() {
RMdiv = document.getElementById("RM_FadeInOutContentDiv");
RMie = (RMdiv.filters) ? true : false;
RMdiv.innerHTML = RM_content[RMpointer];
setTimeout( "RM_NextContent()", parseInt(RM_PauseBetweenEach*1000) );
}

function RM_NewOpacity() {
if( RMie ) { RMdiv.filters.alpha.opacity = RMopacity; }
else { RMdiv.style.opacity = RMopacity/100; }
}

function RM_FadeOut() {
RMopacity -= RM_TransitionSteps;
if( RMopacity < 1 ) { RMopacity = 0; }
RM_NewOpacity(RMopacity);
if( RMopacity < 1 ) { 
   clearInterval(RMfader);
   RM_SwitchContent();
   }
}

function RM_FadeIn() {
RMopacity += RM_TransitionSteps;
if( RMopacity > 99 ) { RMopacity = 100; }
RM_NewOpacity(RMopacity);
if( RMopacity > 99 ) {
   clearInterval(RMfader);
   setTimeout( "RM_NextContent()", parseInt(RM_PauseBetweenEach*1000) );
   }
}

function RM_NextContent() {
RMfader = setInterval( "RM_FadeOut()", parseInt(RM_TransitionSpeed) );
}

function RM_SwitchContent() {
RMpointer++;
if( RMpointer > RMlastPointer ) { RMpointer = 0; }
RMdiv.innerHTML = RM_content[RMpointer];
RMfader = setInterval( "RM_FadeIn()", parseInt(RM_TransitionSpeed) );
}

function RM_AddOnloadEvent(f) {
if(typeof window.onload != 'function') { window.onload = f; }
else {
   var cache = window.onload;
   window.onload = function() {
      if(cache) { cache(); }
      f();
      };
   }
}
RM_AddOnloadEvent(RM_StartRotateMarquee);
//--></script>

The JavaScript has 3 places to customize, each with a description of how to do it.

1. Specifying the messages. The number of messages may be from 1 (to fade in and out the same message all the time) to, well, there is no software limit.

2. Pause between messages. The number of seconds between messages can be anywhere from 0.001 to as many seconds as you wish.

3. Fading of messages. The fading in and fading out has 2 preferences available.

   • The number of steps per fade. The smaller the number, the smoother the fade.

   • How fast the steps shall occur. The smaller the number, the faster the steps.

   The two preferences are used to regulate how smooth and how fast the fades shall be.

To implement a Rotating Fade Marquee, put the div where the marquee shall publish and put the JavaScript anywhere on the page that JavaScript can run.

Then modify the JavaScript for your custom implementation.

Will Bontrager