Results 1 to 7 of 7

Thread: Translucent Scroller - how to stop the loop

  1. #1
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Translucent Scroller - how to stop the loop

    Hi, I want to use this great code but I have a questions that I didn't find answers to on other posts.

    Is it possible to stop the scroller with the last scrollercontent and how would I code that in?

    I would greatly appreciate the help

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    http://www.dynamicdrive.com/dynamici...centscroll.htm

    is a very old script

    updated version

    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>
    </head>
    
    <body>
    <input type="button" value="Auto"  onmouseup="zxcFadeSlider.Auto('tst');" />
    <input type="button" value="Pause"  onmouseup="zxcFadeSlider.Pause('tst');" />
    <input type="button" value="GoTo 0"  onmouseup="zxcFadeSlider.GoTo('tst',0);" />
    <input type="button" value="GoTo 1"  onmouseup="zxcFadeSlider.GoTo('tst',1);" />
    <input type="button" value="GoTo 2"  onmouseup="zxcFadeSlider.GoTo('tst',2);" />
    <input type="button" value="Next"  onmouseup="zxcFadeSlider.Next('tst',1);" />
    <input type="button" value="Back"  onmouseup="zxcFadeSlider.Next('tst',-1);" />
    <input id="ip" />
    <br />
    <br />
    <div id="tst" style="position:relative;width:150px;height:115px;overflow:hidden;" >
     <div style="background-Color:#CCFF99;padding:5px;"></div>
    </div>
    
    <br />
    <br />
    <div id="tst1" style="position:relative;width:150px;height:115px;overflow:hidden;" onmouseover="zxcFadeSlider.Pause('tst1');" onmouseout="zxcFadeSlider.Auto('tst1');">
     <div style="background-Color:#CCFF99;padding:5px;"></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slider (04-August-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSlider={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.c+ud);
      }
     },
    
     GoTo:function(id,c){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       if (o.ary[c]&&c!=o.c){
        o.ud=c>o.c?1:-1;
        this.rotate(o,c);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
    
      }
     },
    
     init:function(o){
      var id=o.ScrollerID,ary=o.ContentArray,m=o.Mode,ms=o.ScrollDuration,ud=o.Direction,hold=o.AutoHold,srt=o.AutoStart,m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','top','offsetWidth']:['top','left','offsetHeight'],p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,ms=typeof(ms)=='number'&&ms>20?ms:1000;
      if (s&&ary instanceof Array){
       p.style.overflow='hidden';
       this['zxc'+id]=o;
       o.m=m;
       o.id=id;
       o.ary=ary;
       o.sz=p[m[2]];
       s.style.position='absolute';
       s.style.zIndex='0';
       s.style[m[1]]='0px';
       s.style[m[0]]=o.sz+'px';
       s.style.width='100%';
       s.style.height=p.offsetHeight+'px';
       o.s=s;
       o.a=[s.cloneNode(false),m[0]];
       o.f=[o.a[0]];
       p.appendChild(o.a[0]);
       o.a[0].style.zIndex='2';
       o.ms=ms;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.c=o.ud==1?-1:ary.length;
       o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,a){
      o.auto=a===true;
      o.c=o.auto?o.c+o.ud:a;
      o.c=o.ary[o.c]?o.c:o.ud>0?0:o.ary.length-1;
      this.opc(o.s,20);
      o.a[0].innerHTML=o.ary[o.c];
      this.animate(o,o.f,0,100,new Date(),o.ms);
      this.animate(o,o.a,o.sz*o.ud,0,new Date(),o.ms);
      typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
     },
    
     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)){
       n=Math.max(f<0||t<0?n:0,n);
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=o.sz+'px':oop.opc(a[0],n);
       if (a[1]){
        this.opc(o.s,100);
        o.s.style[o.m[0]]='0px';
        o.s.innerHTML=o.a[0].innerHTML;
        clearTimeout(o.to);
        o.auto?oop.Auto(o.id,o.hold):null;
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSlider.init({
     ScrollerID:'tst',    // the unique ID name of the parent DIV.                        (string)
     ContentArray:[       // an arrat defining the inner HTML of each slide.              (array)
      'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
      'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
      'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
     ],
     Mode:'Vertical',     //(optional) the mode of execution., 'Vertical' or 'Horizontal' (string, default = 'Vertical')
     Direction:1,         //(optional) 1 = auto rotate forward, -1 = auto rotate back.    (number, default = 1 = forward)
     ScrollDuration:1000, //(optional) the slide duration in mill seconds.                (number, default = 1000)
     AutoHold:3000,       //(optional) the auto rotate hold duration in mill seconds.     (number, default = ScrollDuration*4)
     AutoStart:3000,      //(optional) the auto rotate start delay in mill seconds.       (number, default = no auto start)
     OnSlide:function(n){ //(optional) the function to call when the the scroller slides. (function, default = no function)
      // n = the slide number
      document.getElementById('ip').value='Slide = '+n;
     }
    });
    
    zxcFadeSlider.init({
     ScrollerID:'tst1',
     ContentArray:[
      'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
      'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
      'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
     ],
     Mode:'Horizontal',
     AutoStart:0
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-04-2013 at 02:02 PM. Reason: link to original script
    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. #3
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That is fantastic! Works better than before especially in FF! The thing is, I want it to just stop on its own, not with a toggle. Is there a way to do that?
    By the way, thanks for answering on a Sunday. I live in Germany and most people don't do anything here on a Sunday!

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    the script control function are demonstrated by the buttons
    Pause will stop auto rotation

    the OnSlide function can be used to stop on a specific slide.


    with enhanced animation
    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>
    </head>
    
    <body>
    <input type="button" value="Auto"  onmouseup="zxcFadeSlider.Auto('tst');" />
    <input type="button" value="Pause"  onmouseup="zxcFadeSlider.Pause('tst');" />
    <input type="button" value="GoTo 0"  onmouseup="zxcFadeSlider.GoTo('tst',0);" />
    <input type="button" value="GoTo 1"  onmouseup="zxcFadeSlider.GoTo('tst',1);" />
    <input type="button" value="GoTo 2"  onmouseup="zxcFadeSlider.GoTo('tst',2);" />
    <input type="button" value="Next"  onmouseup="zxcFadeSlider.Next('tst',1);" />
    <input type="button" value="Back"  onmouseup="zxcFadeSlider.Next('tst',-1);" />
    <input id="ip" />
    <br />
    <br />
    <div id="tst" style="position:relative;width:150px;height:115px;overflow:hidden;" >
     <div style="background-Color:#CCFF99;padding:5px;"></div>
    </div>
    
    <br />
    <br />
    <div id="tst1" style="position:relative;width:150px;height:115px;overflow:hidden;" onmouseover="zxcFadeSlider.Pause('tst1');" onmouseout="zxcFadeSlider.Auto('tst1');">
     <div style="background-Color:#CCFF99;padding:5px;"></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slider (04-August-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSlider={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.c+ud);
      }
     },
    
     GoTo:function(id,c){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       if (o.ary[c]&&c!=o.c){
        o.ud=c>o.c?1:-1;
        this.rotate(o,c);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
    
      }
     },
    
     init:function(o){
      var id=o.ScrollerID,ary=o.ContentArray,m=o.Mode,ms=o.ScrollDuration,ud=o.Direction,hold=o.AutoHold,srt=o.AutoStart,m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','top','offsetWidth']:['top','left','offsetHeight'],p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,ms=typeof(ms)=='number'&&ms>20?ms:1000;
      if (s&&ary instanceof Array){
       p.style.overflow='hidden';
       this['zxc'+id]=o;
       o.m=m;
       o.id=id;
       o.ary=ary;
       o.sz=p[m[2]];
       s.style.position='absolute';
       s.style.zIndex='0';
       s.style[m[1]]='0px';
       s.style[m[0]]=o.sz+'px';
       s.style.width='100%';
       s.style.height=p.offsetHeight+'px';
       o.s=s;
       o.a=[s.cloneNode(false),m[0]];
       o.f=[o.a[0]];
       p.appendChild(o.a[0]);
       o.a[0].style.zIndex='2';
       o.ms=ms;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.c=o.ud==1?-1:ary.length;
       o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,a){
      o.auto=a===true;
      o.c=o.auto?o.c+o.ud:a;
      o.c=o.ary[o.c]?o.c:o.ud>0?0:o.ary.length-1;
      this.opc(o.s,20);
      o.a[0].innerHTML=o.ary[o.c];
      this.animate(o,o.f,0,100,new Date(),o.ms);
      this.animate(o,o.a,o.sz*o.ud,0,new Date(),o.ms,Math.PI/(2*o.ms));
      typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
     },
    
    
      animate:function(o,a,f,t,srt,mS,i){
       clearTimeout(a[4]);
       var oop=this,ms=new Date()-srt,n=i?(t-f)*Math.sin(i*ms)+f:(t-f)/mS*ms+f;
      if (isFinite(n)){
       n=Math.max(f<0||t<0?n:0,n);
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
      }
      if (ms<mS){
        a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,i); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=o.sz+'px':oop.opc(a[0],n);
       if (a[1]){
        this.opc(o.s,100);
        o.s.style[o.m[0]]='0px';
        o.s.innerHTML=o.a[0].innerHTML;
        clearTimeout(o.to);
        o.auto?oop.Auto(o.id,o.hold):null;
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSlider.init({
     ScrollerID:'tst',    // the unique ID name of the parent DIV.                        (string)
     ContentArray:[       // an arrat defining the inner HTML of each slide.              (array)
      'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
      'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
      'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
     ],
     Mode:'Vertical',     //(optional) the mode of execution., 'Vertical' or 'Horizontal' (string, default = 'Vertical')
     Direction:1,         //(optional) 1 = auto rotate forward, -1 = auto rotate back.    (number, default = 1 = forward)
     ScrollDuration:1000, //(optional) the slide duration in mill seconds.                (number, default = 1000)
     AutoHold:3000,       //(optional) the auto rotate hold duration in mill seconds.     (number, default = ScrollDuration*4)
     AutoStart:3000,      //(optional) the auto rotate start delay in mill seconds.       (number, default = no auto start)
     OnSlide:function(n){ //(optional) the function to call when the the scroller slides. (function, default = no function)
      // n = the slide number
    //  document.getElementById('ip').value='Slide = '+n;
     }
    });
    
    zxcFadeSlider.init({
     ScrollerID:'tst1',
     ContentArray:[
      'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
      'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
      'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.',
      '1',
      '2',
      'The End',
     ],
     Mode:'Horizontal',
     AutoStart:0,
     OnSlide:function(n){
      if (n==5){
        zxcFadeSlider.Pause('tst1');
      }
     }
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-05-2013 at 09:36 AM. Reason: enhanced animation
    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/

  5. #5
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't know what I am doing wrong but it doesn't stop. I really like the effect of 'tst' and would hate to have to change to something less good but it has to stop. If you could give me another hint that would be great.

    Later:
    I GOT IT! As you may have guessed, it was my problem! Everything works great! It is actually a neat effect. I have an animated gif as the background that looks like water and your scroller brings up the text like it is coming out of the water. And now it stops!!! Fantastic! Thanks for your patience!
    Last edited by weiala; 08-05-2013 at 01:05 PM.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    If you are using using DIVs with a transparent background the current DIV will be overlayed over the previous DIV

    this may be better
    [URL="http://www.vicsjavascripts.org.uk/FadeSlider/FadeSlider.htm[/URL]
    Last edited by vwphillips; 08-06-2013 at 01:00 PM.
    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/

  7. #7
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You are right, that works better. It doesn't stop completely but enough. Thanks again!

Similar Threads

  1. loop, stop, and then refresh?
    By dukevn in forum JavaScript
    Replies: 12
    Last Post: 06-12-2012, 10:30 AM
  2. Fading scroller - stop the loop?
    By ktcat in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-01-2010, 02:48 AM
  3. Simple Controls Gallery - stop loop
    By limniad in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-02-2009, 11:02 PM
  4. How to stop the loop?
    By ata_gp in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-27-2008, 11:14 AM
  5. Swiss Army Slideshow -- stop loop?
    By jgold723 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-15-2007, 03:44 PM

Bookmarks

Posting Permissions

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