Bonjour,

J'aimerais savoir si l'écriture ci-dessous est la bonne. Surtout pour l'une des lignes <sizes> où je précise un intervalle entre deux tailles d'écran. Je ne sais pas si on peut le faire car je n'ai trouvé aucun exemple le précisant. Et enfin faut-il bien toujours commencer par la plus petite taille de fichier ou l'ordre n'a que peu d'importance ?

<img
				srcset="
					img/bubble_20x20.png 20w,
					img/bubble_25x25.png 25w,
					img/bubble_30x30.png 30w,
					img/bubble_40x40.png 40w,
					img/bubble_50x50.png 50w,
					img/bubble_60x60.png 60w
				"
				sizes="
					(max-width: 599px) 20px,
					(min-width: 600px) and (max-width: 999px) 25px,
					(min-width: 1000px) 30px
				"
			src="img/bubble_60x60.png" alt="" />

Merci.

Merci beaucoup à vous deux, j'aime beaucoup vos deux solutions ! Je vais plutôt opter pour celle de _laurent qui me semble plus simple niveau code, mais les deux fonctionnent très bien !
Je n'avais pas pensé à la transformation skew, c'est mille fois plus simple que les éléments svg que j'essayais d'utiliser et qui se déformaient à chaque variation de taille de l'input.

Je ne pouvais pas vous fournir mon code car mon projet n'en est qu'au stade de maquette actuellement, mais ce sera implémenté sur un formulaire via Wordpress

A une prochaine fois !

Bonsoir,

j'ai jeté l'éponge quant à faire le morphing en pur css. Voici le résultat :

$script = "
let phrase='Le phrasé délimite et articule le discours musical en unités signifiantes';
let mots=phrase.split(space);
let size=mots.length;

let sex=2;
$('style').innerHTML+='own span { transition:opacity'+space+sex+'s; }';

for(let n=0; n<size; n++)
{
let span=$('own').tax('span',n%2);

setTimeout(function(){ span.css('opacity',1).html(mots[n]); },n*sex*1000);
setTimeout(function(){ span.css('opacity',0); },(n+1)*sex*1000);
}
" ;

echo tag( VIDE, "span" ).tag( VIDE, "span" ).tag( $script, "script" ) ; 
include "Modules/gooey.part" ; 

/* Laboratoire/Style/Pages/jscss-morphing.css */

own { filter:url(#gooey); }
own span { font-size:20ex; top:1ex; position:absolute; left:0; right:0; text-align:center; opacity:0; }

<svg>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"></feGaussianBlur>
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -8" result="gooey"></feColorMatrix>
    <feComposite in="SourceGraphic" in2="gooey" operator="atop"></feComposite>
  </filter>
</svg>

https://labo.pariswebschool.fr

Voilà qui est intéressant!
Merci de la réponse

Bonjour à tous,

Déjà merci de vouloir m'aider, en effet je n'y connait presque rien.
Pour résumer je souhaite récupérer des données depuis l'API http://developers.pioupiou.fr/api/live/
et intégrer les valeurs de la balise 127
https://www.openwindmap.org/PP127 et cela dans une page déjà existante de notre site internet, code que je vous ai transmis un peu plus haut.
Pensez vous cela réalisable?
Merci encore pour votre aide
Yvan
Modifié par vanvan68 (17 Jun 2021 - 11:47)

Bonjour,

J'arrive un peu après la bataille, mais tu peux aussi appeler ton programme 2 avec curl :

function callUrl($url)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_exec($ch);
    curl_close($ch);
}

à la fin de ton programme1.php, tu appelles

callUrl('https://monsite.fr/programme2.php');

Merci pour vos messages, c'était bien un problème de majuscule, merci encore.

Bonjour à tous,

Simple question : quelqu'un serait-il en mesure de me dire s'il existe un plugin Wordpress (bien que j'en doute) ou un tutoriel qui permettrai de mettre en place la même fonction qui apparait lorsque l'on presse le bouton "Buy Now" comme sur ce site: https://www.qwertee.com/product/meowtivation-not-found

Merci pour vos retours.

Pour info, le code suivant, plus compact, se comporte de la même façon :

@keyframes avant {
0% { opacity:0; content:'Le'; } 7.1428571428571% { opacity:1; }
14.285714285714% { opacity:0; content:'délimite'; } 21.428571428571% { opacity:1; }
28.571428571429% { opacity:0; content:'articule'; } 35.714285714286% { opacity:1; }
42.857142857143% { opacity:0; content:'discours'; } 50% { opacity:1; }
57.142857142857% { opacity:0; content:'en'; } 64.285714285714% { opacity:1; }
71.428571428571% { opacity:0; content:'signifiantes'; } 78.571428571429% { opacity:1; }
85.714285714286% { opacity:0; content:'ou'; } 92.857142857143% { opacity:1; }
}

Le problème semble résolu.

Ce serait aimable de nous indiquer la solution et de marquer le sujet comme résolu.

Bonsoir,

cette question est corrélée à celle intitulée Morphing.

@keyframes avant {
0% { content:'Le'; } 7.1428571428571% { opacity:1; } 14.285714285714% { opacity:0; }
14.285714285714% { content:'délimite'; } 21.428571428571% { opacity:1; } 28.571428571429% { opacity:0; }
28.571428571429% { content:'articule'; } 35.714285714286% { opacity:1; } 42.857142857143% { opacity:0; }
42.857142857143% { content:'discours'; } 50% { opacity:1; } 57.142857142857% { opacity:0; }
57.142857142857% { content:'en'; } 64.285714285714% { opacity:1; } 71.428571428571% { opacity:0; }
71.428571428571% { content:'signifiantes'; } 78.571428571429% { opacity:1; } 85.714285714286% { opacity:0; }
85.714285714286% { content:'ou'; } 92.857142857143% { opacity:1; } 100% { opacity:0; }
}

Contrairement à mon attente, "délimite" surgit tout d'un coup, et non progressivement comme je m'y attendrais. Une idée ?

Merci à tous !
En fait, j'ai contourné le problème, et simplifié tous ce bazar. Je crée mon adresse dans le <form, et je le récupère derrière ! Et tout est dit ! Et ça marche ... enfin presque, je pose un autre post sur un autre forum
Merci encore
H.

Après réflexion c’est dû à ce que groupList peut être null
Il fallait donc écrire

WHERE groupList IS NOT NULL OR groupList NOT RLIKE '(^|;)ca(;|$)'

J’ai compris ça hier dans un cas similaire où je ne pouvais pas faire l’impasse.

Je vous remercie de vos réponses. Je pensais qu’il y avait un truc simple que j’ignorais ou auquel je n’avais pas pensé. Je ne vais pas me lancer dans un développement pour simplement m’éviter de faire un clic sur un lien, ce serait contre productif, sauf si ce développement m’apportait quelque chose que je puisse réutiliser ailleurs.

Bonjour à tous,

J'utilise symfony 5.1 pour créer un portail.
J'utilise formbuilder pour gérer des formulaires permettant de mettre des actualités en ligne.
Le formulaire fonctionne très bien mais je rencontre deux problèmes bien ennuyeux dans l'affichage.
1 - Le bouton mis à droite du champ de sélection d'un fichier est nommé browse et je souhaiterais pouvoir mettre Choisir à la place.

2 - Lorsque un fichier est sélectionné rien ne s'affiche dans le champ (le input type='file'), c'est assez troublant. Pourtant lorsque je valide mon formulaire le fichier choisi est bien pris en compte.

Voici mon code dans le Form :

->add('image', FileType::class, ['required' => false,
'data_class' => null,
'help' => 'Vous devez sélectionner une image',
'row_attr' => ['placeholder' => 'Sélectionnez un fichier'],
])

Bonjour !

Je voudrais vous faire part de l'état d'avancement de mes travaux (qui n'est pas satisfaisant) :

$chaine = "Le phrasé délimite et articule le discours musical en unités signifiantes plus ou" ;
$mots = explode( SPACE, $chaine ) ; $size = count( $mots ) ; 
$pas = .88 ; $deltaetape = 50 * $pas / ( $size - 1 ) ; $duree = $deltaetape * ( $size * 2 + 3 ) ; 
 
echo IC.commenter( "\$deltaetape:$deltaetape%" ) ; 

$style_lines = array( "own hr::before, own hr::after { animation-duration:$duree"."s; }" ) ;
$avant_lines = array( "@keyframes avant {" ) ;
$apres_lines = array( "@keyframes apres {" ) ;

for( $n=0, $etape=0; $n<$size ; $n++ )
{
$content = addslashes( $mots[$n] ) ; $ligne = array() ;
$ligne[] = "$etape% { content:'$content'; }" ;
$etape += $deltaetape ; $ligne[] = "$etape% { opacity:1; }" ;
$etape += $deltaetape ; $ligne[] = "$etape% { opacity:1; }" ;
$etape += $deltaetape ; if( $etape <= 100 ) $ligne[] = "$etape% { opacity:0; }" ;
$line = join( SPACE, $ligne ) ;
$n % 2 ? $apres_lines[] = $line : $avant_lines[] = $line ;
$etape -= $deltaetape ;
}

$avant_lines[] = $apres_lines[] = FEAC ;
echo tag( $style_lines, "style" ).tag( $avant_lines, "style" ).tag( $apres_lines, "style" ) ;

<hr />

<svg>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"></feGaussianBlur>
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -8" result="gooey"></feColorMatrix>
    <feComposite in="SourceGraphic" in2="gooey" operator="atop"></feComposite>
  </filter>
</svg>

/* Laboratoire/Style/Pages/morphing-revamp.css */

own hr { font-size:20ex; margin-top:.5ex; border:none; }

own hr::before, own hr::after 
{ content:''; position:absolute; left:0; right:0; text-align:center; opacity:0; animation-fill-mode:forwards; }

own hr::before { animation-name:avant; }
own hr::after { animation-name:apres; }

Si vous voulez faire des suggestions.

https://labo.pariswebschool.fr/?morphing-revamp

Mathieuu a écrit :
Salut,

Éventuellement du coté de exec ?

Bon courage

J'y ai pensé. Mais pas obligatoirement parce qu'on ne connait pas vraiment le contexte d'où ma proposition de gérer un bool

Et l'eau,

diapo/2.jpg
diapo/3.jpg
etc.

404 !

Bonjour,

Y-a-t-il des erreurs dans la console ?

Bonjour,

voici ce que j'ai mis en place sur un site pour faire apparaître ou disparaître au scroll du texte enfermé dans une div, avec une transition douce dans l'opacité. On peut aussi choisir de le déplacer, comme tu fais sur l'exemple. Par rapport à ce que je donne plus bas et ton but, tu vas devoir fortement adapter, mais c'est aussi l'intérêt de ce forum, donner des pistes.

Le gros avantage du JavaScript que j'utilise, c'est que si on monte et on descend sur la page, la div disparaît et apparaît de nouveau chaque fois. Alors que sur de très nombreux sites, et l'exemple que tu donnes, l'effet ne se produit qu'une fois, jusqu'au rechargement de la page. C'est assez frustrant.
Une partie de mon code (trouvé sur le net et adapté à mon projet) :

<div class="text-box">

.text-box {
  	tout ce qu'il faut, couleurs, marges, etc.
  	....
     	opacity:.2;
    	transition:opacity 1.4s ease-in-out;}

.text-box.scrolled {
	opacity:.85;}

<script>
	function showIt() {
  const toBeShown = document.querySelectorAll(".text-box"); 
  const halfScreen = window.innerHeight / 1.8;
  toBeShown.forEach((item, i) => {
    const scrolled = (window.scrollY + window.innerHeight);// - (item.offsetHeight/2);

    if (item.offsetTop - window.scrollY < halfScreen) {
      item.classList.add('scrolled');
    } else {
      item.classList.remove('scrolled');
    }
  })
}
window.addEventListener('scroll', showIt);
      </script>

Quand aux performances par rapport au scroll, je n'ai pas poussé les tests jusque là, je ne peux pas m'avancer. Google page speed me donne de très bonnes performances de vitesse mais ce test ne permet pas de mesurer l'effet d'un scroll de la page.

Je suis débutant notamment en JavaScript et, même si je commence à comprendre ce que je fais, la plupart du temps je copie colle du code venu d'ailleurs.
Je m'étais intéressé à IntersectionObserver car j'avais lu qu'il ne grevait pas les performances des pages web.
Qu'en est il de ta méthode ?
Aurais tu un exemple de code ?

Bonsoir, je suis en train de m'arracher les cheveux (ceux qui restent), j'ai créé un diaporama d'arrière fond pour un site que je suis en train créé, il fonctionne très bien quand je l'utilise sous wamp et je charge les mêmes fichiers sur mon hébergeur et quand je vérifie le bon fonctionnement, le diaporama ne fonctionne plus, est-ce quelqu'un peu m'aider. Merci d'avance.

* Définition des polices fournies par Rénovation Laguillon */
 
@font-face
{
    font-family: 'contbold';src:url('fonts/contb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'contmedium';src:url('fonts/contm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'contlight';src:url('fonts/contl.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
/* Eléments principaux de la page */
 
 
 
body{background-color: #fff;font-family: 'contbold', Arial, sans-serif;color: #cc6600height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');}
 
#bloc_page{width: 100%;margin: auto;}
 
section h1, footer h1, nav a{font-weight: normal;text-transform: uppercase;}
 
/* Header */
 
header{display: flex;justify-content: space-between;align-items: flex-end;width: 100%;position: fixed;height: 100px;top: 0;left: 0;background-color: rgba(000, 000, 000, 0.4);}
 
#titre_principal{display: flex;flex-direction: column;}
 
#logo{display: flex;flex-direction: row;align-items: baseline;width: 100px;height: 100px;float: right;}
 
#logo img{width: 100%;height: 100%;}
 
/* Navigation */
nav{width: auto;margin: 0 auto;margin-top: -20%;padding-bottom: 24px;}
 
nav ul{list-style-type: none;display: flex;}
 
nav li{margin-right: 15px;}
 
nav ul li {
    display: inline;
        list-style-type: circle;
}
 
nav a{font-size: 1.3em;color: #fff;text-decoration: none;font-size: 2.1em;text-shadow: 2px 2px 4px black;}
 
nav a:hover{color: #cc6600;border-bottom: 3px solid #cc6600;}
 
 
 
/* diaporama fond ecran */
 
/*#carroussel{width: 100%;height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');top: 0;left: 0;}*/
@keyframes slideBg{
 
     0%{background-image: url('../diapo/1.jpg');background-size: cover;}
 
    25%{background-image: url('../diapo/2.jpg');background-size: cover;}
 
    50%{background-image: url('../diapo/3.jpg');background-size: cover;}
 
    75%{background-image: url('../diapo/4.jpg');background-size: cover;}
 
    100%{background-image: url('../diapo/5.jpg');background-size: cover;}
}
 
/* Position texte */
article{width: 600px;height: 375px; margin: 0 auto; margin-top: 115px;padding-left: 25px;padding-right: 25px;padding-top: 20px;padding-bottom: 20px;background-color: rgba(000, 000, 000, 0.4);overflow: auto;scrollbar-visibility: hidden;}
article p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.6em;text-align: justify;}
 
article::-webkit-scrollbar {
    display: none;  /* Chrome Safari */
}
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  overflow-y:scroll;
  overflow-x:hidden;
}
 
/* postion texte contact */
.contact p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.4em;text-align: left;}
.contact ul li{color: #fff;font-family: 'contlight'; font-size: 20px;}
.contact a{color : #cc6600;text-decoration: none;}
/* Format pied de page */
footer{position: fixed;width: 100%;text-align: center;margin-top: 30px;bottom: 0;height: 70px;clear:both;font-family: 'contlight';color: #fff;font-size: 12px;background-color: rgba(000, 000, 000, 0.4);left: 0;}
footer a{text-decoration: none;color: #2980B9;}

Voici le lien du site provisoire : https://amiral-pc-test.000webhostapp.com/index.php afin de visualiser le souci.

JENCAL a écrit :
Ok top, oui j'avais pas vu!

Du coup quel est le problème ? j'ai compris ce que tu rechercher pose de film dépoli Villeneuve Loubet, mais je n'ai pas compris le réel problème ?

Ce ne sera pas un jeu d'enfant de suivre chaque code.

Et l'eau kerlutinoec,

Quand j'ai appris l'existence de cet objet, j'ai été très enthousiasmé. Et puis j'ai vite déchanté. Le projet sur lequel j'ai la responsabilité actuellement, j'ai des observers un peu partout. Ces derniers sont codés à la main et je n'utilise pas d'intersectionObserver. Coder un observer, c'est très simple :
- 2 objets (subject/observer)
- 4 méthodes (add/rm/notify/update)
- gestion d'une collection (observers)
- implémentation d'une closure (callback)

J'ai eu trop d'ennuis avec (quand tu dois livrer un projet avec des délais courts et que cet objet t'amène son lot de bugs, tu perds vite patience). Non merci, pour la perte de temps.... De toutes manières, cet objet est encore en phase expérimentale. Donc, tu risques la pléthore de bugs.
Modifié par niuxe (15 Jun 2021 - 11:11)

Salut,

Éventuellement du coté de exec ?

Bon courage

Merci pour votre réponse
Je pense que je vais inclure <div class="col_1"> dan sma première boucle asp pour démarrer une nouvelle colonne. Cela semble fonctionner

Hello,

En regardant assez rapidement il y a ça qui m'a sauté aux yeux :

<script type="text/javascript">
    function onReCaptchaValid(token) {
        document.getElementById('id_du_formulaire').submit();
    }
</script>

Ton <form> n'a pas d'id... Là, ça correspondrait à un <form id="id_du_formulaire"></form>.
Une petite erreur de copier/coller ? ^^

Et l'eau,

Gérer un bool ?

Bonsoir,

Je ne vais pas m'étendre parce que ce serait long....
https://pypi.org/project/xlrd/
https://pypi.org/project/pandas2/

exemple avec Pandas:

import pandas as pd
xl_file = pd.ExcelFile("./data.xls")
dfs = {sheet_name: xl_file.parse(sheet_name) for sheet_name in xl_file.sheet_names}
print(dfs)

Et en php, il y a php excel. Je n'ai jamais utilisé.
Modifié par niuxe (15 Jun 2021 - 00:09)

Merci de ta réponse
header -> ne rien écrire du tout durant le déroulement du programme, j'aimerais évider dans ce contexte.
En fait il s'agit de deux programmes d'administration du site, actuellement je lance manuellement le 1 puis le 2, je me disais que ce serait pratique de les enchaîner automatiquement
Tant qu'à modifier le code, je peux aussi bien aller à la chasse aux classes et fonctions dupliquées.
Je verrai quand il fera moins chaud!

Bonjour,

Je tenterais naïvement un header( location )en passant par $_GET éventuellement les variables dont tu as besoin.

Mais il y a sûrement moyen d'encapsuler les fonctions de ton deuxième fichier, ça je ne sais pas faire. (Getinstance ou get_class si ton code le permet)

Cdt
Modifié par gcyrillus (14 Jun 2021 - 16:16)

Salut

Tu souhaite quand même procéder à la validation du formulaire ?

à partir du moment où c'est un formulaire, la page doit se recharger

et donc ta modal se ferme (car elle est ouvert par un click).

le mieux serait donc de passer par de l'AJAX au lieu d'un formulaire de type submit.
Modifié par JENCAL (14 Jun 2021 - 16:23)

Bonjour à tous
A la fin de l'exécution de programme1.php j'aimerais lancer programme2.php
Usuellement je fais ça par include("programme2.php") mais il y a de nombreuses classes et fonctions qui portent le même nom dans les deux programmes. Sauf à faire de nombreuses modifications de code, ça ne fonctionne pas.
Quelle est la bonne façon de faire ça?

On n’est jamais à l’abri d’une panne, mais on devrait pouvoir alerter l’utilisateur.
L’utilisateur comprend que le site soit hors service mais là c’est seulement certaines pages…
Je n’aurais peut-être pas dû changer mon design et introduire une database au lieu de mes bons vieux fichier xml

Merci je vais regarder ça

Désole, depuis tout 'lheure je dis "Tu... Tu... Tu..." je croyais que tu été l'auteur du poste !

Pour récupèrer les données c'est pas GET comme tu as fait pour FFVL, et les données sont renvoyé en JSON,

http://api.pioupiou.fr/v1/live/127

ici on peut voir "wind_speed_avg": 9.25,

Tu as plus qu'a parser et à récupérer les données qui t'intéresses
Modifié par JENCAL (14 Jun 2021 - 14:19)

du coup je pense pas qu'il y ai un moyen de simplifier une jointure ou un concat si cest ça que tu cherches.

la jointure est fait pour récupèrer des champs d'une autre table via une clé et le concat est fait pour concaténer plusieurs champs. Soit tu utilise l'un, soit tu utilise l'autre, les deux n'ont aucun rapport en soit.

Après si il faut créer un moyen d'utiliser l'un ou l'autre suivant une règle précise, tu peux toujours utiliser un case. on utilisera un case dans l'exemple suivant :

Je dois faire une jointure si l'id est > 10
Je dois faire une concaténation si l'id < 10
alors je fais un case sql.
Modifié par JENCAL (14 Jun 2021 - 14:14)

Ah oui c'est c'était du code en production, je n'avais pas compris

ok tant mieux si tout est bien repartie (tant mieux ou pas, car du coup tu n'es pas à l'abri quel cela recommence)...

Le problème est qu'il n'y connait presqu rien...

Ok top, oui j'avais pas vu!

Du coup quel est le problème ? j'ai compris ce que tu rechercher, mais je n'ai pas compris le réel problème ?

Salut

Soit 2 <div> en mode table avec des ordonnancements légèrement différents :
https://codepen.io/kerlutinoec/pen/jOBQQad

<div style="position: relative; overflow-x: hidden; margin: 0 0 15vw 0;">
	<div class="figs">
	<figure>
	<img	src="image1.jpg" alt="" height="350" width="350"
			class="maxheight">
	</figure>
	<figure style="vertical-align: bottom; border-spacing: 0;">
	<p class="textesurimage textesurimageD">
	Le premier texte
	</p>
	<img	src="image2.jpg" alt="" height="125" width="350">
	</figure>
	</div>
</div>

<div style="position: relative; overflow-x: hidden; margin: 0 0 15vw 0;">
	<img	src="image3.jpg" alt="" height="250" width="500"
			style="width: 100%;" class="maxheight">
	<div class="figs">
	<figure>
	<img	src="image4.jpg" alt="" height="205" width="305"
			style="vertical-align: bottom;">
	</figure>
	<figure style="vertical-align: middle; background-color: #758C92;">
	<p class="textesurimage textesurimageD">
	Le deuxième texte
	</p>
	</figure>
	</div>
</div>

Le CSS :

.figs { display: table; border-spacing: .2vw 0; }
figure { position: relative; display: table-cell; }
figure img { width: 49.7vw; }

.maxheight { height: auto; max-height: 100vh; object-fit: cover; }
.textesurimage { 
	transform: translateX(-100%); 
	overflow: hidden; 
	width: 50%; 
	bottom: 0; 
	left: 5vw; 
	text-align: left; 
	font-size: 2.5em; 
	text-shadow: 1px 1px 1px #000; 
	}
.textesurimageD { 
	transform: translateX(100%); 
	width: 100%; 
	text-align: center; 
	}
	@media screen and (max-width:1200px) { .textesurimage{font-size: 1.75em;line-height: 1.125em;} }
.animtext { transform: translateX(0); transition: transform 1s ease; }

L'apparition du texte est géré par Intersection Observer :

const callback = (entries, observer) => { entries.forEach((entry) => {
    if (entry.isIntersecting) { entry.target.classList.add("animtext") } } ) };
const options = { root: null, rootMargin: '0px', threshold: 0 };
const myObserver = new IntersectionObserver(callback, options);
const txtList = document.querySelectorAll(".textesurimage");
txtList.forEach(txt => { myObserver.observe(txt); });

Pourquoi le deuxième texte veut bien s'animer mais pas le premier ???

PS : le plus étrange c'est que sur mac ça marche (Firefox, Chrome, Safari) et pas sur PC (ni Firefox, ni Chrome)

PS2 : seule la présence de 'image2' créé le problème (sous windows) ; sans elle ça marche !
Modifié par kerlutinoec (14 Jun 2021 - 16:18)

Merci de ta réponse
Le site est reparti tout seul comme un grand sans que j’aie changé quoi que ce soit au code ou aux données. Ça marche d’habitude sans problème depuis deux ans.
Je ne peux pas mettre des var_dump dans du code en exploitation.
Quand je faisais du développement système dans des cas similaires je lançais un timeout de 30 secondes ou 1 mn pour vérifier que cette f… opération était terminée mais je ne crois pas qu’on puisse faire ça en php

Merci de ta réponse
Mon problème n’est pas la jointure, c’est de fait de gérer cet ensemble de trois colonnes parfois comme 3 éléments distincts, parfois comme un tout. J’ai le sentiment qu’il doit y avoir quelque chose à faire mais je ne trouve pas quoi

Il n’est pas le seul…

Bah là, il y a une API : http://developers.pioupiou.fr/api/live/...

Salut

je pense que tu n'a pas le choix de passer par des jointures (LEFT JOIN si tu veux garder uniquement les données de la table principale (gauche))

Salut,

le mieux est encore de tester ton new PDO dans un var_dump pour voir vraiment ce qu'il en ressort. et même de tester tes $this -> host etc..

var_dump(new PDO("mysql:host={$this -> host};dbname={$this ->   dbname};charset=utf8", 
                $this -> dbuser,  $this -> dbpw)); die;

Modifié par JENCAL (14 Jun 2021 - 11:33)

Salut regarde du côté de la console de ton navigateur, tu as surement une erreur en rouge (javascript) qui nous donnera plus de détails

Salut

Si tu souhaite récupérer les données d'un autre site vers ton site, il faut que celui ci t'y autorise et qu'il créé une API te permettant de communiquer avec lui, via un webservice par exemple.