Hi,

I'm a research assistant currently developing some stimuli for an experiment in the form of an online survey. I use Qualtrics for the purpose.

I would like two separate lines of rolling text, and I've found the following script on this site very useful:


<html>
<head>
<style type="text/css">
#scroll{
position : absolute;
white-space : nowrap;
top : 0px;
left : 200px;
}
#oScroll{
margin : 0px;
padding : 0px;
position : relative;
width : 200px;
height : 20px;
overflow : hidden;
}
</style>
<script type="text/javascript">
function scroll(oid,iid){
this.oCont=document.getElementById(oid)
this.ele=document.getElementById(iid)
this.width=this.ele.clientWidth;
this.n=this.oCont.clientWidth;
this.move=function(){
this.ele.style.left=this.n+"px"
this.n--
if(this.n<(-this.width)){this.n=this.oCont.clientWidth}
}
}
var vScroll
function setup(){
vScroll=new scroll("oScroll","scroll");
setInterval("vScroll.move()",20)
}
onload=function(){setup()}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>



The advantage with this code is that the text doesn't lag - it scrolls smoothly (opposed to a typical marquee-HTML).

My problem is the following:

I need two separate sentences to scroll on two separate lines simultaneously, e.g.:

FIRST LINE OF SCROLLING TEXT

SECOND LINE OF SCROLLING TEXT

But I can't use the above code twice in the same script? They probably conflict with each other. I am really new in programming, and I can't find any solutions. I guess I'll have to change some ID's, but I'm not sure.

So my question is: How can I have two lines of text scrolling simultaneously with the above code?

I hope a kind soul will help me out.

Thank you very much in advance.

Best regards,
Jakob