Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
2239 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2300157
chico008
what the wookie says ?
Posté le 04-05-2017 à 09:24:26  profilanswer
 

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
mood
Publicité
Posté le 04-05-2017 à 09:24:26  profilanswer
 

n°2300187
MaybeEijOr​Not
but someone at least
Posté le 04-05-2017 à 14:47:33  profilanswer
 

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.
n°2300220
chico008
what the wookie says ?
Posté le 05-05-2017 à 07:54:03  profilanswer
 

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

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


 
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
n°2302224
Hiita
Posté le 20-06-2017 à 10:18:36  profilanswer
 

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
n°2302248
chico008
what the wookie says ?
Posté le 20-06-2017 à 14:35:58  profilanswer
 

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
n°2302254
Hiita
Posté le 20-06-2017 à 15:01:43  profilanswer
 

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
n°2316664
chico008
what the wookie says ?
Posté le 07-06-2018 à 21:16:39  profilanswer
 

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
n°2316677
MaybeEijOr​Not
but someone at least
Posté le 08-06-2018 à 09:53:13  profilanswer
 

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.
n°2316722
chico008
what the wookie says ?
Posté le 09-06-2018 à 00:21:42  profilanswer
 

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.   }
  12. }
  13.     function Affichage(num) { 
  14.  //Declaration variables
  15.  var sites = ['http://site1','http://site2/page.php'];
  16.  //Utilisation site
  17.  url=sites[num];
  18.  document.getElementById('iframe').src = url;
  19.     } 
  20. </script> 
  21. </head> 
  22. <body style="margin: 0;"> 
  23. <iframe id="iframe" src="about:blank" style="border: 0; width: 100vw; height: 100vh;"></iframe>
  24. <script>
  25. Affichage(0);
  26.     Slideshow(1); 
  27. </script> 
  28. </body> 
  29. </html>


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

---------------
Serveur HFR - OpenTTD
n°2316735
MaybeEijOr​Not
but someone at least
Posté le 09-06-2018 à 10:54:01  profilanswer
 

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() {
  29.          /* définition des données variables en fonction des ids des éléments */
  30.          let datas = {
  31.             'slide0': ['000', '001'],
  32.             'slide1': ['100', '101', '102', '103', '104', '105'],
  33.             'slide2': ['200', '201', '202']
  34.          };
  35.          let period = 3000; //définition de la durée des périodes
  36.          let els = document.getElementsByClassName('slide'); //récupération des éléments portant la classe "slide"
  37.          for(let el of els) {
  38.             let vals = datas[el.id].values();
  39.             let val = vals.next();
  40.             setInterval(function() {
  41.                val = vals.next();
  42.                if(val.done !== true) {
  43.                   el.textContent = val.value; //changement de la propriété par la prochaine donnée variable
  44.                } else {
  45.                   vals = datas[el.id].values();
  46.                   val = vals.next();
  47.                   el.textContent = val.value; //changement de la propriété par la prochaine donnée variable
  48.                }
  49.             }, period);
  50.          }
  51.       }
  52.       function jawascript() {
  53.          slideshow();
  54.       }
  55.    </script>
  56. </head>
  57. <body onLoad="jawascript();">
  58.    <div class="main">
  59.       <div class="slide" id="slide0">000</div>
  60.       <div class="slide" id="slide1">100</div>
  61.       <div class="slide" id="slide2">200</div>
  62.    </div>
  63. </body>
  64. </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.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Timer sur page htm[PHP] Question sur les sessions et leur expiration
[PHP] Tableau automatique, mais des lignes sautentAlignement d'articles.. Problème HTML/CSS
Afficher une grille dans GoogleEarth à partir d'un point[HTML/PHP] Redirection via Arduino
Passer de MySQL à MySQLi pour PHP 7[PHP] pourquoi ma regex ne marche pas ?
Chargement page HTML 
Plus de sujets relatifs à : [HTML/PHP/JS] Afficher x pages en alternances sur timer


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR