www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript scrolling horizontal text?

  1. #1
    Join Date
    Oct 2012
    Posts
    12

    Javascript scrolling horizontal text?

    Ok. So, I have been trying to figure out a way of making a marquee equivalent using just javascript. For the folks that don't know what a marquee is... it is Microsoft's way of making text scroll across the page or so I have read. Anyways, it is a deprecated way of getting text to scroll across a page, however this is so far the only way I have been able to do this. So, any thoughts on the subject would be great to have? Just for a little background info: I am very new to web development still and figured javascript would be the way to get it done. So if you know of a better way please let me know.

    Thanks in advance.

    example of scrolling text with marquee:

    <marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    You should check out the JQuery javascript library. It has a very useful function called .animate() that you can use to animate elements on your website.

    Here's a simple example of how to position a div off the screens right side, animate it from right to left across the screen, and have it leave the left side of the screen:

    HTML
    Code:
    <div class="scroll">This text be scrollin'!</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    CSS
    Code:
    .scroll {
    position: absolute;
    right: -200px;
    width: 200px;
    }
    JQuery
    Code:
    $(document).ready(function(){
      $('.scroll').animate({ // call animate function on elements with class="scroll"
         right: $(document).width() // animates right value from the original -200px(from css) to the documents width(ie if elements right value = the document width, then element is off screen)
      }, 3000); // 3000 is duration in milliseconds (ie 3 seconds)
    
    });
    Also, be sure to include the JQuery library in the <head> of your document so you can use JQuery functions/code.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    .container{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    overflow: hidden;
    background-color: white;
    border: 2px solid orange;
    padding: 2px;
    padding-left: 4px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Simple Marquee (04-October-2012)
    * by Vic Phillips - http://www.vicsjavascripts.org.uk/
    ***********************************************/
    
    var zxcMarquee={
    
     init:function(o){
      var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone,nu=Math.ceil(p[mde[1]]/sz)+1,z0=1;
      p.style.overflow='hidden';
      obj.style.position='absolute';
      obj.style[mde[0]]='0px';
      obj.style[mde[3]]=sz+'px';
      for (;z0<nu;z0++){
       clone=obj.cloneNode(true);
       clone.style[mde[0]]=sz*z0+'px';
       clone.style[mde[2]]='0px';
       obj.appendChild(clone);
      }
      o=this['zxc'+id]={
       obj:obj,
       mde:mde[0],
       sz:sz*(z0-1)
      }
      if (typeof(srt)=='number'){
       o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
      }
      else {
       this.scroll(id,0)
      }
     },
    
     scroll:function(id,ud){
      var oop=this,o=this['zxc'+id],p;
      if (o){
       ud=typeof(ud)=='number'?ud:0;
       clearTimeout(o.dly);
       p=parseInt(o.obj.style[o.mde])+ud;
       if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
        p+=o.sz*(ud>0?-1:1);
       }
       o.obj.style[o.mde]=p+'px';
       o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
      }
     }
    
    }
    
    function init(){
    
     zxcMarquee.init({
      ID:'marquee1',     // the unique ID name of the parent DIV.                        (string)
      Mode:'Vertical',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
      StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
      StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)
     });
    
     zxcMarquee.init({
      ID:'marquee2',     // the unique ID name of the parent DIV.                        (string)
      Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
      StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
      StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)
     });
    
    }
    
    if (window.addEventListener)
     window.addEventListener("load", init, false)
    else if (window.attachEvent)
     window.attachEvent("onload", init)
    else if (document.getElementById)
     window.onload=init
    
    
    </script></head>
    
    <body>
    
    <div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
    <div style="position: absolute; width: 98%;">
    
    <p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
    Ajax category added</a></b><br>
    The Dynamic Content category has just been branched out with a new
    <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
    to better organize its scripts.</p>
    <p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
    We're excited to introduce our latest web tool- Gradient Image Maker!</p>
    
    <p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
    Check out our new forums for help on our scripts and coding in general.</p>
    <p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
    Usage update</a></b><br>
    Please review our updated usage terms regarding putting our scripts in an
    external .js file. </p>
    
    </div>
    </div>
    
    
    <div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);" style="width:600px;">
    <div style="position: absolute; width: 200px;">
    
    <p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
    Ajax category added</a></b><br>
    The Dynamic Content category has just been branched out with a new
    <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
    to better organize its scripts.</p>
    <p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
    We're excited to introduce our latest web tool- Gradient Image Maker!</p>
    
    <p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
    Check out our new forums for help on our scripts and coding in general.</p>
    <p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
    Usage update</a></b><br>
    Please review our updated usage terms regarding putting our scripts in an
    external .js file. </p>
    
    </div>
    </div>
    </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/

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    doh!

    what's wrong with marquee by the way

  5. #5
    Join Date
    Jan 2010
    Posts
    79
    Quote Originally Posted by ZABI View Post
    doh!
    what's wrong with marquee by the way
    The marquee tag was a Microsoft non standard element and never adopted by the w3c, Internet Explorer was the only browser to support it (I think). The w3c thought it was distracting and everyone else hated it because it was a Microsoft invention, a shame really I thought it had its uses.

    Anyways here is my implementation of a simple horizontal scroll:
    Code:
      <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>
    Last edited by Vince616; 10-10-2012 at 07:46 AM.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,086
    the <marquee> tag works in my versions of FF, IE and Chrome

    (personally, I think it's a trashy effect, but that's just a matter of taste)
    Last edited by xelawho; 10-10-2012 at 07:56 AM.

  7. #7
    Join Date
    Mar 2009
    Posts
    452
    hmm, so basically it is the hate for Microsoft not the marquee itself. i wonder still why ?

    it was the thing that attracted me to HTML and thus i am now a web developer i still use where ever it can be used.

    the other ways are also fine as they have more features to tune the animation.

  8. #8
    Join Date
    Jan 2010
    Posts
    79
    Quote Originally Posted by xelawho View Post
    the <marquee> tag works in my versions of FF, IE and Chrome

    (personally, I think it's a trashy effect, but that's just personal taste)
    it seems to work in Opera and Safari as well. I will bet that they support it grudgingly though

  9. #9
    Join Date
    Oct 2012
    Posts
    12
    Thanks a lot for all the quick replies on the subject. I have started to look into jquery and have been able to use it.

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