[HTML/PHP/JS] Afficher x pages en alternances sur timer

Afficher x pages en alternances sur timer [HTML/PHP/JS] - HTML/CSS - Programmation

Marsh Posté le 04-05-2017 à 09:24:26    

Bonjour
 
J'ai une petite problématique
 
J'ai 2 pages d'infos, fournis par 2 serveurs différents, que je cherche a afficher en alternance sur un écran.
 
Je souhaite faire une page web, qui va faire appel a ces 2 autres pages, et changer toutes les 10 minutes
 
en HTML pur, je me doute que c'est pas faisable
étant admin d'un des serveurs, je peut y héberger une page PHP pour essayer cela
Sinon il est possible de passer par du JS natif, hébergé sur l’écran pour être indépendant.
 
Dans ces 2 cas, je ne sais pas vraiment à quelles fonctions faire appel, ni comment.
en PHP je peut m'y essayer, mais JS par contre c'est hors de mes compétences
 
Du coup je fait appel à vous


---------------
Serveur HFR - OpenTTD
Reply

Marsh Posté le 04-05-2017 à 09:24:26   

Reply

Marsh Posté le 04-05-2017 à 14:47:33    

Bonjour,
 
La première page chargée doit rester affichée 10 minutes ou bien l'alternance se fait indépendamment de l'utilisateur?
 
En tout cas avec "http redirection" sur Google tu trouveras ton bonheur.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 05-05-2017 à 07:54:03    

alternance defini, au final j'ai pondu ceci qui marche exactement comme je l'esperait
 

Code :
  1. <?php
  3. $timer=120;
  5. if (! isset($_GET[AFF]))
  6. { $aff=2; }
  7. else
  8. { $aff=$_GET[AFF]; }
  10. $url[1]="./toto.php";
  11. $url[2]="http://siteb/titi/";
  13. //calcul de la page selon le compteur
  14. $aff_url=$url[$aff];
  15. $aff++;
  16. if ($aff > 2) { $aff=1; }
  19. echo "
  20. <html>
  21. <head>
  22. <meta http-equiv='refresh' content='".$timer.";URL=./index_multi.php?AFF=".$aff."'>
  23. </head>
  24. <body style='margin: 0;'>";
  26. //affichage page
  27. //echo "DEBUG : URL = $aff_url ||| AFF = $aff<br>";
  28. echo "<iframe src='".$aff_url."' style='border: 0;width: 100vw;height: 100vh;'></iframe>";
  30. //FIN
  31. echo "</body></html>";
  32. ?>


 
Du coup il est possible d'ajouter plusieurs url à alterner, en modifiant du coup le max du reset (ligne 16, qu'il doit être possible de viabiliser en testant le nombre d'enregistrement dans $url)


Message édité par chico008 le 05-05-2017 à 07:56:37

---------------
Serveur HFR - OpenTTD
Reply

Marsh Posté le 20-06-2017 à 10:18:36    

Bonjour,

 

Je suis un peu dans le même cas que chico008, j'ai plusieurs pages PHP (avec requête jQuery et tout le tralala) que j'aimerais aussi afficher en alternance sur un écran, elles sont sur le même serveur cependant, je n'arrive pas du tout à faire une rotation entre ces pages ><
J'ai tenté pas mal de choses trouvées sur Internet, dont du JavaScript mais ça n'a pas été concluant...

 

Je débute en informatique, et je maitrise pas forcément extrêmement bien le PHP ou JavaScript, donc si vous pouviez m'aider ><


Message édité par Hiita le 20-06-2017 à 10:30:05
Reply

Marsh Posté le 20-06-2017 à 14:35:58    

et en reprenant mon code juste au dessus ca marche pas ?
 
t'a juste a declarer plusieurs $aff[x] selon le nombre de page et changer le max : if ($aff > 2 ...
2 = le max a changer


---------------
Serveur HFR - OpenTTD
Reply

Marsh Posté le 20-06-2017 à 15:01:43    

Non, ça ne marche que pour la première page :{
Après je suis pas sûre de bien avoir compris ton code ><

 

Je vais retenter ^-^

 

Edit : Si c'est bon, ça marche ! C'est juste moi qui avait fait une erreur toute bête ! Merci beaucoup :D


Message édité par Hiita le 20-06-2017 à 15:06:59
Reply

Marsh Posté le 07-06-2018 à 21:16:39    

Hop, je reviens sur le sujet
est-il possible de faire la meme chose mais en JS, pour que le code soit executé coté client, et non coté serveur ?


---------------
Serveur HFR - OpenTTD
Reply

Marsh Posté le 08-06-2018 à 09:53:13    

Si tu n'as pas besoin de déclencher le timer sur le serveur (indépendamment de l'utilisateur) alors tu as juste besoin de mettre sur chaque page :

Code :
  1. <meta http-equiv='refresh' content='DUREE_TIMER;URL=LIEN_PAGE_SUIVANTE'>


Ce qui aura pour conséquence que l'utilisateur attendra toujours la durée du timer sur chaque page, il n'arrivera pas en cours de compte à rebours.
 
Donc il n'y a ni besoin de PHP ni de JS. On peut aussi faire quelque chose en JS mais pour l'instant je ne vois pas l'intérêt par rapport au besoin que tu décries.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-06-2018 à 00:21:42    

oui mais non, car les pages en question peuvent etre accessible aux utilisateur, donc si il est sur sa page, et que d'un coup ca lui en met une autre sans qu'il le demande, c'est pas trop
le besoin c'est pour un "mur d'image", du coup pour faire un genre de Slideshow des pages qu'on veut afficher.
 
Du coup j'ai fait mon truc, je me solutionne moi meme
je previent, je suis tres loins d'etre un bon en JS, c'est plus du bricolage, mais ca marche sans buguer, c'est le principal
 

Code :
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script type="text/javascript">
  5. function Slideshow(cpt) {
  6.  //pause pour la boucle
  7.  setTimeout(function() {Affichage(cpt);Slideshow(cpt)}, 120000)
  8.  cpt++;
  9.  if ( cpt >= 2) {
  10.   cpt=0;
  11.   }
  13. }
  14.     function Affichage(num) { 
  15.  //Declaration variables
  16.  var sites = ['http://site1','http://site2/page.php'];
  18.  //Utilisation site
  19.  url=sites[num];
  21.  document.getElementById('iframe').src = url;
  23.     } 
  24. </script> 
  25. </head> 
  27. <body style="margin: 0;"> 
  29. <iframe id="iframe" src="about:blank" style="border: 0; width: 100vw; height: 100vh;"></iframe>
  31. <script>
  32. Affichage(0);
  33.     Slideshow(1); 
  34. </script> 
  35. </body> 
  36. </html>


Message édité par chico008 le 09-06-2018 à 00:23:39

---------------
Serveur HFR - OpenTTD
Reply

Marsh Posté le 09-06-2018 à 10:54:01    

Peut-être un peu plus propre et un peu plus fonctionnel :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       body {
  8.          margin: 0 0 0 0;
  9.          width: 100%;
  10.          font-size: 100%;
  11.       }
  12.       div.main {
  13.          width: 100%;
  14.          padding: 40px 0px 40px 0px;
  15.       }
  16.       div.slide {
  17.          height: 80px;
  18.          line-height: 80px;
  19.          margin: 10px auto 10px auto;
  20.          width: 200px;
  21.          text-align: center;
  22.          border-style: solid;
  23.          border-color: #FF0000;
  24.          border-width: 1px 1px 1px 1px;
  25.       }
  26.    </style>
  27.    <script type="text/javascript">
  28.       function slideshow() {
  30.          /* définition des données variables en fonction des ids des éléments */
  31.          let datas = {
  32.             'slide0': ['000', '001'],
  33.             'slide1': ['100', '101', '102', '103', '104', '105'],
  34.             'slide2': ['200', '201', '202']
  35.          };
  37.          let period = 3000; //définition de la durée des périodes
  38.          let els = document.getElementsByClassName('slide'); //récupération des éléments portant la classe "slide"
  39.          for(let el of els) {
  40.             let vals = datas[el.id].values();
  41.             let val = vals.next();
  42.             setInterval(function() {
  43.                val = vals.next();
  44.                if(val.done !== true) {
  45.                   el.textContent = val.value; //changement de la propriété par la prochaine donnée variable
  46.                } else {
  47.                   vals = datas[el.id].values();
  48.                   val = vals.next();
  49.                   el.textContent = val.value; //changement de la propriété par la prochaine donnée variable
  50.                }
  51.             }, period);
  52.          }
  53.       }
  54.       function jawascript() {
  55.          slideshow();
  56.       }
  57.    </script>
  58. </head>
  59. <body onLoad="jawascript();">
  60.    <div class="main">
  61.       <div class="slide" id="slide0">000</div>
  62.       <div class="slide" id="slide1">100</div>
  63.       <div class="slide" id="slide2">200</div>
  64.    </div>
  65. </body>
  66. </html>


 
Il te suffit de remplacer les divs par des iframes et les lignes "el.textContent = val.value;" par "el.src = val.value;".


Message édité par MaybeEijOrNot le 09-06-2018 à 10:58:25

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

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