login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div 1 t/M 5 hide/show (Opgelost)

Offline cyberninjah - 06/02/2009 00:27
Avatar van cyberninjahLid Hey

Ik probeer een soort reclame banner systeempje te maken.
Ik heb 5 divjes met inhoud die ik achter elkaar wil laten zien.

Eerst div 1
5 seconde
Div2
5 seconde
Div 3

zo tot div 5 en dan moet hij weer bij div 1 beginnen.

Ik heb de volgende code maar het wil maar niet lukken om die divjes te laten zien en te laten verdwijnen

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <script language="javascript">
  4.  
  5. this.zinnen = new Array("div1" , "div2" , "div3", "div4","div5","div6");
  6. this.obj = null;
  7. this.time = 2;
  8.  
  9. function showTekst( index , obj )
  10. {
  11.  
  12.     if( this.obj == null ) this.obj = document.getElementById(obj);
  13.  
  14.     if( index < 0 || index >= this.zinnen.length ) index = 0;
  15.  
  16.     this.obj.innerHTML = zinnen[index++];	
  17.  
  18.     setTimeout("showTekst("+index+")" , this.time*1000);
  19. }
  20.  
  22.  
  24. #div1
  25. {
  26. display:block;
  27. }
  28.  
  29. #div2
  30. {
  31. display:none;
  32. }
  33. #div3
  34. {
  35. display:none;
  36. }
  37. #div4
  38. {
  39. display:none;
  40. }
  41. #div5
  42. {
  43. display:none;
  44. }
  45. #div6
  46. {
  47. display:none;
  48. }
  50.  
  51. </head>
  53.  
  54. <div id="test"><script language="javascript">showTekst(0 , 'test');</script></div>
  55.  
  56.  
  57. <div id="div1">Tekst 1</div>
  58. <div id="div2">Tekst 2</div>
  59. <div id="div3">Tekst 3</div>
  60. <div id="div4">Tekst 4</div>
  61. <div id="div5">Tekst 5</div>
  62. <div id="div6">Tekst 6</div>
  63.  
  64. </body>
  65. </html>


Iemand enig idee hoe ik dit het beste kan oplossen ?

Alvast vriendelijk bedankt

3 antwoorden

Gesponsorde links
Offline Ibrahim - 06/02/2009 07:10 (laatste wijziging 06/02/2009 07:19)
Avatar van Ibrahim PHP expert Een paar opmerkingen/tips:

1) In CSS kun je de komma gebruiken voor het toepassen op van dezelfde eigenschappen op meerdere elementen:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #div1, #div2, #div3, #div4, #div5, #div6 { display:none; }


2) Het is (waarschijnlijk, niet geheel zeker) beter om type="text/javascript" te gebruiken in plaats van language="javascript"

3) Waarom heb je eigelijk het volgende code fragment tussen divjes gezet ?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">showTekst(0 , 'test');</script>
Het is normaal gesproken tussen de head tags:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.     <script type="text/javascript">
  3.     // je functie hier definieren bijv.
  4.     window.onload = function() {
  5.         showDiv(1);
  6.     };
  7.    </script>
  8. </head>


window.onload betekent: voer de volgende code zodra de DOM ingeladen is.

4) Je kunt het best gebruik maken van een recursieve functie:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var totalSeconds = 5;
  2. var maxDivs        = 5;
  3. function showDiv(divIterator) {
  4.  
  5.     if (divIterator > maxDivs) {
  6.         return true;
  7.     }
  8.  
  9.     if (divIterator > 1) {
  10.         document.getElementById('div' + (divIterator - 1)).style.display = 'none';
  11.     }
  12.  
  13.     document.getElementById('div' + divIterator).style.display = 'block';
  14.  
  15.     setTimeout(function() {
  16.        showDiv(divIterator+1);
  17.     }, (totalSeconds * 1000));
  18. }


Zo heb je een veel kortere en hopelijk makkelijker te begrijpen functie. Als je iets in de functie niet begrijpt, vraag het gerust, dan leg ik het stap voor stap uit 
Offline Raze - 06/02/2009 14:52
Avatar van Raze PHP beginner ik heb een scriptje gevonden waar je waarschijnlijk wel iets aan hebt (dat denk ik toch)
Je kan banners toevoegen en ze wisselen na een bepaalde tijd.
Voorbeeld: http://users.sk...wissel.htm (van deze website heb ik ook het script vandaan)

In bodytags:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <ilayer id="laagA"><layer id="laagB"><div id="laagA"><div id="laagC" >
  2. </div></div></layer></ilayer>
  3. <script type="text/javascript">
  4. var bannerArray = new Array();
  5. var mijnTeller=0;
  6. bannerArray[0] = "<a href='#'><img src='banner1.jpg' border=0 width=500 height=60></a>";
  7. bannerArray[1] = "<a href='#'><img src='banner2.jpg' border=0 width=500 height=60></a>";
  8. bannerArray[2] = "<a href='#'><img src='banner3.jpg' border=0 width=500 height=60></a>";
  9. bannerArray[3] = "<a href='#'><img src='banner4.jpg' border=0 width=500 height=60></a>";
  10. bannerArray[4] = "<a href='#'><img src='banner5.jpg' border=0 width=500 height=60></a>";
  11. bannerwissel();
  12. function bannerwissel() {
  13. if(mijnTeller>bannerArray.length-1){mijnTeller=0};
  14. if(document.all){document.all.laagC.innerHTML=bannerArray[mijnTeller]};
  15. else if (document.layers){	
  16. document.layers.laagA.document.layers.laagB.document.open();
  17. document.layers.laagA.document.layers.laagB.document.write(bannerArray[mijnTeller]);
  18. document.layers.laagA.document.layers.laagB.document.close()};
  19. setTimeout("bannerwissel()",3000); // tijd tussen wissel = aantal seconden x 1000
  20. mijnTeller++}
  21. </script>
Offline cyberninjah - 06/02/2009 19:30 (laatste wijziging 07/02/2009 01:10)
Avatar van cyberninjah Lid Thanks Ibrahim

dat stukje over de CSS wist ik wel maar gebruik het eigenlijk niet omdat ik nu tijdens het testen toevalig het zelfde code heb maar straks niet meer.

De JavaScript begrijp ik wel had er alleen nooit opgekomen om het zo te doen :d

Heb het getest en het werk goed.
Alleen hij stopt als hij bij div5 is maar hij moet dan weer bij Div1 beginnen.

En Raze ook bedankt voor het script alleen de bovenste werkt bij mij en is na mijn mening even makkelijker te gebruiken.
Maar toch bedankt voor de moeiten.


Voledige JavaScript code werkent met automatich herhalen
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var totalSeconds 	= 5;
  2. var maxDivs         = 3;
  3. function showDiv(divIterator) {
  4.  
  5.     if (divIterator > maxDivs) {
  6. 		divIterator = 1; 
  7. 	document.getElementById('div' + (maxDivs)).style.display = 'none';		
  8.     }
  9.  
  10.     if (divIterator > 1) {
  11.         document.getElementById('div' + (divIterator - 1)).style.display = 'none';
  12.     }
  13.  
  14.     document.getElementById('div' + divIterator).style.display = 'block';
  15.  
  16.     setTimeout(function() {
  17.        showDiv(divIterator+1);
  18.     }, (totalSeconds * 1000));
  19. }
  20.  
  21.  
  22. // je functie hier definieren bijv.
  23.  
  24. window.onload = function() 
  25. {
  26. showDiv(1);
  27. };
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s