login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Achtergrond fade script probleem

Offline Viktor92 - 09/08/2009 11:29 (laatste wijziging 09/08/2009 11:31)
Avatar van Viktor92Nieuw lid Hallo allen,

ik ben nog niet zo lang geleden begonnen met het leren van Javascript. Ik ben nu bezig met mijn eerste echte script, namelijk een script om at random een aantal foto's in te laten faden op de achtergrond. Na 15 seconden moeten ze weer uitfaden en komen op andere plekken weer andere foto's. Het gaat alleen faliekant mis wanneer er moet worden uitgefade. Er wordt nu nog maar één plaatje gebruikt om het te testen, maar daar zit het probleem niet.
Hieronder staat de code. Ik heb met commentaar aangegeven waar het volgens mij mis gaat. En alvast mij excuus voor de soms wat rare namen van variabelen en functies en het misschien wat omslachtig gescript.  

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. images = new Array();
  2. fadedivs = new Array();
  3. fading = false;
  4. xOpacity=0;
  5. xFade=1;
  6.  
  7.  
  8. function prep() {
  9. 	sWidth=screen.width;
  10. 	sHeight=screen.height;
  11. 	dAmounthor=5;
  12. 	dWidth=(sWidth/dAmounthor);
  13. 	dHeight=(dWidth/(4/3));
  14. 	dAmountver=Math.floor(sHeight/dHeight);
  15. 	var i=1;
  16. 	var m=0;
  17. 	var n=0;
  18. 	for (i=1;i<=(dAmountver*dAmounthor);i++) {
  19. 		div = document.createElement("div");
  20. 		div.setAttribute("id",i);
  21. 		style = "width:" + dWidth + "px;height:" + dHeight + "px;position: fixed;margin-left:" + (dWidth*n) + "px;margin-top:" + (dHeight*m) + "px;"
  22. 		div.setAttribute("style",style);
  23. 		img = document.createElement("img");
  24. 		img.setAttribute("src",""); 
  25. 		img.setAttribute("style","height:"+dHeight+"px;width:"+dWidth+"px;border: 0px solid black;");
  26. 		div.appendChild(img);
  27. 		document.getElementById("00").appendChild(div);
  28. 		if (m==(dAmountver)) {
  29. 			n++;
  30. 			m = 0;
  31. 		}
  32. 		else {
  33. 			m++;
  34. 		}
  35. 	}
  36. 	images = document.getElementById("00").getElementsByTagName("img");
  37. 	setTimeout(fadex,50);
  38. }
  39.  
  40. function fadex() {
  41. 	if (fading==false) {
  42. 		var i=0;
  43. 		xFade=0;
  44. 		for (i=0;i<=3;i++) {
  45. 			fadedivs[i] = Math.floor(Math.random()*((dAmountver*dAmounthor)+1));
  46. 			images[fadedivs[i]].xOpacity = 0;
  47. 			xOpacity = 0;
  48. 			images[fadedivs[i]].src = "back.png";
  49. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;
  50. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  51. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  52. 			fading = true;
  53. 		}
  54. 	}
  55.  
  56. 	if (fading==true && xOpacity<1 && xFade==0) {
  57. 		var i=0;
  58. 		xOpacity=xOpacity+0.1;
  59. 		for (i=0;i<=3;i++) {
  60. 			images[fadedivs[i]].xOpacity = images[fadedivs[i]].xOpacity+0.1;
  61. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;
  62. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  63. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  64. 		}
  65. 		if (xOpacity==0.9999999999999999) {
  66. 			xFade=1;
  67. 			// Hier gaat het fout, er wordt niet 10 seconden gewacht voordat verder wordt gegaan. Ik heb gecheckt of het script ook daadwerkelijk in deze lus terecht komt, en dat is zo.
  68. 			setTimeout(fadex,10000);
  69. 		}
  70. 		else
  71. 		{
  72. 		setTimeout(fadex,50);
  73. 		}
  74. 	}
  75.  
  76. 	if (fading==true && xOpacity>0 && xFade==1) {
  77. 		var i=0;
  78. 		xOpacity=xOpacity-0.1;
  79. 		for (i=0;i<=3;i++) {
  80. 			images[fadedivs[i]].xOpacity = images[fadedivs[i]].xOpacity-0.1;
  81. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;	
  82. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  83. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  84. 		}
  85. 		if (xOpacity<=0) {
  86. 			fading=false;
  87. 			setTimeout(fadex,50);
  88. 		}
  89. 		else
  90. 		{
  91. 		setTimeout(fadex,50);
  92. 		}
  93. 	}
  94. }

De andere setTimeout()'s in het script werken wel, dus ik snap het niet. Mocht iemand het willen testen, dan kan het alleen in firefox; in IE werkt het nog niet goed. Als iemand mij zou kunnen helpen, zou dat erg fijn zijn!

Groeten,
Viktor

2 antwoorden

Gesponsorde links
Offline Koen - 09/08/2009 11:33
Avatar van Koen PHP expert Bij settimeout moet je de functie tussen aanhalingstekens zetten 

setTimeout("fadex()",10000);
Offline Viktor92 - 09/08/2009 11:43 (laatste wijziging 09/08/2009 11:43)
Avatar van Viktor92 Nieuw lid
Koen schreef:
Bij settimeout moet je de functie tussen aanhalingstekens zetten 

setTimeout("fadex()",10000);


Bedankt voor de snelle reply , maar het werkt toch nog steeds niet na het te hebben aangepast  

Ik heb nu dit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. images = new Array();
  2. fadedivs = new Array();
  3. fading = false;
  4. xOpacity=0;
  5. xFade=1;
  6.  
  7.  
  8. function prep() {
  9. 	sWidth=screen.width;
  10. 	sHeight=screen.height;
  11. 	dAmounthor=5;
  12. 	dWidth=(sWidth/dAmounthor);
  13. 	dHeight=(dWidth/(4/3));
  14. 	dAmountver=Math.floor(sHeight/dHeight);
  15. 	var i=1;
  16. 	var m=0;
  17. 	var n=0;
  18. 	for (i=1;i<=(dAmountver*dAmounthor);i++) {
  19. 		div = document.createElement("div");
  20. 		div.setAttribute("id",i);
  21. 		style = "width:" + dWidth + "px;height:" + dHeight + "px;position: fixed;margin-left:" + (dWidth*n) + "px;margin-top:" + (dHeight*m) + "px;"
  22. 		div.setAttribute("style",style);
  23. 		img = document.createElement("img");
  24. 		img.setAttribute("src",""); 
  25. 		img.setAttribute("style","height:"+dHeight+"px;width:"+dWidth+"px;border: 0px solid black;");
  26. 		div.appendChild(img);
  27. 		document.getElementById("00").appendChild(div);
  28. 		if (m==(dAmountver)) {
  29. 			n++;
  30. 			m = 0;
  31. 		}
  32. 		else {
  33. 			m++;
  34. 		}
  35. 	}
  36. 	images = document.getElementById("00").getElementsByTagName("img");
  37. 	setTimeout("fadex()",50);
  38. }
  39.  
  40. function fadex() {
  41. 	if (fading==false) {
  42. 		var i=0;
  43. 		xFade=0;
  44. 		for (i=0;i<=3;i++) {
  45. 			fadedivs[i] = Math.floor(Math.random()*((dAmountver*dAmounthor)+1));
  46. 			images[fadedivs[i]].xOpacity = 0;
  47. 			xOpacity = 0;
  48. 			images[fadedivs[i]].src = "back.png";
  49. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;
  50. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  51. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  52. 			fading = true;
  53. 		}
  54. 	}
  55.  
  56. 	if (fading==true && xOpacity<1 && xFade==0) {
  57. 		var i=0;
  58. 		xOpacity=xOpacity+0.1;
  59. 		for (i=0;i<=3;i++) {
  60. 			images[fadedivs[i]].xOpacity = images[fadedivs[i]].xOpacity+0.1;
  61. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;
  62. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  63. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  64. 		}
  65. 		if (xOpacity==0.9999999999999999) {
  66. 			xFade=1;
  67. 			// Hier gaat het fout, er wordt niet 10 seconden gewacht voordat verder wordt gegaan. Ik heb gecheckt of het script ook daadwerkelijk in deze lus terecht komt, en dat is zo.
  68. 			setTimeout("fadex()",10000);
  69. 		}
  70. 		else
  71. 		{
  72. 		setTimeout("fadex()",50);
  73. 		}
  74. 	}
  75.  
  76. 	if (fading==true && xOpacity>0 && xFade==1) {
  77. 		var i=0;
  78. 		xOpacity=xOpacity-0.1;
  79. 		for (i=0;i<=3;i++) {
  80. 			images[fadedivs[i]].xOpacity = images[fadedivs[i]].xOpacity-0.1;
  81. 			images[fadedivs[i]].style.opacity = images[fadedivs[i]].xOpacity;	
  82. 			images[fadedivs[i]].style.MozOpacity = images[fadedivs[i]].xOpacity;
  83. 			images[fadedivs[i]].style.filter = "alpha(opacity=" + (images[fadedivs[i]].xOpacity*100) + ")";
  84. 		}
  85. 		if (xOpacity<=0) {
  86. 			fading=false;
  87. 			setTimeout("fadex()",50);
  88. 		}
  89. 		else
  90. 		{
  91. 		setTimeout("fadex()",50);
  92. 		}
  93. 	}
  94. }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.206s