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