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
Build your own website and sell stuff. Add as many products as you want and it won't cost you any extra.
Get super fast hosting
Free domain registration
Outstanding reliability
Free shopping basket
Easy to use site builder
Try creating your website free for 30 days. No credit card required, click the below link.
Free domain included or add a domain you own - Install WordPress in a few clicks - Great support team.
Get a Website that Works. It's quick and easy. No experience necessary.
Sign up today and get 20 percent off your hosting.