HTML Marquee Code

UPDATED: JULY 25, 2016 – ARTICLE: HTML MARQUEE

Category: Web Design & Development

Horizontal marquee code. A HTML marquee is a scrolling piece of text see our demo above, displayed either horizontally across or vertically down your website page depending on the settings. Having a horizontal marquee on your website can be a good way to have extra text that scrolls across the page when space is limited. There are lots of different HTML marquee codes on the internet that you can use some better than others. Try our HTML marquee code below.

Horizontal Marquee Code

The easiest way to create scrolling text is to use a HTML horizontal marquee code. Place the text you would like to scroll in the HTML marquee code and it will scroll your text from left to right. This is known as continuous scrolling text.

Don’t forget if you are thinking of creating a website and need any help you can contact us.

SPONSORED ADVERTISEMENTS

Marquee Attributes

Below is what to look for in the scrolling text marquee code to change the marquee width, speed, background color, pause on mouse over, text size and color. You do not need to copy the below codes they are only to show you where to change the setting.

1. Set the width of the horizontal marquee code.

The width of the marquee is set to 100% this means it will be across the page and be responsive 
//Specify the marquee's width (in pixels)
var marqueewidth="100%"

2. Set the horizontal marquee speed faster or slower

Speed is set to 1 for faster make higher
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1

3. Change the background color the continuous scrolling text scrolls on

Change the marquee background color change #f0f0f0 to your color
//configure background color:
var marqueebgcolor="#f0f0f0"

4. The horizontal marquee code is set to pause on mouse over.

If you don't want it to pause change 0=no. 1=yes to 0=yes. 1=no
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

5. Change text color and size

Change text size here <font style="FONT-SIZE: 10pt; FONT-FAMILY: Arial;">
And color here <font color="#333399">
var marqueecontent='<nobr><font style="FONT-SIZE: 10pt; FONT-FAMILY: Arial;"><font color="#333399">

Copy the horizontal marquee code below replace our text with yours easy as that!

<!-- HTML Marquee Code End -->
<script language="JavaScript1.2">
     /*
Cross browser Marquee script
*/
//Specify the marquee's width (in pixels)
var marqueewidth="100%"
//Specify the marquee's height
var marqueeheight="30px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//configure background color:
var marqueebgcolor="#f0f0f0"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):
var marqueecontent='<nobr><font style="FONT-SIZE: 10pt; FONT-FAMILY: Arial;"><font color="#333399">This is the demo of our horizontal marquee. Its great to place content on your page for visitors to see. Background colour, text colour and size can be changed in the code. Speed can also be faster or slower. You can even have hyperlinks in the code visit <a href="http://www.youlinkhere.com/">www.yourlinkhere.com</a> run your mouse on the marquee and it will pause.</font></font></nobr>'
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate
function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

 <!-- HTML Marquee Code End -->

 
Tags: horizontal marquee code, marquee, creating a website
ARTICLE: HTML MARQUEE WAS FIRST PUBLISHED: DECEMBER 11, 2013