[réglé] afficher/cacher un div toutes les secondes.

afficher/cacher un div toutes les secondes. [réglé] - HTML/CSS - Programmation

Marsh Posté le 03-01-2007 à 17:04:30    

Bonjour, j'ai 2 div:
 

Code :
  1. <div id="Layer1"></div>
  2. <div id="Layer2"></div>


 
Je souhaite toutes les x secondes, (par exemple 3), afficher Layer1 (cacher Layer2), puis afficher Layer2 (et cacher Layer1).
 
Comment pourrais-je faire ?  
 
J'ai un script qui permet de faire ce changement quand je passe dessus ou en dehors d'un lien. Comment l'adapter pour qu'il automatiquement, sans intervention de ma part ?
 
 
 
 

Code :
  1. <script type="text/JavaScript">
  2. <!--
  3. function MM_findObj(n, d) { //v4.01
  4.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
  5.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  6.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  7.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  8.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  9. }
  11. function MM_showHideLayers() { //v6.0
  12.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  13.   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  14.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  15.     obj.visibility=v; }
  16. }
  17. //-->
  18. </script>


 
 
 

Code :
  1. <a href="#" onmouseover="MM_showHideLayers('Layer1','','show','Layer2','','hide')" onmouseout="MM_showHideLayers('Layer1','','hide','Layer2','','show')">jljlkjll</a>


Message édité par Niko80 le 06-01-2007 à 12:32:29
Reply

Marsh Posté le 03-01-2007 à 17:04:30   

Reply

Marsh Posté le 03-01-2007 à 17:37:56    

la fonction js que tu cherches c'est setInterval !
et dreamweaver ça pue :o

Reply

Marsh Posté le 03-01-2007 à 19:22:20    

heu merci mais je ne connais rien à JS :/
 
un petit un exemple ?

Reply

Marsh Posté le 03-01-2007 à 21:52:02    

un truc du genre :
 

Code :
  1. var etat_altern = 0;
  3. function altern(){
  4. if(etat_altern==0){
  5. etat_altern = 1;
  6. Layer1.style.visibility = 'hidden';
  7. Layer2.style.visibility = 'visible';
  8. }
  9. else{
  10. etat_altern = 0;
  11. Layer1.style.visibility = 'visible';
  12. Layer2.style.visibility = 'hidden';
  13. }
  14. setTimeout("altern()",1000);
  15. }
  17. altern();


 
le 1000 corespond à 1000 millièmes de secondes donc une seconde, là tu peux mettre ce que tu veux, 2000 pour 2 secondes, 500 pour une demis seconde etc...


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 04-01-2007 à 14:43:42    

merci c'est sympa mais ça ne marche pas ... :(

Message cité 1 fois
Reply

Marsh Posté le 04-01-2007 à 14:54:12    

Niko80 a écrit :

merci c'est sympa mais ça ne marche pas ... :(


 
normal, ça, c'est du code pour Netscape :p  
Un petit bout de code pour afficher/cacher toutes les 10 secondes <div id="test">...</div>

Code :
  1. setInterval('showHide', 10000);
  3. function showHide() {
  4.     obj = document.getElementById('test');
  5.    
  6.     if (obj.style.display == 'none') {
  7.         obj.style.display = 'block';  // pour afficher
  8.     } else {
  9.         obj.style.display = 'none';  // pour cacher.
  10.     }
  11. }


 
edit : j'avais pas vu que Layer était un ID et non un objet...désolé. Quand je vois layer, je pense de suite à Netscape...


Message édité par rufo le 04-01-2007 à 15:28:56
Reply

Marsh Posté le 04-01-2007 à 14:57:07    

je viens de le tester, ça marche trés bien
 
bien entendu, le script que j'ai donné, il faut le mettre entre les balises qui délimite le programme javascript
 
<script type="text/JavaScript">
 
et
 
</script>
 
il faut aussi qu'il y ait les 2 div sur la page avec les identité que tu a donné et qu'il n'y ait pas d'autre programme javascript qui provoque des erreurs sur cette même page


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 04-01-2007 à 15:07:37    

Code :
  1. setInterval('showHide()', 1000);
  2.     function showHide() {
  3.        obj = document.getElementById('test');
  4.        if (obj) with(obj.style) visibility = visibility=="hidden" ? "visible" : "hidden";
  5.     }


Message édité par gatsu35 le 04-01-2007 à 15:50:30
Reply

Marsh Posté le 04-01-2007 à 15:30:19    

Niko80, ça serait pas pour émuler le clignotage de liens ton affaire, là?

Reply

Marsh Posté le 04-01-2007 à 21:13:21    

CID j'ai bien fait comme tu m'a dit, testé sur IE et firefox. mais rien ne se passe... voila ma page html :
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. #Layer1 {
  6. position:absolute;
  7. left:171px;
  8. top:50px;
  9. width:406px;
  10. height:320px;
  11. z-index:1;
  12. background-color: #00FF00;
  13. }
  14. #Layer2 {
  15. position:absolute;
  16. left:199px;
  17. top:40px;
  18. width:346px;
  19. height:362px;
  20. z-index:2;
  21. background-color: #FF0000;
  22. }
  23. -->
  24. </style>
  25. <script type="text/JavaScript">
  27.       var etat_altern = 0;
  28.    
  30.      function altern(){
  32.       if(etat_altern==0){
  34.       etat_altern = 1;
  36.       Layer1.style.visibility = 'hidden';
  38.       Layer2.style.visibility = 'visible';
  40.       }
  42.       else{
  44.       etat_altern = 0;
  45.       Layer1.style.visibility = 'visible';
  47.      Layer2.style.visibility = 'hidden';
  49.       }
  51.       setTimeout("altern()",1000);
  53.       }
  54.         altern();   
  55.  
  56. </script>
  57. </head>
  59. <body>
  60. <div id="Layer1"></div>
  61. <div id="Layer2"></div>
  63. </body>
  64. </html>


 
 
rufo, non en fait c'est pour afficher afficher un table de données mysql toute les x secondes sans refresh. Vu que ça à l'air plutot compliqué à faire avec ajax (cf mon post http://forum.hardware.fr/hfr/Progr [...] 9813_1.htm   0 réponses).
 
Ce que je compte faire c'est mettre une iframe dans chaque div, avec un refresh html auto dans chacune des iframes. Avec un bon timing d'affichage des div, ça devrait donner l'illusion d'un flux continu de données sans décalage de page qui aurait lieu en temps normal avec un refresh html. :)

Reply

Marsh Posté le 04-01-2007 à 21:13:21   

Reply

Marsh Posté le 04-01-2007 à 21:18:04    

<blink><div id="Layer1"></div></blink>
<blink><div id="Layer2"></div></blink>

 

[:chrisbk]


Message édité par 0x90 le 04-01-2007 à 21:18:12

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 04-01-2007 à 22:04:49    

ça marche si tu met le script aprés les div, car si tu le met dans head la fonction se lance avant que les identités soit données
 

Code :
  1. <html><head>
  3. <style type="text/css">
  4. <!--
  5. #Layer1 {
  6. position:absolute;
  7. left:171px;
  8. top:50px;
  9. width:406px;
  10. height:320px;
  11. z-index:1;
  12. background-color: #00FF00;
  13. }
  14. #Layer2 {
  15. position:absolute;
  16. left:199px;
  17. top:40px;
  18. width:346px;
  19. height:362px;
  20. z-index:2;
  21. background-color: #FF0000;
  22. }
  23. -->
  24. </style>
  27. </head>
  28. <body>
  30. <div id="Layer1"></div>
  31. <div id="Layer2"></div>
  34. <script type="text/JavaScript">
  36. var etat_altern = 0;
  38. function altern(){
  39. if(etat_altern==0){
  40.  etat_altern = 1;     
  41.  document.getElementById('Layer1').style.visibility = 'hidden';
  42.  document.getElementById('Layer2').style.visibility = 'visible';
  43.  }
  44. else{
  45.  etat_altern = 0;
  46.  document.getElementById('Layer1').style.visibility = 'visible';
  47.  document.getElementById('Layer2').style.visibility = 'hidden';
  48.  }
  49. setTimeout("altern()",1000);
  50. }
  52. altern();
  54. </script>
  57. </body>
  58. </html>


 
j'ai aussi rajouté les document.getElementById, même si sans ça fonctionne quand même


---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com
Reply

Marsh Posté le 05-01-2007 à 10:13:21    

c'est normal les balises commentaires dans la feuille de styles <style type="text/css">???

Reply

Marsh Posté le 06-01-2007 à 12:32:50    

merci beaucoup ça marche CID

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed