PDA

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



pierruel
01-12-2016, 12:55 PM
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

vwphillips
01-12-2016, 01:20 PM
setTimeout is simplest



<!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>

pierruel
01-12-2016, 05:18 PM
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

vwphillips
01-13-2016, 11:18 AM
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


<!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>

pierruel
01-18-2016, 12:10 AM
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

pierruel
01-18-2016, 04:59 PM
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

vwphillips
01-19-2016, 02:52 PM
If this is similar to your requirement

I will modify it as required


<!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>

pierruel
01-20-2016, 10:00 AM
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>):


/*
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,f p){obj.attachEvent('on'+etype,fp);};Ev.remove=document.removeEventListener?function(obj,etype,fp,cap){cap=cap||false;obj.removeEventListener(etype,fp,cap);}:fun ction(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.preven tDefault=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(){c learInterval(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(des tX,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,t his.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.def aultSlideDur;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,'mous eout',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

pierruel
01-20-2016, 11:53 AM
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

vwphillips
01-20-2016, 03:16 PM
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

AutoHold:
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

<!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>

pierruel
01-21-2016, 07:19 AM
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

pierruel
01-21-2016, 06:06 PM
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

vwphillips
01-22-2016, 02:53 PM
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


<!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>

pierruel
01-22-2016, 05:30 PM
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

pierruel
01-25-2016, 04:10 PM
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