How to Use Marquee With HTML and JavaScript

Introduction

This article explains how to use a marquee with HTML and JavaScript. A marquee is used to move text from right to left, left to right, up and down and down and up.

HTML Marquee

<marquee behavior="alternate" scrolldelay="100"><marquee width="100">
<h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>
</marquee></marquee>

Marquee Type

Right to left: <marquee>Csharpcorner</marquee>
Left to right: <marquee direction="right">Csharpcorner</marquee>
Down and up: <marquee direction="up">Csharpcorner</marquee>
Up and down: <marquee direction="down">Csharpcorner</marquee>

JavaScript Marquee Funcation

function scroll(pos)
{
var txt = "C-sharpcorner";
var output = "";
var screen = document.getElementById("wordscroller");
for (var i = 0; i < pos; i++)
{
output += txt.charAt(i);
}
output += txt.charAt(pos);
screen.innerHTML = output;
pos++;
if (pos != txt.length)
{
window.setTimeout(function () { scroll(pos); }, 200);
}
else
{
window.setTimeout(function () { scroll(0); }, 5000);
}
}

Complete Program

Marquee.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3>HTMl Marquee</h3>
<marquee behavior="alternate" scrolldelay="100"><marquee width="100">
<h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>
</marquee></marquee>
<h3>JavaScript Marquee</h3>
<p id="wordscroller" style="color: #0000FF; font-weight: normal; font-size: x-large"></p>
<script type="text/javascript">
function scroll(pos)
{
var txt = "C-sharpcorner";
var output = "";
var screen = document.getElementById("wordscroller");
for (var i = 0; i < pos; i++)
{
output += txt.charAt(i);
}
output += txt.charAt(pos);
screen.innerHTML = output;
pos++;
if (pos != txt.length)
{
window.setTimeout(function () { scroll(pos); }, 200);
}
else
{
window.setTimeout(function () { scroll(0); }, 5000);
}
}
scroll(0);
</script>
</body>
</html>

Output

For more information, download the attached sample application.

How to Use Marquee With HTML and JavaScript

Reactions

1 Comment

Introduction

HTML Marquee

Marquee Type