Fading Marquee

Mike Hudson Apr 12, 2006

Display news and announcements on your site. The text fades in and out, and can display active links for each item.

Check out our new scripts:

The JavaScript Source: Text Effects : Fading Marquee

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Mike Hudson :: http://www.afrozeus.com */

function setupFadeLinks() {
  arrFadeLinks[0] = "http://javascriptsource.com/snippets/popup-blocker-detection.html";
  arrFadeTitles[0] = "1. Popup Blocker Detection";
  arrFadeLinks[1] = "http://javascriptsource.com/forms/code-box-editor.html";
  arrFadeTitles[1] = "2. Code Box Editor";
  arrFadeLinks[2] = "http://javascriptsource.com/miscellaneous/mailto.html";
  arrFadeTitles[2] = "3. mailTo";
  arrFadeLinks[3] = "http://javascriptsource.com/cookies/delicious-cookies.html";
  arrFadeTitles[3] = "4. Delicious Cookies";
  arrFadeLinks[4] = "http://javascriptsource.com/snippets/insertafter.html";
  arrFadeTitles[4] = "5. insertAfter()";
}

// You can also play with these variables to control fade speed, fade color, and how fast the colors jump.

var m_FadeOut = 255;
var m_FadeIn=0;
var m_Fade = 0;
var m_FadeStep = 3;
var m_FadeWait = 1600;
var m_bFadeOut = true;

var m_iFadeInterval;

window.onload = Fadewl;

var arrFadeLinks;
var arrFadeTitles;
var arrFadeCursor = 0;
var arrFadeMax;

function Fadewl() {
  m_iFadeInterval = setInterval(fade_ontimer, 10);
  arrFadeLinks = new Array();
  arrFadeTitles = new Array();
  setupFadeLinks();
  arrFadeMax = arrFadeLinks.length-1;
  setFadeLink();
}

function setFadeLink() {
  var ilink = document.getElementById("fade_link");
  ilink.innerHTML = arrFadeTitles[arrFadeCursor];
  ilink.href = arrFadeLinks[arrFadeCursor];
}

function Faderesume() {
  m_iFadeInterval = setInterval(fade_ontimer, 10);
}

function ToHex(strValue) {
  try {
    var result= (parseInt(strValue).toString(16));

while (result.length !=2)
            result= ("0" +result);
    result = result + result + result;
    return result.toUpperCase();
  }
  catch(e)
  {
  }
}

<div id="fade_base" style="width:250px;border:1px dotted black;padding:5px;height:60px;line-height:1.8em;">
Check out our new scripts:<br>
<strong><em><a id="fade_link"></a></em></strong>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Fading Marquee

Leave a Response

Attention JavaScript Coders

Go Deeper