Fading Scroller Using jQuery

Introduction

In this article I am going to make a simple fading Scroller using jQuery. This jQuery will show you some simple effects that you can use to spice up your websites. It's real simple to use and implement.

Description

The following script produces a regular message scroller. The messages are slowly faded into view! Check out the technique used to accomplish the fading dynamically altering the text's color. The scroller performs the following features.

• It fades from one color to another color (black to white and white to black).
• it can also fade the Links inside messages (if any) or remain their original color.

Step 1 : First we have to create a web Application.

•  Go to Visual Studio 2010.
•  Create the web Application.
• Give a suitable name to the web Application.
• Click OK.

Step 2 : Secondly you have to add a new page to the website.

•  Go to the Solution Explorer.
•  Right Click on Project name.
•  Select add new item.
•  Add a new web page.
•  Click OK.

Step 3 : In this step we are going to see from where the js reference will be added to the source page of the Default2.aspx page.

Step 4 : Now we are going to write the script code which will be inside either on the head section or in the body section; it will depend upon you where you prefer to place it.

  <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 5 : In this step we are going to write the jQuery code which is given below.

<script type="text/javascript">
            var delay = 2000;
            var maxsteps = 30;
            var stepdelay = 40;
            var startcolor = new Array(255, 255, 255);
            var endcolor = new Array(0, 0, 0);
            var fcontent = new Array();
            begintag = '<div style="font: normal 14px Arial; padding: 5px;">';
            fcontent[0] = "<b>What\'s new?</b><br>To know more about us please visit<br><br>The MoreZone has been updated. <a href='http://www.c-sharpcorner.com'>Click here to visit</a>";
            fcontent[1] = "Hello and thank you for visiting the Mindcracker Network. The Mindcracker Network with its global headquarters in Philadelphia, PA was founded in 1999.";
            fcontent[2] = "Mahesh is an architect, consultant, and author, and the founder of C# Corner. He has published half a dozen books, hundreds of articles, and thousand of code snippets in .NET and C#.</a>";
            closetag = '</div>';
            var fwidth = '175px';
            var fheight = '175px';
            var fadelinks = 1;
            var ie4 = document.all && !document.getElementById;
            var DOM2 = document.getElementById;
            var faderdelay = 0;
            var index = 0;
            function changecontent() {
                if (index >= fcontent.length)
                    index = 0
                if (DOM2) {
                    document.getElementById("fscroller").style.color = "rgb(" + startcolor[0] + ", " + startcolor[1] + ", " + startcolor[2] + ")"
                    document.getElementById("fscroller").innerHTML = begintag + fcontent[index] + closetag
                    if (fadelinks)
                        linkcolorchange(1);
                    colorfade(1, 15);
                }
                else if (ie4)
                    document.all.fscroller.innerHTML = begintag + fcontent[index] + closetag;
                index++
            }
            function linkcolorchange(step) {
                var obj = document.getElementById("fscroller").getElementsByTagName("A");
                if (obj.length > 0) {
                    for (i = 0; i < obj.length; i++)
                        obj[i].style.color = getstepcolor(step);
                }
            }
            var fadecounter;
            function colorfade(step) {
                if (step <= maxsteps) {
                    document.getElementById("fscroller").style.color = getstepcolor(step);
                    if (fadelinks)
                        linkcolorchange(step);
                    step++;
                    fadecounter = setTimeout("colorfade(" + step + ")", stepdelay);
                } else {
                    clearTimeout(fadecounter);
                    document.getElementById("fscroller").style.color = "rgb(" + endcolor[0] + ", " + endcolor[1] + ", " + endcolor[2] + ")";
                    setTimeout("changecontent()", delay);
                }
            }
            function getstepcolor(step) {
                var diff
                var newcolor = new Array(3);
                for (var i = 0; i < 3; i++) {
                    diff = (startcolor[i] - endcolor[i]);
                    if (diff > 0) {
                        newcolor[i] = startcolor[i] - (Math.round((diff / maxsteps)) * step);
                    } else {
                        newcolor[i] = startcolor[i] + (Math.round((Math.abs(diff) / maxsteps)) * step);
                    }
                }
                return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
            }
            if (ie4 || DOM2)
                document.write('<div id="fscroller" style="border:2px solid red;width:' + fwidth + ';height:' + fheight + '"></div>');
            if (window.addEventListener)
                window.addEventListener("load", changecontent, false)
            else if (window.attachEvent)
                window.attachEvent("onload", changecontent)
            else if (document.getElementById)
                window.onload = changecontent
</script>

Step 6 : In this step you will see the body code of the Default2.aspx page which is given below.

<body>
   <form id="form1" runat="server">
    <div>
<script type="text/javascript">
            var delay = 2000;
            var maxsteps = 30;
            var stepdelay = 40;
            var startcolor = new Array(255, 255, 255);
            var endcolor = new Array(0, 0, 0);
            var fcontent = new Array();
            begintag = '<div style="font: normal 14px Arial; padding: 5px;">';
            fcontent[0] = "<b>What\'s new?</b><br>To know more about us please visit<br><br>The MoreZone has been updated. <a href='http://www.c-sharpcorner.com'>Click here to visit</a>";
            fcontent[1] = "Hello and thank you for visiting the Mindcracker Network. The Mindcracker Network with its global headquarters in Philadelphia, PA was founded in 1999.";
            fcontent[2] = "Mahesh is an architect, consultant, and author, and the founder of C# Corner. He has published half a dozen books, hundreds of articles, and thousand of code snippets in .NET and C#.</a>";
            closetag = '</div>';
            var fwidth = '175px';
            var fheight = '175px';
            var fadelinks = 1;
            var ie4 = document.all && !document.getElementById;
            var DOM2 = document.getElementById;
            var faderdelay = 0;
            var index = 0;
            function changecontent() {
                if (index >= fcontent.length)
                    index = 0
                if (DOM2) {
                    document.getElementById("fscroller").style.color = "rgb(" + startcolor[0] + ", " + startcolor[1] + ", " + startcolor[2] + ")"
                    document.getElementById("fscroller").innerHTML = begintag + fcontent[index] + closetag
                    if (fadelinks)
                        linkcolorchange(1);
                    colorfade(1, 15);
                }
                else if (ie4)
                    document.all.fscroller.innerHTML = begintag + fcontent[index] + closetag;
                index++
            }
            function linkcolorchange(step) {
                var obj = document.getElementById("fscroller").getElementsByTagName("A");
                if (obj.length > 0) {
                    for (i = 0; i < obj.length; i++)
                        obj[i].style.color = getstepcolor(step);
                }
            }
            var fadecounter;
            function colorfade(step) {
                if (step <= maxsteps) {
                    document.getElementById("fscroller").style.color = getstepcolor(step);
                    if (fadelinks)
                        linkcolorchange(step);
                    step++;
                    fadecounter = setTimeout("colorfade(" + step + ")", stepdelay);
                } else {
                    clearTimeout(fadecounter);
                    document.getElementById("fscroller").style.color = "rgb(" + endcolor[0] + ", " + endcolor[1] + ", " + endcolor[2] + ")";
                    setTimeout("changecontent()", delay);
                }
            }
            function getstepcolor(step) {
                var diff
                var newcolor = new Array(3);
                for (var i = 0; i < 3; i++) {
                    diff = (startcolor[i] - endcolor[i]);
                    if (diff > 0) {
                        newcolor[i] = startcolor[i] - (Math.round((diff / maxsteps)) * step);
                    } else {
                        newcolor[i] = startcolor[i] + (Math.round((Math.abs(diff) / maxsteps)) * step);
                    }
                }
                return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
            }
            if (ie4 || DOM2)
                document.write('<div id="fscroller" style="border:2px solid red;width:' + fwidth + ';height:' + fheight + '"></div>');
            if (window.addEventListener)
                window.addEventListener("load", changecontent, false)
            else if (window.attachEvent)
                window.attachEvent("onload", changecontent)
            else if (document.getElementById)
                window.onload = changecontent
</script>
</div>
</form>
</body>

Step 7 : In this step we will write the Complete code for the Default2.aspx page which is given below.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Fading Scroller using jQuery</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<body>
   <form id="form1" runat="server">
    <div>
<script type="text/javascript">
            var delay = 2000;
            var maxsteps = 30;
            var stepdelay = 40;
            var startcolor = new Array(255, 255, 255);
            var endcolor = new Array(0, 0, 0);
            var fcontent = new Array();
            begintag = '<div style="font: normal 14px Arial; padding: 5px;">';
            fcontent[0] = "<b>What\'s new?</b><br>To know more about us please visit<br><br>The MoreZone has been updated. <a href='http://www.c-sharpcorner.com'>Click here to visit</a>";
            fcontent[1] = "Hello and thank you for visiting the Mindcracker Network. The Mindcracker Network with its global headquarters in Philadelphia, PA was founded in 1999.";
            fcontent[2] = "Mahesh is an architect, consultant, and author, and the founder of C# Corner. He has published half a dozen books, hundreds of articles, and thousand of code snippets in .NET and C#.</a>";
            closetag = '</div>';
            var fwidth = '175px';
            var fheight = '175px';
            var fadelinks = 1;
            var ie4 = document.all && !document.getElementById;
            var DOM2 = document.getElementById;
            var faderdelay = 0;
            var index = 0;
            function changecontent() {
                if (index >= fcontent.length)
                    index = 0
                if (DOM2) {
                    document.getElementById("fscroller").style.color = "rgb(" + startcolor[0] + ", " + startcolor[1] + ", " + startcolor[2] + ")"
                    document.getElementById("fscroller").innerHTML = begintag + fcontent[index] + closetag
                    if (fadelinks)
                        linkcolorchange(1);
                    colorfade(1, 15);
                }
                else if (ie4)
                    document.all.fscroller.innerHTML = begintag + fcontent[index] + closetag;
                index++
            }
            function linkcolorchange(step) {
                var obj = document.getElementById("fscroller").getElementsByTagName("A");
                if (obj.length > 0) {
                    for (i = 0; i < obj.length; i++)
                        obj[i].style.color = getstepcolor(step);
                }
            }
            var fadecounter;
            function colorfade(step) {
                if (step <= maxsteps) {
                    document.getElementById("fscroller").style.color = getstepcolor(step);
                    if (fadelinks)
                        linkcolorchange(step);
                    step++;
                    fadecounter = setTimeout("colorfade(" + step + ")", stepdelay);
                } else {
                    clearTimeout(fadecounter);
                    document.getElementById("fscroller").style.color = "rgb(" + endcolor[0] + ", " + endcolor[1] + ", " + endcolor[2] + ")";
                    setTimeout("changecontent()", delay);
                }
            }
            function getstepcolor(step) {
                var diff
                var newcolor = new Array(3);
                for (var i = 0; i < 3; i++) {
                    diff = (startcolor[i] - endcolor[i]);
                    if (diff > 0) {
                        newcolor[i] = startcolor[i] - (Math.round((diff / maxsteps)) * step);
                    } else {
                        newcolor[i] = startcolor[i] + (Math.round((Math.abs(diff) / maxsteps)) * step);
                    }
                }
                return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
            }
            if (ie4 || DOM2)
                document.write('<div id="fscroller" style="border:2px solid red;width:' + fwidth + ';height:' + fheight + '"></div>');
            if (window.addEventListener)
                window.addEventListener("load", changecontent, false)
            else if (window.attachEvent)
                window.attachEvent("onload", changecontent)
            else if (document.getElementById)
                window.onload = changecontent
</script>
</div>
</form>
</body>
</html>

Step 8 : Now we are going to run the application by pressing F5 and the related output is given below.

Resources

• Ajax AnimationExtender Control
• Animating Window Form (Fade Effect)
• Fade out a form in C#
• How to develop a Simple Vertical Text Scroller custom server control in ASP.NET