Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

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

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

    Default

    Good morning Vic,
    I'm impressed by the manner you produce js code: as simply as you breathe I think.
    About your last version I must say that I can't use it because when I play, all my fingers are very busy closing or opening holes on my flute and I'm not able to press any button.
    The idea that I need to keep control upon the app is totally correct and I thought about it. I think the solution is
    1) to have a fully automatic run of the program
    2) to adjust the timings (my job) in order to have the system running rather a bit faster than necessary (the best would be of course to have it running exactly at the right speed,but it will not be possible because there is more to play on certain staves than on others)
    3) to add a footpedal control as a simple toggle: one press = pause both sliders; one second press = resume running.
    Both sliders must be pausing together because if one pauses only one of them, the other will continue too far ahead and there will be a gap between the end of the fragment I was playing and the next one.
    Would you be so kind as to modify once more your code in this direction ?
    Thing you in advance
    Pierre

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

    Default

    Good evening Vic,
    I have an additional question. Perhaps I should have opened a new thread with it, just tell me. My question is: is it possible to change dynamically the contents of a <div>. The relation with the app you're re-making for me is as follows: This app will not be used just for one musical piece. To that aim I see two ways:
    1) I duplicate the app for each new piece of music, the fragments of it I paste manually into the div's (the app weight is only about 4 Ko, it's not a problem to duplicate it a plenty of times)
    2) I have a coded mean to replace dynamically the fragments of piece A by the fragments of piece B in the corresponding div's.
    Thank you in advance but please don't modify immediately your code, I must check how it works as it is.
    Best regards
    Pierre

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

    Default

    sorry bot to get back to you
    I have not been well
    it may be a day or two until I get back

    but I have added a toggle function and the ability to change the images

    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>
      <base href="http://www.vicsjavascripts.org/StdImages/"  />
      <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);" />
    <input type="button" name="" value="Toggle Auto" onclick="zxcImageSlider.Toggle('slider');" />
    <div id="slider" class="slider" >
     <img  class="page" src="0.gif" />
     <img class="page" src="2.gif" />
     <img class="page" src="4.gif" />
    </div>
    <input type="button" name="" value="ChangeImages" onclick="zxcImageSlider.Init({ParentID:'slider',ImageArray:['6.gif','7.gif','8.gif']});" />
    <br />
    <input type="button" name="" value="Toggle Auto(Both)" onclick="zxcImageSlider.Toggle('slider');zxcImageSlider.Toggle('slider2');" />
    <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);" />
    <input type="button" name="" value="Toggle Auto" onclick="zxcImageSlider.Toggle('slider2');" />
    <div id="slider2" class="slider" >
     <img  class="page" src="1.gif" />
     <img class="page" src="3.gif" />
     <img class="page" src="5.gif" />
    </div>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageSlider={
    
     Toggle:function(id,ud){
      var o=this['zxc'+id];
      if (o){
       o.auto?this.Pause(id):this.Auto(id);
      }
     },
    
     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),a=o.ImageArray,ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,i,z0=0;
      if (p&&a instanceof Array){
       p.innerHTML='';
       for (;z0<a.length;z0++){
        i=document.createElement('IMG');
        i.src=a[z0];
        p.appendChild(i);
       }
      }
      var imgs=p?p.getElementsByTagName('IMG'):[];
      if (imgs[2]){
       var i=this['zxc'+id],w=p.offsetWidth,h=p.offsetHeight,z1=0;
       p.style.overflow='hidden';
       o.a=[];
       for (var z1=0;z1<imgs.length;z1++){
        imgs[z1].style.position='absolute';
        imgs[z1].style.zIndex='0';
        imgs[z1].style.visibility='visible';
        imgs[z1].style.left=(z1!=0?w:0)+'px';
        imgs[z1].style.top='0px';
        imgs[z1].style.width=w+'px';
        imgs[z1].style.height=h+'px';
        o.a[z1]=[imgs[z1],'left'];
       }
       o.id=id;
       o.sz=w;
       o.n=0;
       o.l=z1-1;
       o.ud=o.ud?o.ud:1;
       o.ms=typeof(ms)=='number'&&ms>0?ms:i.ms?i.ms:1000;
       o.h=typeof(h)=='number'&&hld>0?hld:i.h?i.h:o.ms*4;
       o.oc=o.OnComplete;
       this['zxc'+id]=o;
       this.Pause(id);
       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>
    Last edited by vwphillips; 01-22-2016 at 04: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/

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

    Default

    Don't worry Vic,
    I hope only you'll get better soon.
    I'm not in a hurry and, in addition, I'll be away for the week end without an access to my own computer.
    Have a good week end and a better condition.
    PIerre

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

    Default

    Click image for larger version. 

Name:	chart1..jpg 
Views:	24 
Size:	15.2 KB 
ID:	5812Good afternoon Vic,
    I hope you've got in better health condition.
    There is no hurry but I must inform you of my last thoughts regarding my double slideshow.
    I see now that I pulled you on a wrong way.
    The app I worked since last December and yourself since half a month musn't be automatic. The reason is that music lines (staves) are too different. In the piece I'm triying to use, the longest line displays 9 bars, the shorter one only 2. So the longest one will need 4.5 times more time to be played than the shortest one ! I should have thought of it sooner, I'm really sorry.
    Your last posted code is all right as far as changing the pictures is concerned, they "push" each other out of the screen instead of overlapping it.
    But as I wrote last week there may not have buttons on the screen because when I'm playing I have no free hand to press a button, except when I stop playing (of course). The only usable button corresponds to the case that we (my piano partner and I) stopped playing and we decide to re-play from a certain place. In that case I need only one "back" button which brings me back one picture before at a time.
    On the other hand as the scroller isn't automatic and the lines are very different in lenght (= duration) I need to make the music progress (by pressing a pedal) one picture at a time but alternatively in "slider" and in "slider2".
    I attach a small chart to make (I hope) things more clear).
    As far as playing another musical piece (i.e. changing the images) is concerned, I don't understand how you manage it to work.
    Let's say I own only two pieces of sheetmusic, the Prokofiev "Flute Sonata opus 94" and Mozart's "Andante for the flute". The first piece is contained in 16 pictures, the second in 8 pictures. On my computer I will put the 16 Prokofiev picture in one file named for instance "Img_Prokof" and the Mozart pictures in a "Img_Moz_Andante" file.
    As I wrote last week, it is very simple to duplicate the HTML file and to replace one musical piece by the other. I can do it by myself very easily and I would like to do so with my (probably) 80 or 100 pieces of flute music. I think that a javascript extension would be far too much complicated for such a simple problem. And I would be probably unable to modify correctly the javascript code, as you know.
    Keep recovering and don't worry about that, I can wait.
    Best regards
    Pierre

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
  •