www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scrolling text and conflicting codes

Hybrid View

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    Smile Scrolling text and conflicting codes

    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

  2. #2
    Join Date
    Sep 2007
    Posts
    315
    If I understand
    Code:
      
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    #scroll{
    position : absolute;
    color:red;
    white-space : nowrap;
    top : 0px;
    left : 200px;
    }
    #oScroll{
    margin : 0px;
    padding : 0px;
    position : relative;
    width : 200px;
    height : 20px;
    overflow : hidden;
    }
    #scroll2{
    position : absolute;
    color:blue;
    white-space : nowrap;
    top : 0px;
    left : 200px;
    }
    #oScroll2{
    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;
    var vScroll2;
    function setup(){
    
    vScroll=new scroll("oScroll","scroll");
    
    vScroll2=new scroll("oScroll2","scroll2");
    
    // http://www.w3schools.com/jsref/met_win_setinterval.asp
    
    setInterval(function(){vScroll.move(), vScroll2.move()},20);
    }
    onload=function(){setup()}
    
    </script>
    </head>
    <body>
    <div id="oScroll">
    <div id="scroll">This is the scrolling text</div>
    </div>
    
    <div id="oScroll2">
    <div id="scroll2">iyiliği emret, kötülükten alıkoy.</div>
    </div>
    </body>
    </html>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles