Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: How to delay (postpone ?) the start of a script (sorry for my English)

  1. #1
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default How to delay (postpone ?) the start of a script (sorry for my English)

    Good afternoon,
    I have on my page 2 div's with different contents and 1 script (.js) manipulating the contents of both div's. I want the manipulation in the second div starts exactly 15 seconds after it started in the first div. How can I achieve this ? I've found nothing in various FAQ's.
    Thanl you for any help.
    Friendly regards
    Pierre

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

    Default

    setTimeout is simplest


    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>
    <div id="div1" ></div>
    <div id="div2" ></div>
    <input type="button" name="" value="Test" onclick="Test(15*1000);"  />
    <script type="text/javascript">
    
    function Test(ms){
     document.getElementById('div1').innerHTML='DIV 1';
     clearTimeout(Test.to); // the timeout is assigned to the property of function Test.to to allow it to be cancelled
     Test.to=setTimeout(function(){ document.getElementById('div2').innerHTML='DIV 2'; },ms);
    }
    
    </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. The Following User Says Thank You to vwphillips For This Useful Post:

    pierruel (01-12-2016)

  4. #3
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Good evening Vic,
    Thank you for your piece of code, which is simplest indeed ans works perfectly, but in the conditions of using my "bidouille" I'm not able to click on any button. The insertion of a delay should be automatic. May I just insert the function Test(15*1000) into the <body> tag ?
    In addition I don't want my coding to display "DIV 1" and then "DIV 2" but to run sort of a scrolling slideshow on the screen. In don't see where I should insert the normal contents of my actual DIV's 1 and 2.
    Thank you in advance.
    (Please don't forget I'm a dummy on js !)
    Best regards
    Pierre
    Last edited by pierruel; 01-12-2016 at 06:06 PM.

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

    Default

    the function can be called just before the </BODY> tag
    or <body onload="Test(15*1000);">

    if you can supply more detail on the scrolling slideshow I should be able with that

    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>
    <!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>
    <div id="div1" ></div>
    <div id="div2" ></div>
    
    <script type="text/javascript">
    
    function Test(ms){
     document.getElementById('div1').innerHTML='DIV 1';
     clearTimeout(Test.to); // the timeout is assigned to the property of function Test.to to allow it to be cancelled
     Test.to=setTimeout(function(){ document.getElementById('div2').innerHTML='DIV 2'; },ms);
    }
    
    Test(15*1000);
    
    </script>
    
    </body>
    
    </html>
    </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/

  6. #5
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Thank you Vic,
    I wasn't able to visit this thread for some time.I'll study your last code and see how I can supply you more details.
    Grateful for helping me
    Pierre

  7. #6
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Good evening Vic,
    You're right, you can't figure what I'm looking for without a more accurate description. It's a bit complicated.
    I've found on the web a scrolling slideshow and I adapted it to my needs as well as possible without a real knowledge of Javascript.
    1. The pictures in my slidechow are actually scans of fragments of a sheet music.
    2. I have transformed the original slideshow to a double one, with one series of pictures in the above half of the screen and another series in the below half.
    3. For now, it works rather well, except that the above and below pictures change (scroll) simultaneously and it doesn't help me.
    4. My aim is to have a screen displaying in the above half the #1 fragment of a musical piece and the #2 fragment in the lower half, but the trick is that when I have played the #1 fragment, the #2 must still be displayed in the lower half in order to enable me to continue playing, and while I'm playing what appears in the lower half, the above contents must be replaced by #3 fragment. And so on: when I finish playing the # 2 fragment below, I continue with the #3 above and at that time the below half contents must change in order to display fragment #4. For that reason I want to know how the lower slideshow can begin running later as the above one.
    In addition, I manage to have my notes enlarged in comparison with the printed sheetmusic. Perhaps you'll say that there are such softwares on the web or that I can enlarge my notes on paper. In fact the only fitting software costs about 4000 $; on the other hand if I enlarge my sheetmusic I have to turn pages twice as often as in the original size and often at impossible places since I need my two hands when I'm playing. That's why I try to make my own computerized solution.
    Hoping that these details arn't going to discourage you !
    Thank you for your attention.
    Pierre

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

    Default

    If this is similar to your requirement

    I will modify it as required

    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">
      /*<![CDATA[*/
    
      #slider {
        position:absolute;left:50px;top:50px;width:700px;height:200px;border:solid red 1px;
      }
    
      #slider2 {
        position:absolute;left:50px;top:350px;width:700px;height:200px;border:solid red 1px;
      }
    
      .page {
        position:absolute;left:0px;top:0px;width:700px;height:200px;border:solid red 1px;
      }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
    <div id="slider" class="slider" >
     <img  class="page" src="http://www.vicsjavascripts.org/StdImages/0.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/2.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/4.gif" />
    </div>
    
    <div id="slider2" class="slider" >
     <img  class="page" src="http://www.vicsjavascripts.org/StdImages/1.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/3.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/5.gif" />
    </div>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageSlider={
    
     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.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id],ms;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,o.n+o.ud,true); },typeof(ms)=='number'&&ms>=0?ms:200);
      }
     },
    
     Pause:function(o){
      var oop=this;
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     Init:function(o){
      var id=o.ParentID,p=document.getElementById(id),ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,imgs=p?p.getElementsByTagName('IMG'):[];
      if (imgs[2]){
       var w=p.offsetWidth,h=p.offsetHeight,z0=0;
       p.style.overflow='hidden';
       o.a=[];
       for (var z0=0;z0<imgs.length;z0++){
        imgs[z0].style.position='absolute';
        imgs[z0].style.zIndex='0';
        imgs[z0].style.visibility='visible';
        imgs[z0].style.left=(z0!=0?w:0)+'px';
        imgs[z0].style.top='0px';
        imgs[z0].style.width=w+'px';
        imgs[z0].style.height=h+'px';
        o.a[z0]=[imgs[z0],'left'];
       }
       o.id=id;
       o.sz=w;
       o.n=0;
       o.l=z0-1;
       o.ud=1;
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.h=typeof(h)=='number'&&hld>0?hld:o.ms*4;
       o.oc=o.OnComplete;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,n,a){
      this.Pause(o);
      o.a[o.n][0].style.zIndex='0';
      o.auto=a===true;
      n=n<0?o.l:n>o.l?0:n;
      o.a[n][0].style.zIndex='1';
      o.a[n][0].style.visibility='visible';
      o.a[n][0].style.left=o.sz*o.ud+'px';
      this.animate(o,o.a[n],o.sz,0,new Date(),o.ms);
      o.n=n;
     },
    
     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[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       for (var z0=0;z0<=o.l;z0++){
        o.a[z0][0].style.visibility=o.n!=z0?'hidden':'visible';
       }
       o.auto?oop.Auto(o.id,o.h):null;
       typeof(o.oc)=='function'?o.oc():null;
      }
     }
    
    }
    
    zxcImageSlider.Init({
     ParentID:'slider', // the unique ID of the parent DIV. (string)
     Animate:1000,      //(optional) the slide duration in mill-sec.          (number, default)
    // AutoHold:4000,     //(optional) the auto rotate delay in mill-sec.       (number, animate*4)
    // AuoStart:2000      //(optional) the auto rotate start delay in mill-sec. (number, no auto start)
     OnComplete:function(){
       setTimeout(function(){ zxcImageSlider.Next('slider2',1); },10*100);
     }
    });
    
    zxcImageSlider.Init({
     ParentID:'slider2',
     Animate:1000,
     OnComplete:function(){
      setTimeout(function(){ zxcImageSlider.Next('slider',1); },10*100);
     }
    });
    
    zxcImageSlider.Next('slider',1);
    /*]]>*/
    </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/

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    pierruel (01-19-2016)

  10. #8
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Good morning Vic,
    My English is probably even more bad than I thought. I wrote that "For now, it (my small App) works rather well, except that the above and below pictures change (scroll) simultaneously and it doesn't help me."
    I asked only a small correction in order to have my pictures change one at a time and not at the same time, but you have re-made the whole thing from scratch. It makes me feel very unconfortable thinking of the amount of time you spent on it. As a proof, I attach the .js file containing one of two scripts I found on the web and adapted to my needs (by making a second .js for the second <div>):
    Code:
    /* 
        Pausing Scroller from Dynamic Web Coding at dyn-web.com
        Copyright 2001-2013 by Sharon Paine
        For demos, documentation and updates, visit http://www.dyn-web.com/code/scrollers/
    
        This program is free software: you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version.
    
        This program is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
        GNU General Public License for more details.
    
        You should have received a copy of the GNU General Public License
        along with this program. If not, see http://www.gnu.org/licenses
    */
    
    // DYN_WEB is namespace used for code from dyn-web.com
    // replacing previous use of dw_ prefix for object names
    var DYN_WEB = DYN_WEB || {};
    
    /*
        dw_event.js - basic event handling file from dyn-web.com
        version date May 2013 (added .domReady)
        .domReady uses whenReady fn from JavaScript the Definitive Guide
        6th edition by David Flanagan, example 17.01
    */
    
    DYN_WEB.Event=(function(Ev){Ev.add=document.addEventListener?function(obj,etype,fp,cap){cap=cap||false;obj.addEventListener(etype,fp,cap);}:function(obj,etype,fp){obj.attachEvent('on'+etype,fp);};Ev.remove=document.removeEventListener?function(obj,etype,fp,cap){cap=cap||false;obj.removeEventListener(etype,fp,cap);}:function(obj,etype,fp){obj.detachEvent('on'+etype,fp);};Ev.DOMit=function(e){e=e?e:window.event;if(!e.target){e.target=e.srcElement;}if(!e.preventDefault){e.preventDefault=function(){e.returnValue=false;return false;};}if(!e.stopPropagation){e.stopPropagation=function(){e.cancelBubble=true;};}return e;};Ev.getTarget=function(e){e=Ev.DOMit(e);var tgt=e.target;if(tgt.nodeType!==1){tgt=tgt.parentNode;}return tgt;};Ev.domReady=(function(){var funcs=[];var ready=false;function handler(e){if(ready){return;}if(e.type==="readystatechange"&&document.readyState!=="complete"){return;}for(var i=0,len=funcs.length;i<len;i++){funcs[i].call(document);}ready=true;funcs=[];}if(document.addEventListener){document.addEventListener("DOMContentLoaded",handler,false);document.addEventListener("readystatechange",handler,false);window.addEventListener("load",handler,false);}else if(document.attachEvent){document.attachEvent("onreadystatechange",handler);window.attachEvent("onload",handler);}return function whenReady(f){if(ready){f.call(document);}else{funcs.push(f);}};})();return Ev;})(DYN_WEB.Event||{});
    
    DYN_WEB.Util=(function(Ut){var Ev=DYN_WEB.Event;Ut.$=function(id){return document.getElementById(id);};Ut.augment=function(Obj1,Obj2){var prop;for(prop in Obj2){if(Obj2.hasOwnProperty(prop)&&!Obj1[prop]){Obj1[prop]=Obj2[prop];}}};Ut.contained=function(oNode,oCont){if(!oNode){return false;}while((oNode=oNode.parentNode)){if(oNode===oCont){return true;}}return false;};Ut.mouseleave=function(e,oNode){e=Ev.DOMit(e);var toEl=e.relatedTarget?e.relatedTarget:e.toElement?e.toElement:null;if(oNode!==toEl&&!Ut.contained(toEl,oNode)){return true;}return false;};Ut.getLayerOffsets=function(el,oCont){var left=0,top=0;if(Ut.contained(el,oCont)){do{left+=el.offsetLeft;top+=el.offsetTop;}while(((el=el.offsetParent)!==oCont));}return{x:left,y:top};};return Ut;})(DYN_WEB.Util||{});
    
    DYN_WEB.Scroll_Div=(function(){var Ut=DYN_WEB.Util;function SDiv(wnId,lyrId){this.id=wnId;SDiv.col[this.id]=this;SDiv.ids[SDiv.ids.length]=this.id;this.load(lyrId);}SDiv.col={};SDiv.ids=[];SDiv.isSupported=function(){return!!(document.getElementById&&(document.addEventListener||document.attachEvent));};SDiv.prototype={load:function(lyrId){var lyr;if(this.lyrId){lyr=Ut.$(this.lyrId);lyr.style.visibility="hidden";}this.lyr=lyr=Ut.$(lyrId);this.lyr.style.position='absolute';this.lyrId=lyrId;this.y=0;this.x=0;this.shiftTo(0,0);this.getDims();lyr.style.visibility="visible";this.ready=true;this.on_load();},shiftTo:function(x,y){if(this.lyr&&!isNaN(x)&&!isNaN(y)){this.x=x;this.y=y;this.lyr.style.left=Math.round(x)+"px";this.lyr.style.top=Math.round(y)+"px";}},getDims:function(){var wndo=Ut.$(this.id);var lyr=Ut.$(this.lyrId);this.lyrWd=lyr.offsetWidth;this.lyrHt=lyr.offsetHeight;this.wnWd=wndo.offsetWidth;this.wnHt=wndo.offsetHeight;var w=this.lyrWd-this.wnWd;var h=this.lyrHt-this.wnHt;this.maxX=(w>0)?w:0;this.maxY=(h>0)?h:0;},on_load:function(){},on_scroll:function(){},on_scroll_start:function(){},on_scroll_stop:function(){},on_scroll_end:function(){},clearTimer:function(){clearInterval(this.timerId);this.timerId=0;}};return SDiv;})();
    
    (function(){var Ut=DYN_WEB.Util,SDiv=DYN_WEB.Scroll_Div;SDiv.defaultSlideDur=500;var Glide_Scroll={initScrollByVals:function(dx,dy,dur){if(!this.ready||this.sliding){return;}this.startX=this.x;this.startY=this.y;this.destX=this.destY=this.distX=this.distY=0;if(dy<0){this.distY=(this.startY+dy>=-this.maxY)?dy:-(this.startY+this.maxY);}else if(dy>0){this.distY=(this.startY+dy<=0)?dy:-this.startY;}if(dx<0){this.distX=(this.startX+dx>=-this.maxX)?dx:-(this.startX+this.maxX);}else if(dx>0){this.distX=(this.startX+dx<=0)?dx:-this.startX;}this.destX=this.startX+this.distX;this.destY=this.startY+this.distY;this.glideScrollPrep(this.destX,this.destY,dur);},initScrollToVals:function(destX,destY,dur){if(!this.ready||this.sliding){return;}this.startX=this.x;this.startY=this.y;this.destX=-Math.max(Math.min(destX,this.maxX),0);this.destY=-Math.max(Math.min(destY,this.maxY),0);this.distY=this.destY-this.startY;this.distX=this.destX-this.startX;if(dur===0){this.on_scroll_start(this.startX,this.startY);this._jumpTo(this.destX,this.destY);}else{this.glideScrollPrep(this.destX,this.destY,dur);}},_jumpTo:function(x,y){this.shiftTo(x,y);this.on_scroll(x,y);},glideScrollPrep:function(destX,destY,dur){this.slideDur=(typeof dur==='number')?dur:SDiv.defaultSlideDur;this.per=Math.PI/(2*this.slideDur);this.sliding=true;this.lyr=Ut.$(this.lyrId);this.startTime=new Date().getTime();var self=this;self.timerId=setInterval(function(){self.doGlideScroll();},10);this.on_scroll_start(this.startX,this.startY);},doGlideScroll:function(){var elapsed=new Date().getTime()-this.startTime;if(elapsed<this.slideDur){var x=this.startX+(this.distX*Math.sin(this.per*elapsed));var y=this.startY+(this.distY*Math.sin(this.per*elapsed));this.shiftTo(x,y);this.on_scroll(x,y);}else{this.clearTimer();this.sliding=false;this.shiftTo(this.destX,this.destY);this.on_scroll(this.destX,this.destY);this.on_scroll_stop(this.destX,this.destY);if(this.distX&&(this.destX===0||this.destX===-this.maxX)||this.distY&&(this.destY===0||this.destY===-this.maxY)){this.on_scroll_end(this.destX,this.destY);}}}};Ut.augment(SDiv.prototype,Glide_Scroll);})();
    
    (function(){var Ev=DYN_WEB.Event,Ut=DYN_WEB.Util,SDiv=DYN_WEB.Scroll_Div;var Pause_Auto_Scroll={makePauseAuto:function(opts){var axis=opts.axis||'h',wn=Ut.$(this.id),self=this;if(axis==='v'){this.dy=opts.distance;this.dx=0;}else{this.dx=opts.distance;this.dy=0;}this.dur=opts.dur||SDiv.defaultSlideDur;this.startDelay=opts.startDelay||500;this.pauseDelay=opts.pauseDelay||3000;this.resumeDelay=opts.resumeDelay||300;if(opts.bRepeat&&opts.repeatId){var pos=Ut.getLayerOffsets(Ut.$(opts.repeatId),Ut.$(this.id));if(pos.x||pos.y){this.on_scroll=function(){var backToStart;if(axis==='v'&&Math.round(this.y)<=-pos.y){backToStart=true;}else if(axis==='h'&&Math.round(this.x)<=-pos.x){backToStart=true;}if(backToStart){this.shiftTo(0,0);}};}}if(opts.bPauseResume){Ev.add(wn,'mouseover',function(){self.pauseAutoScroll();});Ev.add(wn,'mouseout',function(e){self.checkMouseout(e,self.id);});}self.pTimer=setTimeout(function(){self.doAutoScroll();},self.startDelay);},doAutoScroll:function(){var self=this;this.clearPauseTimer();this.initScrollByVals(-this.dx,-this.dy,this.dur);self.pTimer=setTimeout(function(){self.doAutoScroll();},self.pauseDelay);},pauseAutoScroll:function(){this.clearPauseTimer();},clearPauseTimer:function(){clearTimeout(this.pTimer);this.pTimer=null;},checkMouseout:function(e,wnId){var self=SDiv.col[wnId];if(Ut.mouseleave(e,Ut.$(wnId))){self.pTimer=setTimeout(function(){self.doAutoScroll();},self.resumeDelay);}}};Ut.augment(SDiv.prototype,Pause_Auto_Scroll);})();
    Wasn't it more simple to add a couple of lines to existing code ?
    Thank you anyhow Vic .
    Have a fine day.
    Pierre

  11. #9
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Good morning again Vic,
    I tried to adjust your code to my needs.
    First question: why do your code run very well in my HTML editor (Webexpert 6) and not at all in Mozilla Firefox (my project is an offline html app) ?
    I replaced your .gif by my musical fragments .jpg and it still runs in Webexpert but not in Firefox.
    Each new picture should't hide the preceding one but the preceding one should slide out of the screen (to the left) and the new one follow it immediately (so does the .js file I sent you this morning).
    The speed of the slide movement is too fast (I was able to slow it down by myself by changing one ms parameter).
    Each picture must stay on the screen 15 seconds in order to enable me to play it before it slides out of sight. In addition I need to know which parameter changes the duration of each picture because each piece of music gets its own tempo = playing speed (in that case I wasn't able to find which parameter had to be modified).
    I thank you very much again and I'm sorry that you have so much to work with my project.
    Best regards
    Pierre

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

    Default

    Each picture must stay on the screen 15 seconds in order to enable me to play it before it slides out of sight. In addition I need to know which parameter changes the duration
    use
    Code:
     AutoHold:
    Code:
    15*1000
    , //(optional) the auto rotate delay in mill-sec. (number, animate*4)
    each slider can be controlled separately with different slide and hold durations

    I an not sure how you wish the two sliders to interact


    modified code with in/out rather than overlay
    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">
      /*<![CDATA[*/
    
      #slider {
        position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
      }
    
      #slider2 {
        position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
      }
    
      .page {
        position:absolute;left:0px;top:0px;width:700px;height:200px;border:solid red 1px;
      }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
    
    <input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider',1);" />
    <input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider',-1);" />
    <input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider');" />
    <input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider');" />
    <input type="button" name="" value="GoTo 0" onclick="zxcImageSlider.GoTo('slider',0);" />
    <input type="button" name="" value="GoTo 2" onclick="zxcImageSlider.GoTo('slider',1);" />
    <input type="button" name="" value="GoTo 4" onclick="zxcImageSlider.GoTo('slider',2);" />
    <div id="slider" class="slider" >
     <img  class="page" src="http://www.vicsjavascripts.org/StdImages/0.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/2.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/4.gif" />
    </div>
    <br />
    <br />
    <input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider2',1);" />
    <input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider2',-1);" />
    <input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider2');" />
    <input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider2');" />
    <input type="button" name="" value="GoTo 1" onclick="zxcImageSlider.GoTo('slider2',0);" />
    <input type="button" name="" value="GoTo 3" onclick="zxcImageSlider.GoTo('slider2',1);" />
    <input type="button" name="" value="GoTo 5" onclick="zxcImageSlider.GoTo('slider2',2);" />
    <div id="slider2" class="slider" >
     <img  class="page" src="http://www.vicsjavascripts.org/StdImages/1.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/3.gif" />
     <img class="page" src="http://www.vicsjavascripts.org/StdImages/5.gif" />
    </div>
    
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageSlider={
    
     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.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.a[n]&&o.n!=n){
        o.ud=n<o.n?-1:1;
        this.rotate(o,n);
       }
      }
     },
    
    Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id],ms;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,o.n+o.ud,true);  },typeof(ms)=='number'&&ms>=0?ms:200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     Init:function(o){
      var id=o.ParentID,p=document.getElementById(id),ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,imgs=p?p.getElementsByTagName('IMG'):[];
      if (imgs[2]){
       var w=p.offsetWidth,h=p.offsetHeight,z0=0;
       p.style.overflow='hidden';
       o.a=[];
       for (var z0=0;z0<imgs.length;z0++){
        imgs[z0].style.position='absolute';
        imgs[z0].style.zIndex='0';
        imgs[z0].style.visibility='visible';
        imgs[z0].style.left=(z0!=0?w:0)+'px';
        imgs[z0].style.top='0px';
        imgs[z0].style.width=w+'px';
        imgs[z0].style.height=h+'px';
        o.a[z0]=[imgs[z0],'left'];
       }
       o.id=id;
       o.sz=w;
       o.n=0;
       o.l=z0-1;
       o.ud=1;
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.h=typeof(h)=='number'&&hld>0?hld:o.ms*4;
       o.oc=o.OnComplete;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,n,a){
      this.Pause(o.id);
      o.auto=a===true;
      n=n<0?o.l:n>o.l?0:n;
      o.a[n][0].style.left=o.sz*o.ud+'px';
      this.animate(o,o.a[o.n],0,-o.sz*o.ud,new Date(),o.ms);
      this.animate(o,o.a[n],o.sz*o.ud,0,new Date(),o.ms,true);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       x&&o.auto?oop.Auto(o.id,o.h):null;
       typeof(o.oc)=='function'?o.oc():null;
      }
     }
    
    }
    
    zxcImageSlider.Init({
     ParentID:'slider', // the unique ID of the parent DIV. (string)
     Animate:1000,      //(optional) the slide duration in mill-sec.          (number, default)
     AutoHold:2*1000,     //(optional) the auto rotate delay in mill-sec.       (number, animate*4)
    // AuoStart:2000,      //(optional) the auto rotate start delay in mill-sec. (number, no auto start)
     OnComplete:function(){
    //   setTimeout(function(){ zxcImageSlider.Next('slider2',1); },10*100);
     }
    });
    
    zxcImageSlider.Init({
     ParentID:'slider2',
     Animate:1000,
     AutoHold:15*1000,
    // AuoStart:2000,
     OnComplete:function(){
    //  setTimeout(function(){ zxcImageSlider.Next('slider',1); },10*100);
     }
    });
    
    //zxcImageSlider.Next('slider',1);
    /*]]>*/
    </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/

  13. The Following User Says Thank You to vwphillips For This Useful Post:

    pierruel (01-21-2016)

Similar Threads

  1. How to delay the start of the slideshow
    By undone in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-27-2010, 11:30 PM
  2. Delay start of C Motion Gallery script?
    By procyan in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 12-18-2008, 06:14 PM
  3. Replies: 2
    Last Post: 09-06-2008, 03:04 AM
  4. Script: Ultimate Fade-in slideshow (v1.5) - how to delay start?
    By jcalcara in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-02-2006, 04:48 PM
  5. Slideshow start delay
    By jamie smith in forum JavaScript
    Replies: 3
    Last Post: 04-06-2005, 09:41 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
  •