In this blog, we are learning How to Create HTML Marquee Generator Tool only JavaScript using.
Note:- To make a live change in the HTML generator, you have to click on the refresh button once.
HTML Marquee Generator Live Tool With Codepen
See the Pen HTML Marquee Generator Tool by khushal (@mr__khushal) on CodePen.
How to Create HTML Marquee Generator?
How to build an HTML marquee generator is shown step by step. Follow me:
Step1:- Create index.html File.
<html lang="en">
<head>
<meta charset="utf-8">
<!-------Codeby Myprograming.com---------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Marquee Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<article class="content">
<h1>HTML Marquee Generator</h1>
<form name="marqueeGenerator" id="marqueeGenerator">
<table class="marqueeGenerator">
<tr>
<td class="toolBar">
<table>
<tr>
<th>Marquee</th>
<th>Colors</th>
<th>Padding/Margins</th>
<th>Text</th>
</tr>
<tr>
<td style="width: 20%;">
<span onclick="javascript:marqueeGeneratorcode();" class="scrolldirection">
<input name="scrolldirection" id="scrolldirection1" type="radio" value="left" ><label for="scrolldirection1"> ← </label>
<input name="scrolldirection" id="scrolldirection2" type="radio" value="right" checked><label for="scrolldirection2"> → </label>
<input name="scrolldirection" id="scrolldirection3" type="radio" value="up"><label for="scrolldirection3"> ↑ </label>
<input name="scrolldirection" id="scrolldirection4" type="radio" value="down"><label for="scrolldirection4"> ↓ </label>
</span>
<br>
<label for="scrollspeed">Scroll Speed:</label>
<input name="scrollspeed" id="scrollspeed" type="range" min="1" max="100" step="1" value="5" onchange="javascript:marqueeGeneratorcode();">
<br>
<span onclick="javascript:marqueeGeneratorcode();" class="marqueebehavior">
<input name="marqueebehavior" id="marqueebehavior1" type="radio" value="scroll" checked><label for="marqueebehavior1"> Scroll</label>
<input name="marqueebehavior" id="marqueebehavior2" type="radio" value="alternate"><label for="marqueebehavior2">Bounce</label>
</span>
</td>
<td style="width: 10%;">
<div>
<label for="textcolor">Text Color:</label>
<input name="textcolor" id="textcolor" value="#ffffff" style="color:#ffffff;" type="Color" size="6" maxlength="10" onClick="cp2.select(document.getElementById('marqueeGenerator').textcolor,'pick1') ">
</div>
<div>
<label for="backgroundcolor">Background:</label>
<input name="backgroundcolor" id="backgroundcolor" value="#ff5566" style="background-color:#ff5566;" size="6" type="color" >
</div>
<div style="margin-top: 50px;">
<span onclick="marqueeGeneratorcode();" style="background-color:red!important;padding: 10px;color: #fff;text-transform: uppercase;"><script type="text/JavaScript">cp.writeDiv()</script> Refresh </span>
</div>
</td>
<td style="width: 20%;">
<label for="padding">Padding:</label>
<input name="padding" value="1" type="text" size="3" maxlength="3" onkeyup="clearField('paddingmetric');marqueeGeneratorcode();">
<select name="paddingmetric" id="paddingmetric" onchange="clearField('padding');marqueeGeneratorcode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
<br>
<label for="margin">Margin:</label>
<input name="margin" value="0" type="text" size="3" maxlength="3" onkeyup="clearField('marginmetric');marqueeGeneratorcode();">
<select name="marginmetric" id="marginmetric" onchange="clearField('margin');marqueeGeneratorcode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="auto"> Auto</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</td>
<td>
<div>
<label for="textbody">Enter Text:</label><br>
<textarea name="textbody" id="textbody" maxlength="2000" onkeyup="marqueeGeneratorcode();" onclick="this.focus();this.select()" style="width:90%;" title="Enter the text to be styled.">Enter Marquee Text...</textarea>
</div>
<div>
<label for="fontfamily">Font:</label>
<select name="fontfamily" id="fontfamily" onchange="marqueeGeneratorcode();" style="max-width:150px;">
<option value="inherit"> (Inherit)</option>
<optgroup label="Sans-Serif">
<option value="Arial, sans-serif" style="font-family:Arial, sans-serif"> Arial, Sans-Serif</option>
<option value="'Arial Black', sans-serif" style="font-family:'Arial Black', sans-serif" selected> Arial Black, Sans-Serif</option>
<option value="Corbel, sans-serif"> Corbel, Sans-Serif</option>
<option value="Geneva, sans-serif"> Geneva, Sans-Serif</option>
<option value="Helvetica, sans-serif" style="font-family:helvetica, sans-serif"> Helvetica, Sans-Serif</option>
<option value="'Lucida Grande', sans-serif"> 'Lucida Grande', Sans-Serif</option>
<option value="Tahoma, sans-serif"> Tahoma, Sans-Serif</option>
<option value="'Trebuchet MS', sans-serif"> Trebuchet MS, Sans-Serif</option>
<option value="Verdana, sans-serif"> Verdana, Sans-Serif</option>
<option value="sans-serif" style="font-family:sans-serif"> Sans-Serif (generic)</option>
</optgroup>
<optgroup label="Serif">
<option value="Baskerville, serif" style="font-family:Baskerville, serif"> Baskerville, Serif</option>
<option value="Garamond, serif" style="font-family:Garamond, serif"> Garamond, Serif</option>
<option value="Georgia, serif" style="font-family:Georgia, Serif"> Georgia, Serif</option>
<option value="'Times New Roman', serif" style="font-family:'Times New Roman', serif"> Times New Roman, Serif</option>
<option value="Palatino, serif" style="font-family:Palatino, serif"> Palatino, Serif</option>
<option value="serif" style="font-family:serif"> Serif (generic)</option>
</optgroup>
<optgroup label="Cursive/Fantasy">
<option value="'Comic Sans MS'" style="font-family:'Comic Sans MS'" > Comic Sans MS</option>
<option value="Copperplate" style="font-family:Copperplate"> Copperplate</option>
<option value="cursive" style="font-family:cursive"> Cursive (generic)</option>
<option value="fantasy" style="font-family:fantasy"> Fantasy (generic)</option>
<option value="Papyrus" style="font-family:Papyrus"> Papyrus</option>
<option value="'Brush Script MT'" style="font-family:'Brush Script MT'"> Brush Script MT</option>
</optgroup>
<optgroup label="Monospace">
<option value="Consolas, monospace" style="font-family:Consolas, monospace"> Consolas, Monospace</option>
<option value="Courier, monospace" style="font-family:Courier, monospace"> Courier, Monospace</option>
<option value="'Courier New', monospace" style="font-family:'Courier New', monospace"> Courier New, Monospace</option>
<option value="Monaco, monospace" style="font-family:Monaco, monospace"> Monaco, Monospace</option>
<option value="monospace" style="font-family:monospace"> Monospace (generic)</option>
</optgroup>
</select>
</div>
<div>
<label for="fontsize">Size:</label>
<input name="fontsize" value="2" type="text" size="3" maxlength="3" onkeyup="clearField('fontsize2');marqueeGeneratorcode();">
<select name="fontsizemetric" id="fontsizemetric" onchange="marqueeGeneratorcode();" style="max-width:70px;">
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px"> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" selected> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
<span style="padding-left:35px;font-weight:bold;">OR
<select name="fontsize2" id="fontsize2" onchange="clearField('fontsize');marqueeGeneratorcode();" style="max-width:90%;" title="Clear the font size above to enable this option.">
<option value="" selected disabled> None</option>
<option value="inherit"> (Inherit)</option>
<optgroup label="Absolute Size">
<option value="xx-small"> XX-Small</option>
<option value="x-small"> X-Small</option>
<option value="small"> Small</option>
<option value="medium"> Medium</option>
<option value="large"> Large</option>
<option value="x-large"> X-Large</option>
<option value="xx-large"> XX-Large</option>
</optgroup>
<optgroup label="Relative Size">
<option value="smaller"> Smaller</option>
<option value="larger"> Larger</option>
</optgroup>
</select>
</span>
</div>
<div onclick="marqueeGeneratorcode();">
<input name="fontstyle" id="fontstyle" type="checkbox" value=""> <span style="font-style:italic;">Italic</span>
<input name="fontweight" type="checkbox" value=""> <span style="font-weight:bold;">Bold</span>
<input name="fontvariant" id="fontvariant" type="checkbox" value=""> <span style="font-variant:small-caps;">Small Caps</span>
</div>
<div>
<label for="textalign">Alignment:</label>
<select name="textalign" id="textalign" onchange="marqueeGeneratorcode();">
<option value="inherit"> (Inherit)</option>
<option value="left"> Left</option>
<option value="center"> Center</option>
<option value="right"> Right</option>
<option value="justify"> Justified</option>
</select>
</div>
<div>
<label for="lineheight">Line-Height:</label>
<input name="lineheight" id="lineheight" value="1.3" type="text" size="3" maxlength="3" onkeyup="clearField('lineheightmetric');marqueeGeneratorcode();">
<select name="lineheightmetric" id="lineheightmetric" onchange="clearField('lineheight');marqueeGeneratorcode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="normal"> Normal</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px"> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" selected> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</div>
</td>
</tr>
<tr>
<th colspan="4">Copy Generate Code</th>
</tr>
<tr>
<td class="code" colspan="4">
<h2>Copy The Code</h2>
<p>Here is the code that was generated:</p>
<textarea name="generatedCode" id="generatedCode" onclick="this.focus();this.select()"></textarea>
</td>
</tr>
<td class="preview">
<div id="displayResult">
</div>
</td>
</table>
</td>
</tr>
</table>
</form>
</article>
<script src="demo.js"></script>
</body>
</html>
Step2:- Create style.css File.
.marqueeGenerator {
width:100%;
border-collapse:collapse;
background:lightgray;
color:#65885e;
}
.marqueeGenerator td {
border:1px solid #000;
vertical-align:top;
padding:0px;
}
.marqueeGenerator td.toolBar {
font-size: 18px;
color: #000;
width: 100%;
height: 300px;
padding: 0px;
margin: 0px;
}
.marqueeGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.marqueeGenerator td.toolBar th {
background-color:#000;
color:#fff;
padding: 10px;
font-size: 25px;
}
.marqueeGenerator td.toolBar td {
font-size:14px;
padding:3px;
border:none;
}
.marqueeGenerator td.toolBar textarea {
width:100%;
height:auto;
font-size:1em;
}
.marqueeGenerator td.preview {
background:#606606;
position: fixed;
bottom: 10%;
right: 0;
width:50%;
height: auto;
}
.marqueeGenerator div#displayResult {
max-width:100%;min-height:100%;max-height:100%;overflow:auto;margin-bottom:10px;padding:10px;
}
.marqueeGenerator textarea#generatedCode {
width:100%;min-height:200px;
}
.marqueeGenerator input {
border:1px solid #ccc;
}
.marqueeGenerator input[size="3"] {
width:2em;
}
.marqueeGenerator table[border="1"] td {
border:1px solid black;
width:11px;
}
.code{
font-weight: 700;
color: #000;
background-color: #f6f6f6;
}
span.marqueebehavior input[type=radio] + label, span.scrolldirection input[type=radio] + label {
display: inline-block;
margin: 2px;
padding: 15px;
width: 50px;
line-height: 50px;
background-color: #fff;
border: none;
font-size: 1em;
border-radius: 50px;
line-height: 1.2em;
text-align: center;
}
.marqueeGenerator
table
label{
color:#000;
text-transform: uppercase;
font-weight: 600;
}
.marqueeGenerator
table
select{
height: 30px;
margin: 5px;
}
/* Re-style radio buttons for 'Behavior' option */
span.marqueebehavior input[type=radio], span.scrolldirection input[type=radio] {
display:none;
margin:10px;
}
span.marqueebehavior input[type=radio] + label, span.scrolldirection input[type=radio] + label {
display:inline-block;
margin:2px;
padding: 15px;
background-color: #fff;
border: 1px solid #000;
font-size:1em;
line-height:1.2em;
text-align:center;
}
span.marqueebehavior input[type=radio]:checked + label, span.scrolldirection input[type=radio]:checked + label {
background-image: none;
background-color:yellow;
}Step3:- Create demo.js File.
function getRadioValue( rbGroup )
{
var bVal = "";
if( rbGroup.length )
{
for( var i=0; i<rbGroup.length && !bVal; i++ )
if( rbGroup[i].checked )
bVal = rbGroup[i].value;
}
else
bVal = rbGroup.checked ? rbGroup.value : "";
return bVal;
}
function marqueeGeneratorcode(form){
scrolldirection = getRadioValue( document.marqueeGenerator.scrolldirection );
scrollspeed = document.marqueeGenerator.scrollspeed.value;
marqueebehavior = getRadioValue( document.marqueeGenerator.marqueebehavior );
textbody = document.marqueeGenerator.textbody.value;
fontfamily = document.marqueeGenerator.fontfamily.value;
fontsize = document.marqueeGenerator.fontsize.value;
fontsizemetric = document.marqueeGenerator.fontsizemetric.value;
fontsize2 = document.marqueeGenerator.fontsize2.value;
fontstyle = document.marqueeGenerator.fontstyle.checked;
fontweight = document.marqueeGenerator.fontweight.checked;
fontvariant = document.marqueeGenerator.fontvariant.checked;
lineheight = document.marqueeGenerator.lineheight.value;
lineheightmetric = document.marqueeGenerator.lineheightmetric.value;
textalign = document.marqueeGenerator.textalign.value;
textcolor = document.marqueeGenerator.textcolor.value;
backgroundcolor = document.marqueeGenerator.backgroundcolor.value;
padding = document.marqueeGenerator.padding.value;
paddingmetric = document.marqueeGenerator.paddingmetric.value;
margin = document.marqueeGenerator.margin.value;
marginmetric = document.marqueeGenerator.marginmetric.value;
output = '<!-- Codes by myprograming.com -->\n\n' +
'<!-- CSS Code -->\n' +
'<style>\n' +
'.GeneratedMarquee {\n' +
((fontfamily != "inherit") ? 'font-family:' + fontfamily + ';\n' : '') +
((fontsize != "") ? 'font-size:' + fontsize + fontsizemetric + ';\n' : '') +
((fontsize2 != "inherit" && fontsize2 != "") ? 'font-size:' + fontsize2 + ';\n' : '') +
((fontstyle) ? 'font-style:italic;\n' : '') +
((fontweight) ? 'font-weight:bold;\n' : '') +
((fontvariant) ? 'font-variant:small-caps;\n' : '') +
((lineheightmetric == "normal") ? 'line-height:' + lineheightmetric + ';\n' : ((lineheight) ? 'line-height:' + lineheight + lineheightmetric + ';\n' : '')) +
((textalign != "inherit") ? 'text-align:' + textalign + ';\n' : '') +
((textcolor) ? 'color:' + textcolor + ';\n' : '') +
((backgroundcolor) ? 'background-color:' + backgroundcolor + ';\n' : '') +
((paddingmetric != "inherit") ? 'padding:' + padding + paddingmetric + ';\n' : '') +
((marginmetric == "auto") ? 'margin:' + marginmetric + ';\n' : ((margin && marginmetric) ? 'margin:' + margin + marginmetric + ';\n' : '')) +
'\n}\n' +
'</style>\n\n' +
'<!-- HTML Code -->\n' +
'<marquee class="GeneratedMarquee"' +
((scrolldirection) ? ' direction="' + scrolldirection + '"' : '') +
((scrollspeed) ? ' scrollamount="' + scrollspeed + '"' : '') +
((marqueebehavior) ? ' behavior="' + marqueebehavior + '"' : '') +
'>' +
textbody +
'</marquee>\n' +
'\n';
document.marqueeGenerator.generatedCode.value = output;
document.getElementById('displayResult').innerHTML = output;
document.getElementById('textcolor').style.color = textcolor;
document.getElementById('backgroundcolor').style.backgroundColor = backgroundcolor;
return output;
}
function clearField(field) {
if (field == 'fontsize') {
document.marqueeGenerator.fontsize.value = '';
}
else if
(field == 'fontsize2') {
document.marqueeGenerator.fontsize2.value = '';
}
else if
(field == 'lineheight') {
if (document.marqueeGenerator.lineheightmetric.value == 'normal' || document.marqueeGenerator.lineheightmetric.value == 'inherit') {
document.marqueeGenerator.lineheight.value = '';
}
}
else if
(field == 'lineheightmetric') {
if (document.marqueeGenerator.lineheightmetric.value == 'normal' || document.marqueeGenerator.lineheightmetric.value == 'inherit') {
document.marqueeGenerator.lineheightmetric.value = '';
}
}
else if (field == 'textcolor') {
document.marqueeGenerator.textcolor.value = '';
}
else if (field == 'backgroundcolor') {
document.marqueeGenerator.backgroundcolor.value = '';
}
else if
(field == 'padding') {
if (document.marqueeGenerator.paddingmetric.value == 'inherit') {
document.marqueeGenerator.padding.value = '';
}
}
else if
(field == 'paddingmetric') {
if (document.marqueeGenerator.paddingmetric.value == 'inherit') {
document.marqueeGenerator.paddingmetric.value = '';
}
}
else if
(field == 'margin') {
if (document.marqueeGenerator.marginmetric.value == 'auto' || document.marqueeGenerator.marginmetric.value == 'inherit') {
document.marqueeGenerator.margin.value = '';
}
}
else if
(field == 'marginmetric') {
if (document.marqueeGenerator.marginmetric.value == 'auto' || document.marqueeGenerator.marginmetric.value == 'inherit') {
document.marqueeGenerator.marginmetric.value = '';
}
}
}
document.getElementsByTagName('body').onload = marqueeGeneratorcode();Note:- Also add style.css and demo.js link in index.html File.
