Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts

    Vertical scrolling marquee with controls

    I was asked for this in another seldom-read forum so thought I would post what I wrote here.

    The user wanted a vertical scrolling marquee that also had UP and DOWN buttons that would allow the user to control the scrolling (in either direction). If a button had not been used for some period of time, then he wanted the normal scrolling to continue.

    He said he had searched and found several scrollers, but not that did all the above. I was too lazy to search for one, so I just wrote one. Since it might be useful to somebody else, here it is.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#scroller {
        position: absolute;
        top: 50px;
        right: 20px;
        height: 300px;
        width: 220px;
        border: solid brown 2px;
        background-color: yellow;
        overflow: hidden;
    }
    div#scroller div {
        position: absolute;
        top: 0px; left: 10px;
        width: 200px;
        font-size: medium;
        color: black;
    }
    span.mytitle {
        font-size: large;
        font-weight: bold; 
        color: blue;
    } 
    div.controls {
        position: absolute;
        top: 150px;
        right: 250px;
        height: 36px;
        width: 100px;
        border: solid brown 2px;
        background-color: yellow;
        text-align: center;
        padding-top: 13px;
        font-size: 24px;
        font-weight: bold;
        color: brown;
        cursor: pointer;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id="goUp" class="controls">UP</div>
    <div id="goDown" class="controls" style="top: 200px;">DOWN</div>
    <div id="scroller">
        <div id="copy1">
            <span style="font-size: x-large; color: red;">CONTENT TOP</span><br/>
            This is where you put the text you want to have scroll.<br/><br/>
            <span class="mytitle">This is a title</span><br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            <hr/>
            <span class="mytitle">Another title</span>
            <ul>
                <li>And this is a list</li>
                <li>Of items</li>
                <li>Just demonstrating</li>
                <li>More content types</li>
            </ul>
            <hr/>
            <span class="mytitle">Announcement</span><br/>
            When in the course of human events it 
            becomes necessary for one people to dissolve the political bands which have connected
            them with another and to assume among the powers of the earth, the separate and equal 
            station to which the Laws of Nature and of Nature's God entitle them, a decent respect 
            to the opinions of mankind requires that they should declare the causes which impel 
            them to the separation.
            <br/><br/>
        </div>
    </div>
            
            
    Just some stuff on the page<br/>
    Just some stuff on the page<br/>
    Just some stuff on the page<br/>
    Just some stuff on the page<br/>
    
    <script type="text/javascript">
    (
      function() 
      {
          // adjust these numbers to change the timings:
          var CONTINUETIME = 5000; // 5 seconds before contining
          var SCROLLSPEED  = 40; 
          var BUTTONSPEED  = 15;
    
          // and then this code should work:
          var holder = document.getElementById("scroller");
          var part1 = document.getElementById("copy1");
          var partHeight = part1.offsetHeight;
          // first: clone part1
          var part2 = document.createElement("div");
          part2.id = "copy2";
          part2.innerHTML = part1.innerHTML;
          part2.top = partHeight + "px";
          holder.appendChild(part2);
    
          var p1Top = 0; 
          var p2Top = partHeight;
          function scrollup( )
          {
              --p1Top;
              --p2Top;
              if ( p2Top <= 0 )
              {
                  // swap part1 and part2
                  var temp = part1;
                  part1 = part2;
                  part2 = temp; 
                  temp = p1Top;
                  p1Top = p2Top;
                  p2Top = temp + 2 * partHeight;
              }
              part1.style.top = p1Top + "px";
              part2.style.top = p2Top + "px";
          }
          function scrolldown( )
          {
              ++p1Top;
              ++p2Top;
              if ( p1Top >= 0 )
              {
                  // swap part1 and part2
                  var temp = part1;
                  part1 = part2;
                  part2 = temp; 
                  temp = p1Top;
                  p1Top = p2Top - 2 * partHeight;
                  p2Top = temp;
              }
              part1.style.top = p1Top + "px";
              part2.style.top = p2Top + "px";
          }
    
          var moving = null;
          var paused = null;
    
          var upbutton = document.getElementById("goUp");
          var downbutton = document.getElementById("goDown");
    
          upbutton.onmouseover = function( )
          {
              clearTimeout( paused );
              clearInterval( moving );
              moving = setInterval( scrollup, BUTTONSPEED );
          }
          upbutton.onmouseout = pause;
    
          downbutton.onmouseover = function( )
          {
              clearTimeout( paused );
              clearInterval( moving );
              moving = setInterval( scrolldown, BUTTONSPEED );
          }
          downbutton.onmouseout = pause;
    
          function pause( )
          {
              clearTimeout( paused );
              clearInterval( moving );
              paused = setTimeout( continuing, CONTINUETIME );
          }
          function continuing( )
          {
              clearTimeout( paused );
              clearInterval( moving );
              moving = setInterval( scrollup, SCROLLSPEED );
          }
    
          // and start it all up
          continuing( );     
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,465
    Thanks
    3
    Thanked 494 Times in 481 Posts
    bit more flexibility

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .scroller {
        position: absolute;
        top: 50px;
        right: 20px;
        height: 300px;
        width: 220px;
        border: solid brown 2px;
        background-color: yellow;
    }
    .scroller div {
        position: absolute;
        top: 0px; left: 10px;
        width: 200px;
        font-size: medium;
        color: black;
    }
    span.mytitle {
        font-size: large;
        font-weight: bold;
        color: blue;
    }
    div.controls {
        position: absolute;
        top: 150px;
        right: 250px;
        height: 36px;
        width: 100px;
        border: solid brown 2px;
        background-color: yellow;
        text-align: center;
        padding-top: 13px;
        font-size: 24px;
        font-weight: bold;
        color: brown;
        cursor: pointer;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id="scrollerUp" class="controls">UP</div>
    <div id="scrollerDown" class="controls" style="top: 200px;">DOWN</div>
    <div id="scroller" class="scroller">
        <div>
            <span style="font-size: x-large; color: red;">CONTENT TOP</span><br/>
            This is where you put the text you want to have scroll.<br/><br/>
            <span class="mytitle">This is a title</span><br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            <hr/>
            <span class="mytitle">Another title</span>
            <ul>
                <li>And this is a list</li>
                <li>Of items</li>
                <li>Just demonstrating</li>
                <li>More content types</li>
            </ul>
            <hr/>
            <span class="mytitle">Announcement</span><br/>
            When in the course of human events it
            becomes necessary for one people to dissolve the political bands which have connected
            them with another and to assume among the powers of the earth, the separate and equal
            station to which the Laws of Nature and of Nature's God entitle them, a decent respect
            to the opinions of mankind requires that they should declare the causes which impel
            them to the separation.
            <br/><br/>
        </div>
    </div>
    
    <div id="scroller2" class="scroller" style="height:150px;right:500px;">
        <div style="width:600px;">
            <span class="mytitle">Announcement</span><br/>
            When in the course of human events it
            becomes necessary for one people to dissolve the political bands which have connected
            them with another and to assume among the powers of the earth, the separate and equal
            station to which the Laws of Nature and of Nature's God entitle them, a decent respect
            to the opinions of mankind requires that they should declare the causes which impel
            them to the separation.
            <br/><br/>
        </div>
    </div>
    
    
    <script type="text/javascript">
    
    var zxcScroller ={
    
     Direction:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;;
      o&&o.ud!=ud?this.scroll(o,ud):null;
     },
    
     Scroll:function(id,ms){
      var o=this['zxc'+id],oop=this;
      o?o.to=o.to=setTimeout(function(){ oop.scroll(o); },ms||o.srt):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       clearTimeout(o.a[4]);
      }
     },
    
     init:function(o){
      var id=o.ScrollerID,m=o.Mode,ms=o.ScrollDuration,srt=o.StartDelay,as=o.AutoStart,ud=o.Direction,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null;
      if (s){
       var m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','top','offsetWidth']:['top','left','offsetHeight'],sz=s[m[2]],c,z0=1;
       p.style.overflow='hidden';
       c=s.cloneNode(true);
       c.style.position='absolute';
       for (;z0<Math.ceil(p[m[2]]/sz)+1;z0++){
        c=c.cloneNode(true);
        c.style[m[0]]=sz*z0+'px';
        c.style[m[1]]='0px';
        s.appendChild(c);
       }
       o.id=id;
       o.sz=sz;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.a=[s,m[0],o.ud>0?0:-sz];
       o.ms=typeof(ms)=='number'&&ms>500?ms:o.sz*20;
       o.srt=typeof(srt)=='number'&&srt>200?srt:200;
       this.addevt(p,'mouseover','Pause',id);
       this.addevt(p,'mouseout','Scroll',id);
       c=document.getElementById(id+'Up');
       c?this.addevt(c,'mouseup','Direction',id,1):null;
       c=document.getElementById(id+'Down');
       c?this.addevt(c,'mouseup','Direction',id,-1):null;
       this['zxc'+id]=o;
       as!==false?this.Scroll(id,typeof(as)=='number'&&srt>=0?as:200):null;
      }
     },
    
     scroll:function(o,ud){
      this.Pause(o.id);
      ud?o.ud=ud:null;
      var t=o.ud>0?-o.sz:0
      this.animate(o,o.a,o.a[2],t,new Date(),o.ms*Math.abs((t-o.a[2])/o.sz));
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=n;
       a[0].style[a[1]]=a[2]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=o.ud>0?0:-o.sz;
       this.scroll(o);
    
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcScroller.init({
     ScrollerID:'scroller', // the unique ID name of the parent DIV.                       (string)
     Mode:'Vertical',       //(optional) The scroll mode, 'Vertical' or 'Horizontal'.      (default = 'Vertical')
     ScrollDuration:7000,   //(optional) the scroll duration in milli seconds.             (default = scroll height * 20)
     Direction:-1,          //(optional) the scroll direction > 0 = up, < 0 = down.        (default = 1 = up)
     StartDelay:2000,       //(optional) the mouseout start scroll delay in milli seconds. (default = 200)
     AutoStart:500          //(optional) the auto start scroll delay in milli seconds.     (default = 200, false = no auto start)
    })
    
    
    zxcScroller.init({
     Mode:'Horizontal',
     ScrollerID:'scroller2'
    })
    
    
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to add about other possibilities, here is an old tweak I had for the marquee to vertical:
    <code>
    <!DOCTYPE html>
    <html><head><style>marquee{padding:15;position:absolute;font:24 calibri;color:red;background:yellow;border:solid 1 black}</style></head>
    <body>
    <marquee style="left:75;top:10;width:450" scrollamount="2" scrolldelay="10" behavior="scroll">This is a standard marquee right to left</marquee>
    <marquee style="left:10;top:75;width:300;filter:'progidXImageTransform.Microsoft.BasicImage(rotation=3)'" scrollamount="4" scrolldelay="10" behavior="scroll">This marquee is for IE and uses Microsoft filter to turn vertical</marquee>
    <marquee id=mq style="left:75;top:75;width:450;height:300;" behavior="scroll" scrollamount="2" scrolldelay="10"></marquee>
    <marquee style="left:530;top:75;width:50;height:300;writing-mode:tb-rl" scrollamount="2" scrolldelay="10">This marquee uses Writing mode to turn vertical</marquee>
    <marquee style="left:75;top:380;width:450" scrollamount="2" scrolldelay="10" behavior="scroll" direction="right">This is a standard marquee left to right</marquee>
    </body>
    <script>
    tt="<b><u>*** This is a vertical marquee ***</u></b>"
    tt=tt+"<P><font color='blue'>Normal marquee is an one-line horizontal ticker.</font></p><p>"
    tt=tt+"Get this vertical marquee by using innerHTML, as marquee throws away other tags, and setting the direction of the marque UP."
    mq.innerHTML=tt;mq.direction='up'
    </script>
    </html>
    </code>


  •  

    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
    •