Hi there Bobba Buoy,
have a look at this example...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tickerness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td#msg {
background-color:#c0c0c0;
width:775px;
}
.setup {
position:relative;
height:22px;
line-height:22px;
border:2px outset #c0c0c0;
overflow:hidden;
}
#ticker0,#ticker1 {
position:absolute;
left:0;
padding:0 20px;
font-face:trebuchet,sans-serif;
font-size:12pt;
font-style:oblique;
color:#900;
text-align:center;
}
</style>
<script type="text/javascript">
var obj0;
var obj1;
var obj2;
var j;
var temp;
var i=0;
var speed=25;
var message=' We make motorization of your new or existing blinds easy for you! Columbus Day Event Ends Soon!';
function imgScroll() {
obj0.style.left=i+'px';
obj1.style.left=j+'px';
i--;
j--;
if(i<-temp-1) {
i=temp;
}
if(j<-temp-1) {
j=temp;
}
scroller=setTimeout('imgScroll()',speed);
}
window.onload=function() {
obj0=document.getElementById('ticker0');
obj1=document.getElementById('ticker1');
obj2=document.getElementById('container');
obj0.firstChild.nodeValue=obj1.firstChild.nodeValue=message;
j=obj0.offsetWidth;
temp=j;
obj2.className='setup';
obj0.style.width=obj1.style.width=temp+'px';
imgScroll();
}
</script>
</head>
<body>
<table><tr>
<td id="msg" colspan="2">
<div id="container">
<div id="ticker0"> </div>
<div id="ticker1"> </div>
</div>
</td>
</tr></table>
</body>
</html>
If that suit your requirements, then you will need to make these modifications to your page...
replace this...
var id,pause=0,position=0,revol=29;
function banner() {
var msg=" We make motorization of your new or existing blinds easy for you! Columbus Day Event Ends Soon!";
var speed=10;
document.marquee.marquee_display.value=msg.substring(position,position+300);
if(position++==msg.length)
{
if(revol--<2)return;
position=0;
}
id=setTimeout("banner()",1000/speed);
}
...with this...
var obj0;
var obj1;
var obj2;
var j;
var temp;
var i=0;
var speed=25;
var message=' We make motorization of your new or existing blinds easy for you! Columbus Day Event Ends Soon!';
function imgScroll() {
obj0.style.left=i+'px';
obj1.style.left=j+'px';
i--;
j--;
if(i<-temp-1) {
i=temp;
}
if(j<-temp-1) {
j=temp;
}
scroller=setTimeout('imgScroll()',speed);
}
window.onload=function() {
obj0=document.getElementById('ticker0');
obj1=document.getElementById('ticker1');
obj2=document.getElementById('container');
obj0.firstChild.nodeValue=obj1.firstChild.nodeValue=message;
j=obj0.offsetWidth;
temp=j;
obj2.className='setup';
obj0.style.width=obj1.style.width=temp+'px';
imgScroll();
}
replace this...
<body onload="javascript:banner();">
...with this...
<body>
replace this...
<td style="background-color:silver;border:medium outset silver;width:775px;text-align:center;" colspan="2">
<form name="marquee" style="padding:0;margin:0;">
<input name="marquee_display" style="color:#990000;background-color:silver;width:775px;font-style:italic;font-face:trebuchet;font-size:12pt;border:none;" />
</form>
</td>
...with this...
<td id="msg" colspan="2">
<div id="container">
<div id="ticker0"> </div>
<div id="ticker1"> </div>
</div>
</td>
add this to your stylesheet...
td#msg {
background-color:#c0c0c0;
width:775px;
}
.setup {
position:relative;
height:22px;
line-height:22px;
border:2px outset #c0c0c0;
overflow:hidden;
}
#ticker0,#ticker1 {
position:absolute;
left:0;
padding:0 20px;
font-face:trebuchet,sans-serif;
font-size:12pt;
font-style:oblique;
color:#900;
text-align:center;
}