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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser Marquee II: remove blank space between scrolls

    Hi there
    Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at:
    http://www.mrjindustrial.com.au/scro..._concrete.html
    Thanks, hope someone can help.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Modifying that type of marquee to convert it to scroll continuously is complicated. It is easier to start over and write one that handles continuous scrolling from the start.

    Take a look at http://javascript.about.com/library/blctmarquee1.htm which has a marquee script that scrolls text continuously regardless of the width of the marquee and the length of the text.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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">
    
    #marqueecontainer{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    overflow: hidden;
    background-color: white;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    else
    cross_marquee.style.top="0px"
    }
    
    function initializemarquee(){
     cross_marquee=document.getElementById("vmarquee")
     cross_marquee.style.top=0
    
     marqueeheight=document.getElementById("marqueecontainer").offsetHeight
     actualheight=cross_marquee.offsetHeight;
     var div=cross_marquee.cloneNode(true);
     div.style.left='0px';
     div.style.top=actualheight+'px';
     cross_marquee.appendChild(div);
     if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
      cross_marquee.style.height=marqueeheight+"px"
      cross_marquee.style.overflow="scroll"
      return
     }
     setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    
    
    </script></head>
    
    <body>
    <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" 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>
    </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
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you vwphillips, that worked great!
    Happy to make a small donation to your charity.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One more question if possible ...
    URL: http://www.mrjindustrial.com.au/scro..._concrete.html
    It works great but I just noticed there's a "jump" sideways where the images move slowly left, then "jump" back to the correct position once they reach the starting position.
    You can really see it if you watch the white triangle.
    Possible to fix that???
    Thanks again!

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Georgia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello everyone...brand new member and first time post.

    I know this thread is dated 2011. But, after weeks of searching and testing and trying, jwphillips code above has been the only thing I've been able to get to work. However, the scroll is upward. Is there any way to change the direction to "from left to right"?

    Thank you in advance for your consideration and help.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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: 3px 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;
      p.style.overflow='hidden';
      obj.style.position='absolute';
      obj.style[mde[0]]='0px';
      obj.style[mde[3]]=sz+'px';
      clone=obj.cloneNode(true);
      clone.style[mde[0]]=sz+'px';
      clone.style[mde[2]]='0px';
      obj.appendChild(clone);
      o=this['zxc'+id]={
       obj:obj,
       mde:mde[0],
       sz:sz
      }
      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);">
    <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>
    </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/

  • #8
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Georgia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile A HUGE thanks!

    Thank you vwphillips! The fact that you know so much and are so nice about wanting to help others makes you a blessing.

  • #9
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Georgia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'm sorry to bother again....

    Hi again.

    I am finding the simple marquee works great in IE but its not scrolling at all in the latest versions of Chrome, Firefox and Safari. Is there a workaround on those 3 browsers?

    Thanks again for your help.
    Last edited by flipper828; 10-04-2012 at 03:03 PM. Reason: took my name out.

  • #10
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Georgia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I forgot to mention....

    I forgot to mention above that the page I am working on has a javascript date program and an image slider that are working on all of the browsers. So I don't understand why this wonderful marquee script works perfectly on IE.

    On the rest of the browsers (Chrome, Firefox, Safari and Opera) display the test for the marquee but it is not scrolling.

    I hope that explains my problem at little bit better. Sometimes it takes me a while to explain things properly. Sorry.

  • #11
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Georgia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I suppose I am as stupid as I feel.....

    Please disregard the two posts above.....the script works perfectly in all the browsers.

    *bows* to vwphillips

  • #12
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Minor Issue with vertical marquee

    Hello vwphillips,

    I hope you are still using these forums.

    I found vertical marquee script quite useful for my site. But I have one minor issue with it. I am not sure if others have the same issue.
    So whenever the entire loop is displayed, the first message is displayed again without any gap, right? At that moment there is a slight jump in the marquee container and then goes back to normal functioning.

    Is there anyway to fix that?

    Thank You.

    Regards,
    Ashwin


  •  

    Posting Permissions

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