Bonjour,

Dans ta fonction auto invoqué, je dirais naïvement de remplacé la ligne

exemple.init()

par

 window.onload = exemple.init()

Cependant :

window.addEventListener('load', function(event)

s'en charge déjà, alors peut-être y'a t-il un soucis coté de la structure HTML, une typo, pas de balises h1 , le script n'est pas chargé ?

Que dis l'inspecteur de ton navigateur ?

Cdt

Et comment est ce que je pourrais régler ce problème ??

Bonjour,
Je n'arrive pas à updater une variable déclarée au préalable.

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if( session_id()=='' ){ session_start(); }
//if (isset($_SESSION['id']) AND isset($_SESSION['pseudo']))
//{
//session_start();
// connexion a la bdd
require_once 'config.php';
/* Initialisation de la variable avatar*/
$avatar= "/avatars/0001.png";
$pdostat = $bdd->prepare('UPDATE membres SET avatar = :avatar WHERE id = :id');
$pdostat->bindValue(':avatar', $avatar, PDO::PARAM_STR);
$pdostat->bindValue(':pseudo', $pseudo, PDO::PARAM_STR);
$pdostat->execute(array(
'avatar' => $avatar,
'id' => $id));
$_SESSION['avatar'] = $avatar;
header('page_test.html');
exit;
?>

Undefined variable: id in C:\wamp64\www\register_av0001.php on line 15
Modifié par _laurent (03 Aug 2021 - 01:42)

Bonjour,

je viens juste de tester ton script dans codepen et il fonctionne. Tu as probablement un soucis avec le moment ou le script est appliqué et le moment ou la page est complétement chargée.

Cdt

Bonjour,

L'idéal serait de t'appuyer sur un autre type de carrousel , tout d'abord compatible avec les dernières version de bootstrap si tu souhaites en faire usage ailleurs sur la page, puis pour des raisons de compatibilité de structure et la chevelure de celui qui va s'y coller .

A partir de ton code, il faudrait imbriquer 2 carrousels, l'un qui déplace tes block de 4 et un second (qui se déclenche sur les petits écran) qui déplacent individuellement les éléments de tes block un par en synchronisant ces block pour qu'il s'affichent chacun leur tour lorsque leur enfants ont fait un tour ... Bref , c'est pas la meilleur méthode, le mieux est de faire un script maison, cela économisera beaucoup de temps.

NeSo a écrit :


Bonjour Merci de ta proposition..
Je viens de tenter avec $(window.parent.document).height() mais je ne parviens pas a récupérer la hauteur.. c'est a s'arracher les cheveux xD
Je ne parviens vraiment pas a trouver une autre solution me permettant de charger cette boutique au click..

En fait window.parent n'a de sens qu'a partir de la page dans l'iframe.

en gros, l'idée serait d'avoir dans la page injectée dans l'iframe un script du style:

<script>
window.onload = function() {
let bH = document.documentElement.scrollHeight;
let iFr =  window.parent.document.querySelector("#iFrame");         
iFr.style.height =bH + "px"; 
}
</script>

avec un iframe(ou object) avec une id="iFrame" pour afficher cette autre page avec le script dans ton iframe ou object.

si les deux pages sont sur le même serveur/ndd , il y a des chances que cela fonctionne.

Cdt
Modifié par gcyrillus (02 Aug 2021 - 22:53)

Bonjour Felipe, merci beaucoup de m'avoir répondu.
Trop compliqué pour moi, mais j'ai trouvé une parade: d-none d-sm-block (container masqué sur mobile) et d-block d-sm-none (container uniquement pour les mobiles). Tant pis pour le référencement.

Bonjour,

chaque élément .row est indépendant des autres : c'est un flex container et chacun de ses enfants interagit avec les autres enfants de cet élément .row -là, pas avec ceux des autres .row !
Idem avec une grille qui utiliserait Grid layout : tu ne pourras pas panacher les grid items de 2 grid container comme tu le souhaites (par contre tu pourras faire bien d'autres choses qui pourraient ou non convenir ici...).

Ici, si tu as disons .row > A puis .row > B et C puis .row > D et E,
ceci est possible :
(A) (B C) (D E)
(A) (D E) (B C)
mais ceci n'est pas possible :
(A) B D C E
(A) B D E C

Je ne crois pas que .row soit limité à 1 ligne de 12 max, tu peux coller tous tes éléments dans le même (enfin peut-être pas tous mais tu peux réunir 2 ou 3 .row ensemble).
edit: ce que je veux dire par là, c'est qu'un seul .row peut avoir 9 éléments .col-sm-4 et 4*9 = 36 soit 3 lignes puisque BS est une grille de 12.
C'était foireux avec BS2 du temps des flottants, mais plus avec BS4 avec Flexbox. Par contre à voir déjà si ce que tu veux faire est possible (sans crobards, aucune idée) et ensuite si la grille BS empêche le comportement des flex items qui tiennent à prendre tout le restant de place ou à passer à la ligne quand la précédente est encombrée (je dirais que oui mais pas testé).

Note : réordonner des blocs d'une ligne à l'autre va poser des problèmes d'accessibilité : l'ordre du DOM n'a plus de sens par rapport à ce qui est affiché à l'écran et un.e utilisateurice du clavier va se faire balader d'un bloc à l'autre de la page.
Ceci dit, si tu veux réordonner librement des blocs, qu'ils peuvent avoir tous le même parent alors Grid layout te laisse 1/ définir une grille assez simplement 2/ placer tes éléments dedans de pas mal de façons différentes ("colonne 3 ligne 1" et/ou grid-area etc) et réordonner pareil que Flexbox.
Modifié par Felipe (02 Aug 2021 - 18:33)

gcyrillus a écrit :
Bonjour,

Problème à mon avis insoluble avec object, avec un iframe, il y a peut-être un truc avec window.parent pour transmettre a la fenêtre parente la hauteur de body (de la page dans iframe) pour ensuite l'appliquer a ton iframe. Enfin , il faut que ta page et que l'iframe soit sur le même domaine pour qu'il y est une chance que cela fonctione.

Peut-être devrais tu regarder du coté de AJAX pour inclure ces contenus dans un div , si javaScript et styles de cette autre page ne se télescopent pas avec ta page actuelle.

Cdt

Bonjour Merci de ta proposition..
Je viens de tenter avec $(window.parent.document).height() mais je ne parviens pas a récupérer la hauteur.. c'est a s'arracher les cheveux xD
Je ne parviens vraiment pas a trouver une autre solution me permettant de charger cette boutique au click..

Bonjour,
je fais actuellement une formation développeur web.
j'ai vu les fonctions anonymes. Mon code fonctionne très bien mais pour une raison que j'ignore, quand j'ajoute (function() {mon code}) () plus rien ne fonctionne.

(function() {
    var exemple = {
        init: function() {
            window.addEventListener('load', function(event) {
                var element = document.getElementsByTagName('h1')[0]
                element.addEventListener('mousedown', function(event) {
                    this.style.color = 'blue'
                })
                element.addEventListener('mouseup', function(event) {
                    this.style.color = 'red'
                })
            })
        }
    }
    exemple.init()
})()

Bonjour,

Merci de votre réponse, malheureusement a cause de l'importation la div en question ne prends pas automatiquement la hauteur de la page importée.
Probablement parce que la page prend un temps avant de se charger et la hauteur de la page varie selon le nombre d'article.. ( voici la page en question importée dans une div https://www.marksports.eu/clubs-partenaires/rfcliege.html )

J'ai tenté en jquery de mettre le height a 100% après le chargement de cette page mais cela ne fonctionne pas car la div devient toute petite..

J'aurai imagé qu'a l'importation de la page il était possible d'afficher la hauteur dans le dom pour la récupérer et l'appliquer...

Je constate que pour afficher la boutique ECWID utilise

<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?22671038&data_platform=code" charset="utf-8"></script>
			<script type="text/javascript"> xProductBrowser("id=my-store-22671038", "defaultCategoryId=51984084", "categoriesPerRow=3","views=grid(5,3) list(60) table(60)");</script>

Est-ce peut être possible de lancer ce script au click dans la div "resultat"?

merciiiii d'avance

Bonjour,

Problème à mon avis insoluble avec object, avec un iframe, il y a peut-être un truc avec window.parent pour transmettre a la fenêtre parente la hauteur de body (de la page dans iframe) pour ensuite l'appliquer a ton iframe. Enfin , il faut que ta page et que l'iframe soit sur le même domaine pour qu'il y est une chance que cela fonctione.

Peut-être devrais tu regarder du coté de AJAX pour inclure ces contenus dans un div , si javaScript et styles de cette autre page ne se télescopent pas avec ta page actuelle.

Cdt
Modifié par gcyrillus (02 Aug 2021 - 16:44)

	  <section>
		 <div class="container">
			<div class="row">
			   <div class="col-sm-4 offset-sm-1 order-1">
				  <h1>BRANDING SERVICES</h1>
			   </div>
			</div>
			<div class="row mt-3">
			   <div class="col-sm-4 offset-sm-1 order-sm-2 order-2">
				  <h3>OUR ADVANTAGE<br><span style="text-transform:capitalize">Powerful Simplicity</span></h3>
			   </div>
			   <div class="col-sm-4 offset-sm-1 order-sm-5 order-3">
				  <h5>Pre-Opening</h5>
				  <p>Our targets: Build up a firm foundation for your hotel brand to ensure business purposes</p>
			   </div>
			</div>
			<div class="row mt-3">
				   <div class="col-sm-4 offset-sm-1 order-sm-3 order-4">
					  <p>The greatest brands make life simple. By simplifying customer experience in a complex world, we help your brand win customer loyalty, which drives business results and creates lifelong value.</p>
				   </div>
				   <div class="col-sm-4 offset-sm-1 order-sm-6 order-5">
					  <p>Brand strategy<br>Brand identity &amp; application: stationery, signage system, OS&amp;E&hellip;</p>
					  <p>Photography<br>Website: construction, SEO&hellip;<br>Brochure &amp; leaflet<br>Pre-opening campaign</p>
				   </div>
			</div>
			<div class="row mt-3">
					   <div class="col-sm-4 offset-sm-1 order-sm-4 order-6">
						  <h5>Local understanding</h5>
						  <p>We learn the region’s languages and meet the local across the region to learn from its cultures – which helps your business obtain the most advantageous factor of creating a successful brand in the hospitality industry.</p>
						  <h5>Global standard</h5>
						  <p>With many years experience in the field of brand development in many countries around the world, we help your brand succeed like we helped other brands have succeeded before.</p>
					   </div>
					   <div class="col-sm-4 offset-sm-1 order-sm-7 order-7">
						  <h5>Opening</h5>
						  <p>Our targets: Ensure a grand opening that captures the attention of the public and the media<br>Opening communication<br>Opening event</p>
						  <h5>Operation</h5>
						  <p>Keep your hotel brand present in the media and control the brand image<br>Website management<br>Social media management<br>Branding communications campaign<br>Promotion campaigns</p>
					   </div>
				</div>
		 </div>
	  </section>

Bonjour. Sur Bootstrap 4, je ne parviens pas à classer les éléments de la première colonne les uns à la suite des autres sur mobile. Lorsque je redimensionne ma fenêtre de navigateur en mode mobile, le order-sm-5 (Pre-Opening…) se retrouve toujours en 3ème position au lieu de la 5ème. Avez-vous une idée ?

Hello,

Je ne suis pas certain d'avoir tout compris mais j'ai du mal à voir comment on peut récupérer la hauteur d'une div si elle n'est pas affiché dans le DOM. Et pourquoi vouloir récupérer la hauteur de la page ? Dans quel but ? Pourquoi la div en question ne prendrait pas automatiquement la hauteur de la page importée ? Cela devrait se faire je pense....

Bonjour à tous et à toutes,

J'ai récupéré un carrousel de produits sur CodePen pour le modifier en carrousel d’événements et le mettre sur mon site.
Ce carrousel est sur Bootstrap 3 mais c'est ce que je recherchais (c'est une contrainte que j'ai, mais c'est trop long à expliquer)
Il y a 12 éléments et, sur ordinateur, ils sont par groupe de 4 et sont alignés.

Mon problème se situe sur mobile. En effet, sur mobile, les éléments sont toujours par groupe de 4 mais les uns au-dessus des autres, or je souhaiterais qu'ils apparaissent 1 par 1.

Comment faire SVP ?

Je pense que le problème vient de la structure HTML car quand j'enlève le CSS le problème demeure.
Le truc c'est que j'ai peur de casser tel que c'est sur ordinateur (et qui me va très bien) en voulant régler le problème sur mobile.

J'ai essayé de mettre "col-xs-12 col-md-3" pour que chaque élément prenne toute la largeur de l'écran à la place de "col-md-3" (tout court), mais ça ne change rien, les éléments sont toujours empilés sur mobile.

Voici le CodePen si ça vous intéresse de vous pencher sur mon cas.

En tout cas, merci par avance pour vos réponses

Bonne journée

Oui oui, tout cela marche mais pourquoi prendre le risque d'un GET avec ses failles, tu peux directement faire un POST
et à l'entrée du PHP qui reçoit tu fait :

<?PHP
$mavariable1= (isset($_POST['mavar1'])) ? $_POST['mavar1'] : ' ';
$mavariable2= (isset($_POST['mavar2'])) ? $_POST['mavar2'] : ' ';
/* puis par des echo tu rempli ton formulaire
tu peut mettre en prime un javascript qui valide ton FORM ! */
?>

Bonjour, j'aimerais limiter le nombre maximum de caractère utilisables. Pour cela j'ai fais quelques essaie peu concluant. Je viens donc solliciter votre aide. Comment faire pour que ma fonction (fonctionnelle) ne s'applique que lorsque il y a moins de 10 caractères dans la variable result ? Merci d'avance pour votre aide.

Voici mon code JavaScript et HTML :

const buttons = document.querySelectorAll(".btn")
const result = document.getElementById("result")

buttons.forEach((button) => {
    button.addEventListener("click", (e) => {
        if (result.value.length < 10) {
            result.textContent += e.target.value
        }else{}
    })
})

        <div class="calculator">
            <h3 id="result"></h3>
            <button class="btn" id="nine" value="9">9</button>
            <button class="btn" id="eight" value="8">8</button>
            <button class="btn" id="seven" value="7">7</button>
            <button class="btn" id="six" value="6">6</button>
            <button class="btn" id="five" value="5">5</button>
            <button class="btn" id="four" value="4">4</button>
            <button class="btn" id="three" value="3">3</button>
            <button class="btn" id="two" value="2">2</button>
            <button class="btn" id="one" value="1">1</button>
            <button class="btn" id="zero" value="0">0</button>
            <button class="btn" id="dot" value=".">.</button>
            <button class="btn" id="plus" value="+">+</button>
            <button class="btn" id="minus" value="-">-</button>
            <button class="btn" id="times" value="*">*</button>
            <button class="btn" id="div" value="/">/</button>
            <button class="btn" id="clear">C</button>
            <button class="btn" id="equal">=</button>
            <button class="btn" id="parenthesis-1" value="(">(</button>
            <button class="btn" id="parenthesis-2" value=")">)</button>
        </div>

Bonjour tout le monde,

Je me permets de vous écrire car j'ai une demande un peu spéciale et je m'arrache légèrement les cheveux. Je vous explique :

Au click j'importe une page HTML ( un boutique contenant différent produit qui se charge au lancement ) avec la fonction :

 $("#resultat").html('<object data=\"clubs-partenaires/rfcliege.html\">'); 

Jusque la tout va bien, cependant je souhaiterais que la div "resultat" change de height pour avoir la dimension de la page importée une fois chargée. Malheureusement je ne parviens pas a récupérer la hauteur de ma page étant donné que celle ci est importée. j'ai essayé de récupérer un élément inscrit sur la page importée mais impossible également.

Concrètement est-ce possible dans mon index.html en jquery au click de récupérer des informations ( valeur d'une div, etc ) de ma page rfcliege.html ? Si oui comment?

Dans l'attente de votre réponse,
je vous souhaite une excellente journée.

Bien à vous,
NeSo

Merci de ta réponse
Une fonction js est une variable comme une autre (et pas une constante) et peut donc être réassignée.
Je suis d’accord qu’avoir 2 fois le même nom de fonction n’est pas une bonne pratique mais je suis devant un dilemme : j’avais fait deux fonctions (diapo et slide) mais mon utilisateur trouve que c’est trop compliqué. La deuxième fonction diapo fait donc un appel à slide, ce qui lui plaît bien.
quand j’aurai stabilisé tout ça je ferai quelque chose de plus propre.

Hello

c'est normal, tu as un <div> qui est sans cesse sur ton curseur (classe="mouse") et du coup tu clic UNIQUEMENT sur cette div, et pas sur l’élément visuel que tu penses avoir cliqué.

Cette div est là tout le temps au mouvement de la soucis donc tu clic dessus, et par sur les élements, donc il se passe rien.

il faut revoir ta conception pour les couleurs de ton curseur.
Modifié par JENCAL (30 Jul 2021 - 14:14)

Hello

Je pense que tu ne trouveras pas de réponses concernant le JEE ici

Les fichiers sont exécutés dans l'ordre.

Par contre le fait d'avoir 2 fonctions avec le même nom sur deux fichiers différents c'est pas bon. Dans l'absolue il faut faut faire soit des classes, soit factorisé.

Ca fonctionne incroyablement bien, j'avais peur que personne ne comprenne ma problématique mais tu t'es penché dessus et tu m'as retiré une épine du pied, merci beaucoup. Plus j'en apprends sur les grids, plus je les apprécie !

Bonne continuation et encore merci, sujet résolu !

Olivier C a écrit :
Bonsoir. Je ne sais pas si cela correspond à votre recherche mais vous devriez peut-être regarder du côté de la méthode AJAX. Une précision : il faut que le fichier php soit sur le même serveur que celui de la page qui appelle le script.

Ah merci. Je vais regarder de ce côté.

Bonsoir. Je ne sais pas si cela correspond à votre recherche mais vous devriez peut-être regarder du côté de la méthode AJAX. Une précision : il faut que le fichier php soit sur le même serveur que celui de la page qui appelle le script.

top

_laurent a écrit :

Pour le coup le "hors de vue" ou le "padding" ou le "zindex" ne sont pas dans l'animation, ils sont juste la pour faire disparaitre l'élément comme un display une fois l'animation opacity finie. Tu n'as pas du regarder l'exemple ou alors tu as mal compris

J'avais bien compris.

_laurent a écrit :
Non ca fait un peu bricolage effectivement...

body#index div#DIVguestBookingWarning {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}

body#index div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_recto 1s linear forwards paused;
	animation: DIVguestBookingWarning_verso 1s linear forwards running;
}

body#index div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_verso 1s linear forwards paused;
	animation: DIVguestBookingWarning_recto 1s linear forwards running;
}

T'as pas l'impression d'avoir eu la main lourde sur les animations ?

Oui après coup. Pour l'animation de l'état d'origine c'était juste un oubli de ma part. Je l'ai supprimé entre temps.

_laurent a écrit :
Déjà quand tu en mets deux l'une après l'autre il n'y a que la dernière qui est prise en compte comme si tu faisais :

div {
    color: blue;
    color: red;
}

Du coup je ne vois pas ce que tu veux faire avec le play-state vu que la premiere ligne en paused n'est jamais active...

Du coup oui j'ai corrigé.

_laurent a écrit :
Ensuite ca ne sert a rien de mettre une animation dans l'état par défaut pour exactement les meme raison (écrasé pas l'animation de la classe)...

Oui comme dit plus haut c'était un oubli bête.

_laurent a écrit :
Pour ton état de départ que tu fais sauter en Js tu peux passer par une troisième classe, donc il faudrait que ca ressemble à ca :

#DIVguestBookingWarning {
	/* CSS de l'état de base hors opacity et display */
}
#DIVguestBookingWarning.hide{
	/* juste l'état de début, pas d'animation donc il n'y en aura pas au chargement */
}
body#index div#DIVguestBookingWarning.visible {
	/* animation qui fait apparaitre */
	animation: DIVguestBookingWarning_recto 1s linear forwards running;
}
body#index div#DIVguestBookingWarning.hidden {
	/* Animation qui cache */
	animation: DIVguestBookingWarning_verso 1s linear forwards running;
}

https://jsfiddle.net/ax9Ls8kf/1/

Bonne soirée

Bon pas besoin de 3ème classe. J'ai corrigé et ça fonctionne. Je vais quand même gardé l'action de Javascript sur le CSS car au final ça va me servir pour autre chose. Voici ce que ça donne :

body#index div#DIVguestBookingWarning {
	display: none;
	opacity: 0;
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border: solid 1vw rgba(0, 102, 102, 1);
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(255, 255, 255, 1);
	color: rgba(0, 102, 102, 1);
}

body#index div#DIVguestBookingWarning.hidden { animation: DIVguestBookingWarning_verso 1s linear forwards; }

body#index div#DIVguestBookingWarning.visible { animation: DIVguestBookingWarning_recto 1s linear forwards; }

@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

Bonne soirée.

Javaslip a écrit :
Oui mais du coup pour le hors de vue c'est pas l'effet que je recherche. Pour le padding j'ai déjà essayé et je trouve que ça fait pas propre au niveau de l'apparition. Et pour le z-index, j'ai peur par la suite de m'y perdre si je me retrouve avec plusieurs couches.

Pour le coup le "hors de vue" ou le "padding" ou le "zindex" ne sont pas dans l'animation, ils sont juste la pour faire disparaitre l'élément comme un display une fois l'animation opacity finie. Tu n'as pas du regarder l'exemple ou alors tu as mal compris

Javaslip a écrit :
Pas la peine que je me prenne la tête avec les transitions à partir du moment où il me faut absolument la propriété display.

Pourquoi ça par curiosité ? Parceque faut avoir une raison béton pour s'embêter garder les display dans les animations...

Javaslip a écrit :
Lorsque l'utilisateur arrivait pour la première fois sur la page ou rechargeait celle-ci, l'animation verso se jouait et du coup on voyait la div disparaître mais bien visible tout d'abord. Du coup pour régler ce problème, j'ai bidouillé un truc, j'ai ajouté un display none et un opacity 0 sur l'état d'origine de la div, que j'enlève avec Javascript lorsque l'utilisateur clique pour la première fois sur le lien. Après je ne sais pas si ma méthode est réglo mais maintenant ça fonctionne.

Non ca fait un peu bricolage effectivement...

body#index div#DIVguestBookingWarning {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}

body#index div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_recto 1s linear forwards paused;
	animation: DIVguestBookingWarning_verso 1s linear forwards running;
}

body#index div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_verso 1s linear forwards paused;
	animation: DIVguestBookingWarning_recto 1s linear forwards running;
}

T'as pas l'impression d'avoir eu la main lourde sur les animations ?

Déjà quand tu en mets deux l'une après l'autre il n'y a que la dernière qui est prise en compte comme si tu faisais :

div {
    color: blue;
    color: red;
}

Du coup je ne vois pas ce que tu veux faire avec le play-state vu que la premiere ligne en paused n'est jamais active...

Ensuite ca ne sert a rien de mettre une animation dans l'état par défaut pour exactement les meme raison (écrasé pas l'animation de la classe)... Pour ton état de départ que tu fais sauter en Js tu peux passer par une troisième classe, donc il faudrait que ca ressemble à ca :

#DIVguestBookingWarning {
	/* CSS de l'état de base hors opacity et display */
}
#DIVguestBookingWarning.hide{
	/* juste l'état de début, pas d'animation donc il n'y en aura pas au chargement */
}
body#index div#DIVguestBookingWarning.visible {
	/* animation qui fait apparaitre */
	animation: DIVguestBookingWarning_recto 1s linear forwards running;
}
body#index div#DIVguestBookingWarning.hidden {
	/* Animation qui cache */
	animation: DIVguestBookingWarning_verso 1s linear forwards running;
}

https://jsfiddle.net/ax9Ls8kf/1/

Bonne soirée

Javaslip a écrit :

mais pourquoi, encore aujourd'hui, la propriété display n'est toujours pas pris en charge par les transitions ?

C'est un problème de logique. Il faut pouvoir calcul des états intermédiaires. Les transitions ne peuvent se calculer qu'entre des valeurs numériques. C'est quoi l'intermédiaire entre oui et non (none) ?

Bonjour,

Est-il possible avec Javascript d'inclure un fichier PHP externe dans une page courante au cours d'un script ? Un peu à la manière d'un include de PHP. Par exemple au cours d'un condition Javascript, si j'ai besoin d'afficher un bout de code PHP pour modifier la page courante, j'appelle ce bout de code PHP situé dans un fichier externe. Je n'arrive pas à trouver la méthode malgré mes recherches sur Google...

_laurent a écrit :
Salut Javaslip,

Compliqué de passer par des animations juste pour un opacity. J'imagine que tu as buté sur les transitions couplées au display none ! Normal.

Exactement ! C'est une vraie merde de vouloir associer les propriétés display et opacity avec des transitions... mais pourquoi, encore aujourd'hui, la propriété display n'est toujours pas pris en charge par les transitions ? C'est à n'y rien comprendre. Surtout que cela fait des années que je vois ce type de problème revenir régulièrement sur le devant de la scène.

_laurent a écrit :
Avant de commencer ton animation à l'air d'etre montée a l'envers... j'imagine qu'au début on a pas la classe "visible" et qu'on est dons en opacity:0 et display: none.

C'est ça.

_laurent a écrit :
A l'apparition on fire DIVguestBookingWarning_recto qui le fait apparaitre doucement puis disparaitre d'un coup à la fin de l'animatio (état par défaut).

Tout à fait.

_laurent a écrit :
En ajoutant la classe "visible" on fire l'animation DIVguestBookingWarning_verso qui fait passer de block/opacity 1 à none/opacity 0 alors qu'on y était déjà ! Et ensuite le bouton prend le style par défaut de visible soit block/opacity 1 du coup ca clignote, on dirait Noel, c'est joli, mais je pense que c'est pas ce que tu veux

Non effectivement.

_laurent a écrit :
Bon sinon pour rester dans ton exemple avec les animations il faudrait que ton anim de retour se fasse sur une seconde classe plutôt que sur l'état principal sinon quand tu enlève la classe "visible" rien ne va lancer l'animation qui était déjà la. En plus de ca pour éviter de faire tout buguer on vire les état de display par défaut pour mettre du animation-fill-mode: forwards; qui va garder l'état de la dernière frame de l'animation. Je sais pas si c'est safe de faire ça mais bon... a voir :

div#DIVguestBookingWarning {
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	
}



div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_recto 1s linear forwards;
}
@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}
@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

https://jsfiddle.net/yqLmt6jn/

Oui du coup je me suis lancé sur 2 classes.

_laurent a écrit :
Et enfin en bonus la variante avec une transition :

div#DIVguestBookingWarning {
	opacity: 0;
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	transition: opacity 1s linear;
}

div#DIVguestBookingWarning.visible {
	opacity: 1;
}

Pas la peine que je me prenne la tête avec les transitions à partir du moment où il me faut absolument la propriété display.

_laurent a écrit :
Et si jamais ca te pose soucis qu'il soit juste en opacity en plein milieu tu as plusieurs solutions :
- mettre un z-index négatif pour qu'il passe derrière tout le reste
- mettre son padding, max-width a 0 par exemple
- l'envoyer hors de vue (top -100vw par exemple)

Oui mais du coup pour le hors de vue c'est pas l'effet que je recherche. Pour le padding j'ai déjà essayé et je trouve que ça fait pas propre au niveau de l'apparition. Et pour le z-index, j'ai peur par la suite de m'y perdre si je me retrouve avec plusieurs couches.

_laurent a écrit :
Pour les deux derniers points il faut tricker un peu pour éviter qu'au retour ca disparaisse d'un coup (overidder l'animation avec un délai de 1s au retour pour laisser l'opacity faire son taff)... je le mets ici parce que c'était fun mais bon c'est ptetre pas le top, à toi de voir

div#DIVguestBookingWarning {
	opacity: 0;
	position: absolute;
	top: -19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	transition: opacity 1s linear, top 0s linear 1s;
}

div#DIVguestBookingWarning.visible {
	opacity: 1;
	top: 19vw;
	transition: opacity 1s linear, top 0s linear 0s;
}

https://jsfiddle.net/90f15uch/1/

Bonne nuit !

Bon déjà je te remercie pour ce roman. Du coup en reprenant l'idée des 2 classes voici ce que cela donne :

body#index div#DIVguestBookingWarning {
	display: none;
	opacity: 0;
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	animation: DIVguestBookingWarning_verso 1s linear forwards;
	
}

body#index div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_recto 1s linear forwards paused;
	animation: DIVguestBookingWarning_verso 1s linear forwards running;
}

body#index div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_verso 1s linear forwards paused;
	animation: DIVguestBookingWarning_recto 1s linear forwards running;
}

@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

En fait j'ai repris ton idée du fill-mode et j'y ai ajouté l'option play-state. Arrivée à ce stade tout fonctionnait sauf sur un petit détail. Lorsque l'utilisateur arrivait pour la première fois sur la page ou rechargeait celle-ci, l'animation verso se jouait et du coup on voyait la div disparaître mais bien visible tout d'abord. Du coup pour régler ce problème, j'ai bidouillé un truc, j'ai ajouté un display none et un opacity 0 sur l'état d'origine de la div, que j'enlève avec Javascript lorsque l'utilisateur clique pour la première fois sur le lien. Après je ne sais pas si ma méthode est réglo mais maintenant ça fonctionne. Merci pour ton aide.

Merci de toutes ces précisions et du lien. Il ne me reste plus qu'à me retrousser les manches !
Je marque le sujet comme résolu.

Effectivement, la structure s'est rempli depuis la derniere fois,

Dans ce cas :

.wp-block-ub-content-filter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1em;
  max-width: 1100px;
  margin: auto;
}
.ub-content-filter-category {
    text-align: center;
    grid-column: 1 / -1;
}
.ub-content-filter-panel {
  display: contents;
}

Pourrait te convenir, cela revient a faire disparaitre virtuellement les conteneurs ub-content-filter-panel pour que leurs enfants soit tous adjacents/frères.

Il y aura peut-être subgrid bientôt : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid mais ça bugue encore dans Firefox le seul pour le moment supposé l'implémenter.

Cdt
Modifié par gcyrillus (29 Jul 2021 - 16:43)

Up : Je pensais que le problème était résolu, mais en fait non ! Avec ta solution, chacun de mes conteneurs ".ub-content-filter-panel" sont mis en place dans un seul emplacement de grille car tu as appliqué les réglages à ".wp-block-ub-content-filter". Pour clarifier un peu ce que je veux, voici un petit schéma légendé :


La problématique : je veux pouvoir insérer le nombre de blocs jaunes que je veux, et que la taille des conteneurs s'adapte pour qu'ils puissent se suivre comme sur mon exemple ci-dessus.

Je ne peux pas changer la structure HTML de mon document, elle est due à un plugin.

Je ne pourrais pas t'aider pour tes envois en local.

Pour free, l'envoi de mail en utilisant une adresse différente de celle de l’hébergement n'est pas fiable, en utilisant celle de l’hébergement, si elle fait partie des contacts de celui qui reçoit et qu'elle n'est pas filtré par défaut comme spam par ton fournisseur, c'est relativement fiable pour des envois ponctuels. Perso, j'avais pris l'habitude de faire une copie sur le serveur en même temps que l'envoie d'un mail. . Il faut penser à vérifier de temps à autres. Mais bon, on sort de ton sujet, tu as tester et cela à fonctionné au moins une fois

Ce sujet sur un autre forum peut peut-être te donner quelques infos avec Lamp en local : https://forum.pluxml.org/discussion/6328/resolu-envoie-de-mail-en-local-lamp

Cdt
Modifié par gcyrillus (29 Jul 2021 - 16:15)

Si, si, j'ai bien reçu un mail de 'kej-mesk@parkallann.bzh' pour 'xxx@wanadoo.fr' ! mais, comme je l'ai dit plus haut, ça n'a marché qu'une fois.

Quant à mon serveur à la maison, c'est un système LAMP classique (je suis sous linux Mint).

Cdt

En fait si le mail porte une adresse différente de celle rattachée au site, elle passe à la trappe comme du spam ou bien bloquépar free (car elle ne correspond pas au compte d'où est parti le mail tout simplement)

C'est aussi un défaut des mail free, beaucoup sont vu comme du spam car il y a toujours des malins qui arrivent à créer des adresses mail chez free uniquement à des fin qui ne sont pas honorables .

Pour l'envoi de mail à partir de ton serveur, il faut déjà savoir si c'est possible.
Quel serveur utilises tu? (Xampp, wampp,laragon, autres, ...)
As tu la doc qui va avec?
A partir de la tu peut commencer à chercher des tutoriels et voir si ta config logiciel et matériel le permet.

Comme le dit Laurent, c'est pas simple et il n'y a pas de recette universelle.
Cdt

Bonjour et Merci à vous deux !

En fait, j'ai une version minimale du site sur free que je développe plus complètement en localhost dans le but de m'autohéberger quand je serai prêt. Mais effectivement, comme le dit Laurent, ça a l'air assez coton en localhost. Peux-tu me donner une piste de départ ?

Du coup j'ai rajouté la fonction d'envoi de mail sur le site de free. J'ai réussi à m'envoyer un mail (avec une adresse de from: et de to: dont aucune n'est chez free, Gcyrillus), mais bizarrement les tentatives suivantes ont échoué !?! Pour ceux que çà intéresse :c'est à l'adresse geriaoueg.free.fr. Attention, c'est en breton : on clique sur l'image courrier, on met un nom en haut, une adresse mail en-dessous, on tape un mot ou deux et on appui sur le bouton.

Bonjour,

Chez free c'est encore possible, mais limiter à environ 2000 mails par semaines (peut-être moins maintenant) et il n'est pas possible de faire de gros envois de mails grouper.

Les mails envoyer le sont avec l'adresse mail du compte trucmuche@free.fr pour trucmuche.free.fr .
Pour t'en convaincre, test un formulaire simple , regarde aussi ce phpinfo() te renvoi comme infos.

Il y a aussi la version de php qui peut fausser tes tests, sur free tu peut avoir tout au plus la version 5.6 en modifiant l'extension de tes pages php en php5(il me semble) ou en ajoutant un fichier htaccess à la racine du site. (Une petite recherche te donneras les infos).

En local, il va falloir te plonger dans la doc du système de ton serveur pour mettre en place tes envoi de mail, intéressant si tu as le temps et besoin de savoir le faire, si non tournes toi vers un autre hebergeur gratuit. En ce moment alwaysdata est pas mal.

Cdt,
GC

Salut,

Il me semble que c'est assez compliqué a mettre en place un envoie de mail en local via un smtp externe... enfin plus compliqué que de mettre son site en ligne sur un serveur pour tester Pourquoi ne pas juste le poser sur ton serveur pour tester d'ailleurs (quitte à le bloquer avec un petit mdp sans trop se prendre la tête) ?

Par contre pour les domaines free.fr ca fait une éééééééternité que j'en ai pas utilisé mais à l'époque (et la je vous parle d'un temps que les moins de 20 ans ne peuvent pas connaitre) les domaines free.fr ne pouvais pas envoyer de mail... je ne sais pas si ca a changé depuis.
Modifié par _laurent (29 Jul 2021 - 10:53)

Oooh merci ! Je pensais connaître grid mais il reste pas mal de petites propriétés que je ne connais pas, et qui sont bien pratiques !

Encore merci pour l'intérêt que tu as porté à mon problème
Modifié par Myrial (29 Jul 2021 - 15:57)

Bonjour,

En voulant rajouter la possibilité d'envoi de mail par l'utilisateur, je me suis rendu compte qu'aucun courrier ne partait... D'où ma question : en localhost, est-il possible d'envoyer des mails en installant un serveur de mails sachant que j'ai par ailleurs un nom de domaine chez free ?
Modifié par Titen (29 Jul 2021 - 09:37)

Salut Javaslip,

Compliqué de passer par des animations juste pour un opacity. J'imagine que tu as buté sur les transitions couplées au display none ! Normal.


Avant de commencer ton animation à l'air d'etre montée a l'envers... j'imagine qu'au début on a pas la classe "visible" et qu'on est dons en opacity:0 et display: none.
A l'apparition on fire DIVguestBookingWarning_recto qui le fait apparaitre doucement puis disparaitre d'un coup à la fin de l'animatio (état par défaut).
En ajoutant la classe "visible" on fire l'animation DIVguestBookingWarning_verso qui fait passer de block/opacity 1 à none/opacity 0 alors qu'on y était déjà ! Et ensuite le bouton prend le style par défaut de visible soit block/opacity 1 du coup ca clignote, on dirait Noel, c'est joli, mais je pense que c'est pas ce que tu veux


Bon sinon pour rester dans ton exemple avec les animations il faudrait que ton anim de retour se fasse sur une seconde classe plutôt que sur l'état principal sinon quand tu enlève la classe "visible" rien ne va lancer l'animation qui était déjà la. En plus de ca pour éviter de faire tout buguer on vire les état de display par défaut pour mettre du animation-fill-mode: forwards; qui va garder l'état de la dernière frame de l'animation. Je sais pas si c'est safe de faire ça mais bon... a voir :

div#DIVguestBookingWarning {
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	
}



div#DIVguestBookingWarning.visible {
	animation: DIVguestBookingWarning_recto 1s linear forwards;
}
@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

div#DIVguestBookingWarning.hidden {
	animation: DIVguestBookingWarning_verso 1s linear forwards;
}
@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

https://jsfiddle.net/yqLmt6jn/

Et enfin en bonus la variante avec une transition :

div#DIVguestBookingWarning {
	opacity: 0;
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	transition: opacity 1s linear;
}

div#DIVguestBookingWarning.visible {
	opacity: 1;
}

Et si jamais ca te pose soucis qu'il soit juste en opacity en plein milieu tu as plusieurs solutions :
- mettre un z-index négatif pour qu'il passe derrière tout le reste
- mettre son padding, max-width a 0 par exemple
- l'envoyer hors de vue (top -100vw par exemple)

Pour les deux derniers points il faut tricker un peu pour éviter qu'au retour ca disparaisse d'un coup (overidder l'animation avec un délai de 1s au retour pour laisser l'opacity faire son taff)... je le mets ici parce que c'était fun mais bon c'est ptetre pas le top, à toi de voir

div#DIVguestBookingWarning {
	opacity: 0;
	position: absolute;
	top: -19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	transition: opacity 1s linear, top 0s linear 1s;
}

div#DIVguestBookingWarning.visible {
	opacity: 1;
	top: 19vw;
	transition: opacity 1s linear, top 0s linear 0s;
}

https://jsfiddle.net/90f15uch/1/

Bonne nuit !
Modifié par _laurent (29 Jul 2021 - 03:12)

Bonjour,

J'ai un problème qui je le suis sûr va vous paraître bête et simple mais pourtant... je bloque dessus depuis un moment maintenant.

J'ai une div, qui au chargement de la page, est masqué. Je cherche à faire apparaître progressivement cette div, avec l'aide d'une animation, en cliquant sur un lien. Pour cela j'ajoute une classe à la div avec l'aide de Javascript. Dans ce sens tout va bien ça fonctionne.

En revanche, lorsque la classe est retirée de la div à l'aide de Javascript, j'aimerais que l'animation se déroule en sens inverse afin que celle-ci disparaisse progressivement. Et c'est là que je bloque. Impossible de faire disparaître progressivement la div en jouant sur le retrait de la classe.

body#index div#DIVguestBookingWarning {
	display: none;
	opacity: 0;
	position: absolute;
	top: 19vw;
	left: 28vw;
	max-width: 40vw;
	border-radius: 1vw;
	padding: 1vw;
	background-color: rgba(0, 102, 102, 1);
	color: rgba(255, 255, 255, 1);
	animation: DIVguestBookingWarning_recto 1s linear;
	
}

body#index div#DIVguestBookingWarning.visible {
	display: block;
	opacity: 1;
	animation: DIVguestBookingWarning_verso 1s linear;
}

@keyframes DIVguestBookingWarning_recto {
	from {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

@keyframes DIVguestBookingWarning_verso {
	from {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	to {
		display: none;
		opacity: 0;
	}
}

Bonjour,

Lorsque tu utilises grid, la configuration de la grille se fait à partir du parent, les enfants iront ensuite s'afficher dans les cellules de la grille que tu as définie.

Un exemple de ce que tu pourrais faire en partant du conteneur parent.

.wp-block-ub-content-filter {
    min-height: 50vh;
  /*ajout */
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
}

.ub-content-filter-category {
    text-align: center;
  /* ajout */
    grid-column: 1 / -1;
}

.ub-content-filter-panel {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
  /* retrait */
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;*/
}

grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); va donner une largeur minimale de cellule a 300px (a toi de voir si cette valeur est convenable) sans fixer un nombre de colonnes en réadaptant le nombre de ligne et de colonne de la grille en fonction de la largeur dispo et du nombre d'enfant.

grid-column: 1 / -1; l’élément est positioné dans la première colonne et traversera toute les colonnes pour occuper une ligne complète. (cela fonctionne aussi dans firefox maintenant).

Dans la section tutoriels, il y a plusieurs tutoriels qui t'expliqueront comment utiliser grid avec tout un tas de bon conseils.
Modifié par gcyrillus (28 Jul 2021 - 15:25)

Yordi a écrit :
Hello,

En réfléchissant à voix haute, est-ce qu'on ne pourrait pas faire quelque chose avec `clip-path`?

[HS] Il me semble qu'il y a quelques années (si je me souviens bien c'était lors d'une Kiwi Party (je devais être au 11ème rang, 6ème chaise et il devait être 9h42… enfin, je pense )), Bert Bos avait parlé qu'ils réfléchissaient au W3C à un `float: center`. Mais bon c'était encore au temps où on nos structures de site reposaient sur float… (je pense par contre que ça pourrait être intéressant dans certains designs).

Je pense que tu fais référence à https://drafts.csswg.org/css-exclusions-1/ , IE10/11 etaient à priori en mesure de faire quelque chose du genre https://docs.microsoft.com/fr-fr/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673558(v=vs.85)?redirectedfrom=MSDN , de memoire, les démos n'ont jamais fonctionner comme indiquer sur mon vieux PC. (c'etait du grid layout, float ne me dis rien )
Modifié par gcyrillus (28 Jul 2021 - 15:05)

Hello,

En réfléchissant à voix haute, est-ce qu'on ne pourrait pas faire quelque chose avec `clip-path`?

[HS] Il me semble qu'il y a quelques années (si je me souviens bien c'était lors d'une Kiwi Party (je devais être au 11ème rang, 6ème chaise et il devait être 9h42… enfin, je pense )), Bert Bos avait parlé qu'ils réfléchissaient au W3C à un `float: center`. Mais bon c'était encore au temps où on nos structures de site reposaient sur float… (je pense par contre que ça pourrait être intéressant dans certains designs).

Bonjour à tous
J'ai une page qui commence par

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
		<title>....</title>
		<script type="text/javascript" src="/common.js"></script>
		<script type="text/javascript" src="/slideshowSheet.js"></script>
		<link href="/common.css" rel="stylesheet" type="text/css">
		<link href="/slideshowSheet.css" rel="stylesheet" type="text/css">
	</head>

Dans /common.js on définit une fonction diapo() et dans /slideshowSheet.js on redéfinit cette fonction.
Au chargement, /common.js met 48ms à se charger et /slideshowSheet.js 16ms
Je constate (heureusement) que la fonction diapo() qui est exécutée est celle de /slideshowSheet.js bien que la fin du chargement soit antérieure à celle de /common.js

Ma question : est-il sûr qu'on ne risque pas ce ce soit le contraire ?

Noter que c'est la même chose pour les fichiers css correspondant, et là aussi il n'y a pas de problème

Merci de bien vouloir partager votre savoir à ce sujet.

Bonjour,

un élément flottant , par définition, ne peut pas être centrer. mais un élément qui a une largeur définie peut-être centrer s'il ne flotte pas .
Tu as peut le faire flotter qu'a partir d'une certaine largeur de page.
exemple

  #contenu-infos {
    width: 280px;
    margin: auto;
  }

@media screen and (min-width: 600px) {
  #contenu-infos {
    float: right;
    margin: 0px 0px 15px 15px;
  }

j'ai imaginé cette solution, ça marche mais je penses que mieux existe, je reste ouvert à toute propositions (:

const bars = document.querySelectorAll('#main-container textarea');
for (let i = 0; i < bars.length; i++) {
    let bs;
    bars[i].addEventListener('mousedown', (event) => {
        bs = event.target.offsetHeight;
    });
    bars[i].addEventListener('mouseup', (event) => {
        if (bs && event.target.offsetHeight != bs) {
            console.log('sizechanged');
        } else {
            bs = false;
        }
    });
}

Bonne soirée!