Salut Paul, merci pour ton retour ! Yes avec WordPress Smiley smile
Bonjour à tous
J'ai une table Calendar qui comprend différents types d'évènements, par exemple "concert" ou 'rehearsal'
Je cherche à retrouver le plus simplement possible la date du dernier concert et la date du prochain concert.
Je le fais actuellement en deux requêtes:
Y a-t-il un moyen de le faire en une seule requête ?
Merci de partager vos compétences.
J'ai une table Calendar qui comprend différents types d'évènements, par exemple "concert" ou 'rehearsal'
Je cherche à retrouver le plus simplement possible la date du dernier concert et la date du prochain concert.
Je le fais actuellement en deux requêtes:
SELECT MAX(DATE(startTime))
FROM Calendar
WHERE eventType LIKE '%concert%'
AND startTime < NOW();
SELECT MIN(DATE(startTime))
FROM Calendar
WHERE eventType LIKE '%concert%'
AND startTime > NOW();
Y a-t-il un moyen de le faire en une seule requête ?
Merci de partager vos compétences.
C'est bien la politique CSP qui bloque l'image. J'avais effectué des essais hier, mais pas assez à fond. C'est la déclaration img-src 'self'; qui pose un problème. Il y a moyen d'y remédier en ajoutant un domaine extérieur à cette commande, mais je n'ai pas réussi pour le moment. Je ne sais pas s'il faut ajouter que le domaine ou toute l'extension, avec l'image.
Pour le moment, j'ai enlevé cette commande de la CSP, mais je cherche comment ajouter le domaine de provenance du bouton.
Et l'article sur la CSP publié dans les actualités d'Alsacreations ne donne pas d'instructions à ce sujet précis.
Modifié par Bongota (11 Jul 2025 - 14:52)
Pour le moment, j'ai enlevé cette commande de la CSP, mais je cherche comment ajouter le domaine de provenance du bouton.
Et l'article sur la CSP publié dans les actualités d'Alsacreations ne donne pas d'instructions à ce sujet précis.
Modifié par Bongota (11 Jul 2025 - 14:52)
Salut,
tu as donc utilisé la même procédure que moi. On indique son site sur leur formulaire, un code html est généré et on copie ce code sur sa page. J'ai seulement ajouté une div et une class afin de bien placer l'image sur le pied de page.
Je dois avoir quelque chose qui traîne quelque part et qui empêche l'image de s'ouvrir, mais quoi ? Et j'ai bien vidé le cache des deux navigateurs sur lesquels j'ai testé l'image.
Je pourrais tenter de télécharger leur image et de la mettre sur mon espace, mais ce serait du bricolage et je ne sais pas s'ils vont aimer ça.
Modifié par Bongota (11 Jul 2025 - 12:42)
tu as donc utilisé la même procédure que moi. On indique son site sur leur formulaire, un code html est généré et on copie ce code sur sa page. J'ai seulement ajouté une div et une class afin de bien placer l'image sur le pied de page.
Je dois avoir quelque chose qui traîne quelque part et qui empêche l'image de s'ouvrir, mais quoi ? Et j'ai bien vidé le cache des deux navigateurs sur lesquels j'ai testé l'image.
Je pourrais tenter de télécharger leur image et de la mettre sur mon espace, mais ce serait du bricolage et je ne sais pas s'ils vont aimer ça.
Modifié par Bongota (11 Jul 2025 - 12:42)
salut
chez moi çà fonctionne en interne comme dans mon serveur
on voit le panneau de webwiki, j'ai rempli un commentaire de test
et mon htaccess est activé
chez moi çà fonctionne en interne comme dans mon serveur
on voit le panneau de webwiki, j'ai rempli un commentaire de test
et mon htaccess est activé
Bonjour,
je tente depuis plusieurs heures d'installer un petit bouton de satisfaction sur la page d'accueil de l'un de mes sites.
Ce bouton provient de https://www.webwiki.fr/info/webwiki-buttons.html
sur lequel j'ai inscrit mon site web.
L'image du bouton s'affiche en local, mais impossible de l'afficher à partir de mon hébergement. Seul le titre s'affiche, titre qui fait office de lien vers la page d'avis. Le lien fonctionne, mais sur l'hébergement, l'image du bouton ne s'affiche pas.
J'ai tout de suite regardé du côté de la CSP et de "img-src 'self'; qui n'autorise que des images venant du domaine du site. Je pensais avoir trouvé là la faille, l'image du bouton était sur un domaine différent. Rien à faire, même en enlevant complètement la CSP du htaccess, je n'ai toujours pas l'image affichée.
Voici le html du bouton, que l'on obtient à partir de leur site. Je l'ai mis dans une div afin de le placer correctement sur la page.
Pour le moment, le tire est affiché, mais ça ne fait pas très beau sur le site
je tente depuis plusieurs heures d'installer un petit bouton de satisfaction sur la page d'accueil de l'un de mes sites.
Ce bouton provient de https://www.webwiki.fr/info/webwiki-buttons.html
sur lequel j'ai inscrit mon site web.
L'image du bouton s'affiche en local, mais impossible de l'afficher à partir de mon hébergement. Seul le titre s'affiche, titre qui fait office de lien vers la page d'avis. Le lien fonctionne, mais sur l'hébergement, l'image du bouton ne s'affiche pas.
J'ai tout de suite regardé du côté de la CSP et de "img-src 'self'; qui n'autorise que des images venant du domaine du site. Je pensais avoir trouvé là la faille, l'image du bouton était sur un domaine différent. Rien à faire, même en enlevant complètement la CSP du htaccess, je n'ai toujours pas l'image affichée.
Voici le html du bouton, que l'on obtient à partir de leur site. Je l'ai mis dans une div afin de le placer correctement sur la page.
<div class="avis">
<a title="Avis clients de ecrisdroit.fr" href="https://www.webwiki.fr/ecrisdroit.fr"><img src="https://www.webwiki.fr/etc/rating/widget/385384929/ecrisdroit-fr-avis-full-180.png" alt="Avis clients de ecrisdroit.fr" /></a>
</div>
Pour le moment, le tire est affiché, mais ça ne fait pas très beau sur le site

Bonjour,
Une parenthèse pour un problème de positionnement dont j'ai déjà parlé et que je n'arrive pas à résoudre.
Il faut que ce soit RESPONSIVE.
div class="droite" doit être à droite à la même hauteur de div glass="gauche' s'il y a la place et en-dessous si pas la place.
Le plus simple me semble être de transformer div class="droite" en float: left.
Mais div class="droite" est le carrousel, pas de width en dur, et ça ne marche pas, le carrousel se déploie sous une seule colonne.
Autre piste j'ai essayé colums: 2 mais là encore ça ne marche pas.
J'ai créé un codepen qui présente les différents éléments.
Modifié par boteha_2 (11 Jul 2025 - 12:10)
Une parenthèse pour un problème de positionnement dont j'ai déjà parlé et que je n'arrive pas à résoudre.
Il faut que ce soit RESPONSIVE.
div class="droite" doit être à droite à la même hauteur de div glass="gauche' s'il y a la place et en-dessous si pas la place.
Le plus simple me semble être de transformer div class="droite" en float: left.
Mais div class="droite" est le carrousel, pas de width en dur, et ça ne marche pas, le carrousel se déploie sous une seule colonne.
Autre piste j'ai essayé colums: 2 mais là encore ça ne marche pas.
J'ai créé un codepen qui présente les différents éléments.
Modifié par boteha_2 (11 Jul 2025 - 12:10)
Bonjour gcyrillus,
Je ne saisis pas trop mais l'important est que le carrousel fonctionne bien, ce qui est le cas avec ton code et les paramètres actuels.
gcyrillus a écrit :
Lorsque tu passes en survol lentement d'une image à une autre, la première image apparaît brièvement Il y a parfois un gap entre la fin et le début des transitions au survol d'une image à une autre.
Je ne saisis pas trop mais l'important est que le carrousel fonctionne bien, ce qui est le cas avec ton code et les paramètres actuels.
boteha_2 a écrit :
Peux-tu expliquer en deux mots ?
:)
1. taille
2. images.
Lorsque tu passes en survol lentement d'une image à une autre, la première image apparaît brièvement Il y a parfois un gap entre la fin et le début des transitions au survol d'une image à une autre.
boteha_2 a écrit :
Je vais essayer de contourner le petit bug en passant par visibility au lieu d'opacity.
Cela fonctionne bien et le bogue de l'animation a disparu.
Codepen corrigé en conséquence.
"gcyrillus" a écrit :
Pour le "masquage des image, c'est dû à la différence de taille de la première image..
Peux-tu expliquer en deux mots ?
Bonjour,
C'est un casse-tête.
Cela ne vient pas du navigateur, même problème sur Firefox ou Chrome.
Cela ne devrait pas venir des écrans, j'en ai trois en Full HD.
Windows 10 ?
Ou ma carte graphique NVIDIA GetForce GT 730 ?
Yordi a écrit :
Tu as plus d'info à donner sur le fait que ça vienne de ton environnement ? Ce serait intéressant de savoir la cause.
C'est un casse-tête.
Cela ne vient pas du navigateur, même problème sur Firefox ou Chrome.
Cela ne devrait pas venir des écrans, j'en ai trois en Full HD.
Windows 10 ?
Ou ma carte graphique NVIDIA GetForce GT 730 ?
Bonjour gcyrillus,
Si je demande le mode DARK par Firefox cela n'a aucun effet sur le codepen.
Et dans le codepen je ne vois pas de bouton pour actionner le mode DARK.
Je vais essayer de contourner le petit bug en passant par visibility au lieu d'opacity.
Je vous tiens informés.
gcyrillus a écrit :
Pour le soucis thème light/dark , et l'effet :hover + webp , as tu un codepen qui met ces défauts en évidence. ?
Si je demande le mode DARK par Firefox cela n'a aucun effet sur le codepen.
Et dans le codepen je ne vois pas de bouton pour actionner le mode DARK.
Je vais essayer de contourner le petit bug en passant par visibility au lieu d'opacity.
Je vous tiens informés.
Bonjour,
Pour le "masquage des image, c'est dû à la différence de taille de la première image..
Pour le soucis thème light/dark , et l'effet :hover + webp , as tu un codepen qui met ces défauts en évidence. ? Peut-être est ce du a l'empilement ou d'une transition/animation ? là pour le moment je ne vois pas.
cdt,
Modifié par gcyrillus (08 Jul 2025 - 13:00)
Pour le "masquage des image, c'est dû à la différence de taille de la première image..
Pour le soucis thème light/dark , et l'effet :hover + webp , as tu un codepen qui met ces défauts en évidence. ? Peut-être est ce du a l'empilement ou d'une transition/animation ? là pour le moment je ne vois pas.
cdt,
Modifié par gcyrillus (08 Jul 2025 - 13:00)
Tu as plus d'info à donner sur le fait que ça vienne de ton environnement ? Ce serait intéressant de savoir la cause.
Par contre ça, c'est dingue!!
Discussion intéressante en tout cas
Par contre ça, c'est dingue!!
Raphael a écrit :
Aussi curieux que ça paraisse, la valeur "thin" semble plus stable que "1px", donc -> "outline: thin solid;"






Discussion intéressante en tout cas

Bonjour gcyrillus,
Ton carrousel CSS fonctionne très bien, très rapide.
J'ai adapté le code selon mes contraintes, un aperçu vite-fait dans le codepen.
Je pense que l'action au :focus ET au :hover est très sympa.
Superposition avec :hover, cela m'échappe un peu.
Étrange, en version DARK sous Firefox, les images superposées restant visibles, même en position: relative et background: white.
Il faut forcer le masquage des images, ce que j'ai fait avec ces déclarations :
J'ai voulu employer display: none au lieu de opacity: 0 mais cela fait tout casser.
J'ai pensé à visibility: hidden.
Sous Firefox et avec des images webp les déclarations ci-dessus provoquent un petit bogue de cette animation
L'image s'allume, puis s'éteint, puis se ré-allume si le pointeur est bougé.
As-tu une idée pour ce petit bogue que je n'ai pas reproduit avec Chrome ?
Modifié par boteha_2 (07 Jul 2025 - 23:06)
Ton carrousel CSS fonctionne très bien, très rapide.
J'ai adapté le code selon mes contraintes, un aperçu vite-fait dans le codepen.
Je pense que l'action au :focus ET au :hover est très sympa.
Superposition avec :hover, cela m'échappe un peu.
Étrange, en version DARK sous Firefox, les images superposées restant visibles, même en position: relative et background: white.
Il faut forcer le masquage des images, ce que j'ai fait avec ces déclarations :
.photos:has(img:nth-child(n+3):focus) > img.picture {opacity: 0}
.photos:has(img:nth-child(n+3):hover) > img.picture {opacity: 0}
.photos:has(img:first-child:hover) > img.picture {opacity: 1}
.photos:has(img[tabindex]:hover) > img:focus:not(:hover) + img {opacity: 0}
J'ai voulu employer display: none au lieu de opacity: 0 mais cela fait tout casser.
J'ai pensé à visibility: hidden.
Sous Firefox et avec des images webp les déclarations ci-dessus provoquent un petit bogue de cette animation
img {opacity: .75; transition: opacity .5s ease-in-out}
img:hover {opacity: 1}
L'image s'allume, puis s'éteint, puis se ré-allume si le pointeur est bougé.
As-tu une idée pour ce petit bogue que je n'ai pas reproduit avec Chrome ?
Modifié par boteha_2 (07 Jul 2025 - 23:06)
Salut, le site est super. J'adore le style.
Réalisé sur Wordpress ?
Modifié par Paul_web (07 Jul 2025 - 15:47)

Modifié par Paul_web (07 Jul 2025 - 15:47)
Bonjour,
Petite réécriture au passage avec l'API fetch et deux ou trois autres fioritures (asynchrone, try/catch, etc) :
Petite réécriture au passage avec l'API fetch et deux ou trois autres fioritures (asynchrone, try/catch, etc) :
/**
* Fonction asynchrone pour régénérer la base via un appel HTTP.
* Met à jour dynamiquement une <div> avec l'identifiant "le" pour afficher l'état d'avancement et la réponse du serveur.
*/
async function regenererBase() {
const div = document.getElementById('le')
// Affiche un message d'attente pendant que la requête est en cours
div.textContent = 'Travail actif ...'
try {
// Effectue une requête GET vers le script PHP
const response = await fetch('smala_dvd_py.php')
// Vérifie si la réponse est valide (code 200–299)
if (!response.ok) {
throw new Error(`Erreur serveur : ${response.status}`)
}
// Lit la réponse en tant que texte brut
const data = await response.text()
// Affiche le résultat dans la <div>, formaté en bloc <pre>
div.innerHTML = `<pre>${data}</pre>`
} catch (error) {
// Affiche une erreur si la requête a échoué
div.textContent = `Une erreur est survenue : ${error.message}`
}
}
Bonjour, que ne comprenez vous pas dans le code posté? Avez vous lu la doc MDN à ce sujet?
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest
>> Je crois proche de AXA ?
C'est de l' AJAX
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest
>> Je crois proche de AXA ?
C'est de l' AJAX
Bonjour,
Maitrisant moderement Javascript, qui aurait la patience de me d"ecrire ce code
Je crois proche de AXA ? mille mercis d'avance.
Bien sur le div ==> id="le" existes et est vide. mille mercis d'avance
Modifié par Fox-infograp (06 Jul 2025 - 07:15)
Maitrisant moderement Javascript, qui aurait la patience de me d"ecrire ce code
Je crois proche de AXA ? mille mercis d'avance.
function regenererBase() {
const div = document.getElementById("le");
div.innerHTML = "Travail actif ...";
const xhr = new XMLHttpRequest();
xhr.open("GET", "smala_dvd_py.php", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
div.innerHTML = "<pre>" + xhr.responseText + "</pre>";
}
};
xhr.send();
}
Bien sur le div ==> id="le" existes et est vide. mille mercis d'avance
Modifié par Fox-infograp (06 Jul 2025 - 07:15)
Je vous partage le site de notre agence de communication, hâte d'avoir votre retour, n'hésitez pas à consulter notre portfolio
https://www.noirsurbleu.fr
Modifié par NoirsurBleu (05 Jul 2025 - 17:02)

Modifié par NoirsurBleu (05 Jul 2025 - 17:02)
Bonjour gcyrillus,
Cela m'a l'air excellent, je m'y mets au plus vite.
Encore merci.
Cela m'a l'air excellent, je m'y mets au plus vite.
Encore merci.
boteha_2 a écrit :
Bonjour gcyrillus,
Merci de ton suivi.
L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.
Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?
À ton avis quelle est la meilleure approche ?
:not() et :has() fonctionnent trés bien aujourd'hui

Mon premier exemple utilise un grid-layout et positionne la première(en position 2) grande image aussitôt dans la première cellule.
en y ajoutant :hover et le positionnement relatif, cela fonctionne.
Pour passer sur plusieurs lignes, c'est aussi quelque chose que grid sait faire:
https://codepen.io/gc-nomade/pen/ogXrzpY
Je trouve grid plus adapté et facile à reconfigurer que flex pour cet exemple

Cordialement
Bonjour Niuxe,
problème de slider résolu... ENFIN biggrin]
Un grand merci
Il ne me reste que deux messages d'erreur sur la console :
1/
Uncaught SyntaxError: missing } after function bodymonsite.html:858:1note: { opened at line 831, column 20
2/
Uncaught ReferenceError: slitslider is not defined
onAfterChange https://smonsit.com/monsite.html:698
jQuery 21
<anonymous> https://monsite.com/monsite.html:694
mais rien ne se remarque sur le site.
Merci à toi et à casper2.
Très bonne journée à vous
problème de slider résolu... ENFIN biggrin]
Un grand merci

Il ne me reste que deux messages d'erreur sur la console :
1/
Uncaught SyntaxError: missing } after function bodymonsite.html:858:1note: { opened at line 831, column 20
2/
Uncaught ReferenceError: slitslider is not defined
onAfterChange https://smonsit.com/monsite.html:698
jQuery 21
<anonymous> https://monsite.com/monsite.html:694
mais rien ne se remarque sur le site.
Merci à toi et à casper2.
Très bonne journée à vous

lionel_css3 a écrit :
Il ne le gère pas mais il fait apparaître les erreurs qu'il détecte
C'est son but. En complément, tu as flake8. Si tu veux utiliser les 2 en même temps, il y a tox qui te permet de faire ça. C'est un outil dans lequel, tu peux aussi greffer pytest ou unitest
Je sais qu'avec VSC, tu peux avoir les 2 (flake8 remplacé par autopep8, et pylint intégré dans une extension)
Pycharm Community Edition est un IDE gratuit. Si tu ne fais que du python, il est largement mieux que VSC.
lionel_css3 a écrit :
Si... mais ça dépend du type de terminal ouvert dans VSCode (terminal Python ou terminal Powershell), et dans tous les cas j'ai ma commande magique pour vérifier l'exécutable en courspython -c "import sys; print(sys.executable)"
En lisant cette ligne de code, je pense que ça doit te donner le chemin du binaire python (celui du .venv ou du système)
lionel_css3 a écrit :
Sinon, j'ai fait un essai sur une autre machine, ça marche.
J'ai refait un dossier sur la première machine en recommençant à zéro et là maintenant ça marche... la seule différence c'est que dans le premiers cas j'avais installé dotven après openai..
Normalement, il n'y a pas de notions de priorités dans une install de package.
Modifié par Niuxe (03 Jul 2025 - 11:36)
Niuxe a écrit :
Pylint ne gère pas python-dotenv. Ça n'a rien à voir.
Il ne le gère pas mais il fait apparaître les erreurs qu'il détecte
Niuxe a écrit :
Tu ne peux pas voir si l'env virtuel est activé.
Si... mais ça dépend du type de terminal ouvert dans VSCode (terminal Python ou terminal Powershell), et dans tous les cas j'ai ma commande magique pour vérifier l'exécutable en cours
python -c "import sys; print(sys.executable)"
-------
Sinon, j'ai fait un essai sur une autre machine, ça marche.
J'ai refait un dossier sur la première machine en recommençant à zéro et là maintenant ça marche... la seule différence c'est que dans le premiers cas j'avais installé dotven après openai..
bizarre

Ce que j'ai pu lire, avec les images, ça fonctionne ? Tu as désormais un slider qui fonctionne bien ?
Ce que j'ai pu lire, tu voudrais mettre des videos dans ton slider au lieu d'images statiques ?
Je viens de relire mon commentaire précédent et j'avoue que dans ma phrase, j'ai oublié des mots.
Donc, je vais remettre cette phrase et qu'elle ait un sens : Est-ce que les méthodes callback onBeforeChange et onBeforeChange fonctionnent ?
Ce que j'ai pu lire, tu voudrais mettre des videos dans ton slider au lieu d'images statiques ?
Je viens de relire mon commentaire précédent et j'avoue que dans ma phrase, j'ai oublié des mots.
Donc, je vais remettre cette phrase et qu'elle ait un sens : Est-ce que les méthodes callback onBeforeChange et onBeforeChange fonctionnent ?
Pylint ne gère pas python-dotenv. Ça n'a rien à voir.
Dans ta capture écran, je vois que tu as plusieurs fichiers dans ton dossier. Ouvre un nouveau projet avec un venv.
Sur windows, de mémoire et en utilisant venv de base¹ :
La dernière ligne permet d'activer l'env virtuel. Les joies de Windows.... Tu ne peux pas voir si l'env virtuel est activé. Sur Unix, le nom de l'env virtuel s'affiche dans le prompt entre parenthèses en début de ligne.
exemple chez moi :
Bref, Une fois fait, tu installes :
Tu crées un nouveau fichier au nom de main.py.
Tu reprends le code que je t'ai partagé dans notre discussion plus haut.
Pour finir, tu l'exécutes
____
¹ Les instructions que je t'ai données pour créer ton env virtuel, c'est du très basique et historique. Il y a son lot de contraintes. Je te recommande d'apprendre à utiliser pipenv
On se casse moins la tête. La doc officielle recommande de l'utiliser. Si tu veux aller plus loin, il y a poetry. Mais pipenv, c'est largement suffisant.
Modifié par Niuxe (03 Jul 2025 - 00:42)
Dans ta capture écran, je vois que tu as plusieurs fichiers dans ton dossier. Ouvre un nouveau projet avec un venv.
Sur windows, de mémoire et en utilisant venv de base¹ :
mkdir projet_openai
cd projet_openai
python -m venv .venv
.venv\Scripts\activate.bat
La dernière ligne permet d'activer l'env virtuel. Les joies de Windows.... Tu ne peux pas voir si l'env virtuel est activé. Sur Unix, le nom de l'env virtuel s'affiche dans le prompt entre parenthèses en début de ligne.
exemple chez moi :
(hello-openai) user@host:~/www/divers/alsacreations/hello-openai$
Bref, Une fois fait, tu installes :
pip install python-dotenv openai
Tu crées un nouveau fichier au nom de main.py.
Tu reprends le code que je t'ai partagé dans notre discussion plus haut.
Pour finir, tu l'exécutes
python main.py
____
¹ Les instructions que je t'ai données pour créer ton env virtuel, c'est du très basique et historique. Il y a son lot de contraintes. Je te recommande d'apprendre à utiliser pipenv


Modifié par Niuxe (03 Jul 2025 - 00:42)
Je ne comprends pas Niuxe, c'est trop fort pour moi, désolé
Par contre, tu m'as mis sur une voie : les images
Voici des CSS
Le
Penses-tu que mon souci est terminé ?
Il va rester des erreurs, mais tout va rouler peut-être ? Si on n'oublie la console
Merci en tout cas... gros prob d'intitulé et donc de chemin. En espérant que que mon slider sera plus "fluide".
Très bonne soirée

Par contre, tu m'as mis sur une voie : les images

Voici des CSS
@media only screen and (max-width: 575px)
{
.lddc .bg-img-1
{
background-image: url('../images/640w/PBal.jpg');
}
.lddc .bg-img-2
{
background-image: url('../images/lddcintro.jpg');
}
.lddc .bg-img-3
{
background-image: url('../images/lddcone.jpg');
}
.lddc .bg-img-4
{
background-image: url('../images/lddctwo.jpg');
}
.lddc .bg-img-5 {
background-image: url('../images/lddcthree.jpg');
}
}
Le
background-image: url('../images/lddcintro.jpg');
là où la vidéo se bloque. Le code était background-image: url('../images/nimportequoi.jpg')
;Penses-tu que mon souci est terminé ?
Il va rester des erreurs, mais tout va rouler peut-être ? Si on n'oublie la console

Merci en tout cas... gros prob d'intitulé et donc de chemin. En espérant que que mon slider sera plus "fluide".
Très bonne soirée

a écrit :
C'est une erreur classique en Python. C'est deux class (ou plus) s'importent mutuellement, créant une dépendance cyclique. Cela peut entraîner des erreurs de type ImportError ou des comportements inattendus si la dépendance n'est pas gérée correctement.
j'ai vu cette explication mais dans mon cas je dois faire quoi?
utiliser dotenv sur Python ça devrait être un acte banal...

Salut Lionel,
C'est une erreur classique en Python. C'est deux class (ou plus) s'importent mutuellement, créant une dépendance cyclique. Cela peut entraîner des erreurs de type ImportError ou des comportements inattendus si la dépendance n'est pas gérée correctement.
Voici un exemple simple pour illustrer une importation circulaire :
Imaginons deux fichiers Python, class_a.py et class_b.py, qui tentent de s'importer l'un l'autre.
class_a.py
class_b.py
Lorsque tu tentes d'exécuter l'une de ces class (par exemple, en créant un fichier main.py et en important l'une d'eux, ou simplement en exécutant python class_a.py ou python class_b.py), voici ce qui se passe :
1. Python commence à exécuter class_a.py.
2. Il arrive à la ligne from class_b import ClassB.
3. Python tente alors d'importer class_b.py.
4. Lorsque class_b.py commence son exécution, il arrive à la ligne from class_a import ClassA.
À ce stade, class_a.py est déjà en cours d'exécution et n'a pas encore terminé de définir ClassA (car il attend que class_b.py finisse d'être importé).
Python se retrouve dans un état où class_a tente d'importer class_b, et class_b tente d'importer class_a avant que l'un d'eux n'ait complètement défini ses objets, ce qui conduit à une ImportError ou, dans certains cas plus subtils, à un objet ClassA ou ClassB qui n'est pas encore entièrement construit ou qui manque d'attributs.
Pour répondre à ton souci général, je viens de tester et j'ai bien une réponse. C'est une erreur.
main.py
la réponse :
Mon message d'erreur est explicite, je dois passer à la caisse pour pouvoir utiliser OpenAI.
ps : mdr => ta mère en short
Modifié par Niuxe (02 Jul 2025 - 20:30)
lionel_css3 a écrit :
et quand je lance le code j'ai ce message d'erreur:
ImportError: cannot import name 'load_dotenv' from partially initialized module 'dotenv' (most likely due to a circular import) (w:\www-statique\PYTHON\Open-api-bible-3.12\dotenv.py)
C'est une erreur classique en Python. C'est deux class (ou plus) s'importent mutuellement, créant une dépendance cyclique. Cela peut entraîner des erreurs de type ImportError ou des comportements inattendus si la dépendance n'est pas gérée correctement.
Voici un exemple simple pour illustrer une importation circulaire :
Imaginons deux fichiers Python, class_a.py et class_b.py, qui tentent de s'importer l'un l'autre.
class_a.py
print("Début de l'exécution de module_a.py")
from module_b import ModuleB # Importe ModuleB depuis module_b
class ClassA:
def __init__(self, name):
self.name = name
def greet(self):
print(f"Bonjour de ModuleA, je m'appelle {self.name}!")
# Tente d'utiliser une fonction ou une classe de ClassB
b_instance = ClassB("Instance B de ClassA")
b_instance.farewell()
print("Fin de l'exécution de module_a.py")
class_b.py
print("Début de l'exécution de class_b.py")
from class_a import ClassA # Importe ClassA depuis class_a
class ClassB:
def __init__(self, name):
self.name = name
def farewell(self):
print(f"Au revoir de ClassB, je m'appelle {self.name}!")
# Tente d'utiliser une fonction ou une classe de ClassA
a_instance = ClassA("Instance A de ClassB")
a_instance.greet()
print("Fin de l'exécution de module_b.py")
Lorsque tu tentes d'exécuter l'une de ces class (par exemple, en créant un fichier main.py et en important l'une d'eux, ou simplement en exécutant python class_a.py ou python class_b.py), voici ce qui se passe :
1. Python commence à exécuter class_a.py.
2. Il arrive à la ligne from class_b import ClassB.
3. Python tente alors d'importer class_b.py.
4. Lorsque class_b.py commence son exécution, il arrive à la ligne from class_a import ClassA.
À ce stade, class_a.py est déjà en cours d'exécution et n'a pas encore terminé de définir ClassA (car il attend que class_b.py finisse d'être importé).
Python se retrouve dans un état où class_a tente d'importer class_b, et class_b tente d'importer class_a avant que l'un d'eux n'ait complètement défini ses objets, ce qui conduit à une ImportError ou, dans certains cas plus subtils, à un objet ClassA ou ClassB qui n'est pas encore entièrement construit ou qui manque d'attributs.
Pour répondre à ton souci général, je viens de tester et j'ai bien une réponse. C'est une erreur.
main.py
import os
from openai import OpenAI
from dotenv import load_dotenv
if __name__ == '__main__':
load_dotenv()
key = os.getenv('API_KEY')
client = OpenAI(api_key=key)
response = client.responses.create(
model="gpt-4o",
instructions="You're a Python expert",
input="How do I check if a Python object is an instance of a class?",
)
print(response.output_text)
la réponse :
(hello-openai) user@host:~/www/divers/alsacreations/hello-openai$ python main.py
Traceback (most recent call last):
File "/home/user/www/divers/alsacreations/hello-openai/main.py", line 10, in <module>
response = client.responses.create(
File "/home/user/www/divers/alsacreations/hello-openai/.venv/lib/python3.9/site-packages/openai/resources/responses/responses.py", line 735, in create
return self._post(
File "/home/user/www/divers/alsacreations/hello-openai/.venv/lib/python3.9/site-packages/openai/_base_client.py", line 1249, in post
return cast(ResponseT, self.request(cast_to, opts, stream=stream, stream_cls=stream_cls))
File "/home/user/www/divers/alsacreations/hello-openai/.venv/lib/python3.9/site-packages/openai/_base_client.py", line 1037, in request
raise self._make_status_error_from_response(err.response) from None
openai.RateLimitError: Error code: 429 - {'error': {'message': 'You exceeded your current quota, please check your plan and billing details. For more information on this error, read the docs: https://platform.openai.com/docs/guides/error-codes/api-errors.', 'type': 'insufficient_quota', 'param': None, 'code': 'insufficient_quota'}}
Mon message d'erreur est explicite, je dois passer à la caisse pour pouvoir utiliser OpenAI.
ps : mdr => ta mère en short

Modifié par Niuxe (02 Jul 2025 - 20:30)
Bonjour gcyrillus,
Merci de ton suivi.
L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.
Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?
À ton avis quelle est la meilleure approche ?
Merci de ton suivi.
gcyrillus a écrit :
:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?
L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.
Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?
À ton avis quelle est la meilleure approche ?
J'ai trouvé une piste:
- il faut installer python-dotenv
- il faut créer un fichier .env (que j'ai mis au même niveau que le fichier python) avec les clés et leurs valeurs
par contre il me surligne cette ligne
avec le code Module import itself (PylintW0406:import-self)
et quand je lance le code j'ai ce message d'erreur:
voici le pip list de l'environnement virtuel:
J'y comprends rien...
- il faut installer python-dotenv
- il faut créer un fichier .env (que j'ai mis au même niveau que le fichier python) avec les clés et leurs valeurs
OPENAI_API_KEY = "ta-grand-mere-en-short"
par contre il me surligne cette ligne
from dotenv import load_dotenv
avec le code Module import itself (PylintW0406:import-self)
et quand je lance le code j'ai ce message d'erreur:
ImportError: cannot import name 'load_dotenv' from partially initialized
module 'dotenv' (most likely due to a circular import)
(w:\www-statique\PYTHON\Open-api-bible-3.12\dotenv.py)
voici le pip list de l'environnement virtuel:
annotated-types 0.7.0
anyio 4.9.0
certifi 2025.6.15
colorama 0.4.6
distro 1.9.0
h11 0.16.0
httpcore 1.0.9
httpx 0.28.1
idna 3.10
jiter 0.10.0
openai 1.93.0
pip 25.1.1
playsound 1.3.0
pydantic 2.11.7
pydantic_core 2.33.2
python-dotenv 1.1.1
setuptools 80.9.0
sniffio 1.3.1
tqdm 4.67.1
typing_extensions 4.14.0
typing-inspection 0.4.1
wheel 0.45.1
J'y comprends rien...
Bonjour à tous,
Depuis Juin, et jusqu'à la rentrée, je me lance dans Python pour explorer ensuite l'Open AI API.
Donc là je démarre avec l'API..
Il faut une clé, ça j'ai compris, je l'ai créée et tous les exemples recommandent de la cacher dans les variables d'environnement pour la protéger, j'ai donc ce code en exemple:
Donc ma question, c'est:
- à quel moment je communique à Python la valeur de ma clé d'API et comment je fais ça?
j'ai cherché un peu partout et je ne trouve pas...
Depuis Juin, et jusqu'à la rentrée, je me lance dans Python pour explorer ensuite l'Open AI API.
Donc là je démarre avec l'API..
Il faut une clé, ça j'ai compris, je l'ai créée et tous les exemples recommandent de la cacher dans les variables d'environnement pour la protéger, j'ai donc ce code en exemple:
import os
import openai
from dotenv import load_dotenv
# Load environment variables from .env file
load_dotenv()
# Securely retrieve API key from environment
openai.api_key = os.getenv("OPENAI_API_KEY")
# Verify key is loaded
if not openai.api_key:
raise ValueError("OpenAI API key not found in environment variables!")
Donc ma question, c'est:
- à quel moment je communique à Python la valeur de ma clé d'API et comment je fais ça?
j'ai cherché un peu partout et je ne trouve pas...
Bonjour,
Vous devriez utiliser les variables natives à CSS (custom properties), largement supportées désormais et qui vous simplifieraient la tâche. Une seule base de code, deux listes déclaratives de variables : une liste pour le thème light, une autre pour le thème dark.
Exemple d'utilisation :
prefers-color-scheme ce n'est pas tout à fait votre demande, c'est une astuce que je vous partage. Bien sûr, libre à vous de lui préférer une classe CSS.
Modifié par Olivier C (06 Jul 2025 - 11:58)
Vous devriez utiliser les variables natives à CSS (custom properties), largement supportées désormais et qui vous simplifieraient la tâche. Une seule base de code, deux listes déclaratives de variables : une liste pour le thème light, une autre pour le thème dark.
Exemple d'utilisation :
/* Thème clair par défaut */
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
/* Thème sombre, activé si l'utilisateur a ce mode préféré dans son système */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #eeeeee;
}
}
/* Exemple d'application dans la base de code */
body {
color: var(--text-color);
background-color: var(--bg-color);
}
prefers-color-scheme ce n'est pas tout à fait votre demande, c'est une astuce que je vous partage. Bien sûr, libre à vous de lui préférer une classe CSS.
Modifié par Olivier C (06 Jul 2025 - 11:58)
Bonjour,
Pour mettre en avant avec :hover l'image , il faut lui ajouter un positionnement relatif.
Les éléments placés aux même endroits s'empilent les uns sur les autres, le dernier recouvrant les autres.
https://codepen.io/gc-nomade/pen/raVgpwa
:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?
cdt
Modifié par gcyrillus (02 Jul 2025 - 15:45)
Pour mettre en avant avec :hover l'image , il faut lui ajouter un positionnement relatif.
Les éléments placés aux même endroits s'empilent les uns sur les autres, le dernier recouvrant les autres.
https://codepen.io/gc-nomade/pen/raVgpwa
:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?
cdt
Modifié par gcyrillus (02 Jul 2025 - 15:45)
Est-ce que les méthodes callback onBeforeChange et onBeforeChange ? Je parle dans le cas où tu intègrerais des images ? Je pense qu'on peut ruser. Comme je te l'avais indiqué, il est peu probable qu'avec des videos ton slider fonctionne. Le lien que tu nous partages, je l'ai lu partiellement.

Sauf que finalement ça ne marche pas non plus, car les variables Scss ne servent qu'à générer le css final. Donc la solution à mon problème n'est pas au niveau de Scss.
Bonjour casper2 et Niuxe,
c'est très sympa de m'aider, merci
Le slider fonctionnait très bien avec des images, puis maintenant avec des vidéos. Seul gros problème : le slider reste régulièrement bloqué sur la vidéo lddcintro (là où la console signale une erreur liée au webm).
Je vais vous donner la source (désolé de ne pas l'avoir fait plus tôt) :
https://github.com/codrops/SlitSlider
Il s'agit de la démo 2. Cela devrait être plus parlant que mes messages
Très bonne journée à vous
c'est très sympa de m'aider, merci

Le slider fonctionnait très bien avec des images, puis maintenant avec des vidéos. Seul gros problème : le slider reste régulièrement bloqué sur la vidéo lddcintro (là où la console signale une erreur liée au webm).
Je vais vous donner la source (désolé de ne pas l'avoir fait plus tôt) :
https://github.com/codrops/SlitSlider
Il s'agit de la démo 2. Cela devrait être plus parlant que mes messages

Très bonne journée à vous

À force de chercher (quand on s'en donne le temps), j'ai fini par dégoter dans la formation Sass de Pierre Giraud, l'existence d'un drapeau !global qui, comme son nom l'indique, rend global une variable. Ainsi mon problème semble bien s'être résolu en corrigeant mon code comme suit :
Bien cordialement,
Goggi
html.pre-mobile {
// Si on est en mode mobile
body.light {
// Mode clair en mobile
$menuTxt: map-get($mobileLightMap, menuTxt) !global;
$menuBg: map-get($mobileLightMap, menuBg) !global;
$menuHover: map-get($mobileLightMap, menuHover) !global;
$menuActu: map-get($mobileLightMap, menuActu) !global;
}
body.dark {
// Mode sombre en mobile
$menuTxt: map-get($mobileDarkMap, menuTxt) !global;
$menuBg: map-get($mobileDarkMap, menuBg) !global;
$menuHover: map-get($mobileDarkMap, menuHover) !global;
$menuActu: map-get($mobileDarkMap, menuActu) !global;
}
}
html:not(.pre-mobile) {
// Si on est en mode desktop
body.light {
// Mode clair en desktop
$menuTxt: map-get($desktopLightMap, menuTxt) !global;
$menuBg: map-get($desktopLightMap, menuBg) !global;
$menuHover: map-get($desktopLightMap, menuHover) !global;
$menuActu: map-get($desktopLightMap, menuActu) !global;
}
body.dark {
// Mode sombre en desktop
$menuTxt: map-get($desktopDarkMap, menuTxt) !global;
$menuBg: map-get($desktopDarkMap, menuBg) !global;
$menuHover: map-get($desktopDarkMap, menuHover) !global;
$menuActu: map-get($desktopDarkMap, menuActu) !global;
}
}
Bien cordialement,
Goggi
Bonsoir,
Pour répondre à ta question précédente, tu n'as pas besoin de recharger la page. Tu n'as qu'à pointer sur le premier slide. J'ai vu que dans ta librairie, on peut ajouter une nav. Par contre, je vois que tu essaies de placer des videos. Pour le moment, fais simple ! Tu fais la même chose que la démo. Je ne suis pas sûr que tu puisses placer des videos. J'ai lu en super Z la librairie. Fais des essais une fois que tu as un résultat comme la démo de la librairie.
Pour ton erreur en console et ce que je peux lire, ta librairie n'est pas intégrée dans ton js.
Je vois que cette librairie a plus de 13 ans. Est ce que la version de jQuery que tu utilises fonctionne avec cette librairie ? C'est peut être de là ton souci en console.
Pour répondre à ta question précédente, tu n'as pas besoin de recharger la page. Tu n'as qu'à pointer sur le premier slide. J'ai vu que dans ta librairie, on peut ajouter une nav. Par contre, je vois que tu essaies de placer des videos. Pour le moment, fais simple ! Tu fais la même chose que la démo. Je ne suis pas sûr que tu puisses placer des videos. J'ai lu en super Z la librairie. Fais des essais une fois que tu as un résultat comme la démo de la librairie.
Pour ton erreur en console et ce que je peux lire, ta librairie n'est pas intégrée dans ton js.
Je vois que cette librairie a plus de 13 ans. Est ce que la version de jQuery que tu utilises fonctionne avec cette librairie ? C'est peut être de là ton souci en console.

Bonsoir, je ne vois pas ce qu'il y a de compliquer à transmettre l'URL du site. (sauf si c'est un Site pour adultes interdit aux mineurs)
Que représente slitslider? Ne serait-ce pas slide plutôt? As tu consulté la documentation de la librairie que tu utilises?
Je ne vois pas la méthode slitslider() dans la documentation jQuery. D’où cela provient-il?
Autre chose, quand une portion de code JavaScript suit une autre portion de code JavaScript il n'est pas utile de fermer la balise <script> pour l'ouvrir juste après.
Tu gagnerais en lisibilité de code si tu répartissais ton JS dans un ou plusieurs fichiers .js plutôt que d'avoir un seul fichier html. J'ai l'impression que tu rajoutes du JS en fin de fichier au fur et à mesure.
Que représente slitslider? Ne serait-ce pas slide plutôt? As tu consulté la documentation de la librairie que tu utilises?
Je ne vois pas la méthode slitslider() dans la documentation jQuery. D’où cela provient-il?
Autre chose, quand une portion de code JavaScript suit une autre portion de code JavaScript il n'est pas utile de fermer la balise <script> pour l'ouvrir juste après.
Tu gagnerais en lisibilité de code si tu répartissais ton JS dans un ou plusieurs fichiers .js plutôt que d'avoir un seul fichier html. J'ai l'impression que tu rajoutes du JS en fin de fichier au fur et à mesure.
Salut Casper2
l'URL... c'est un peu compliqué, mais l'erreur (Uncaught ReferenceError: slitslider is not defined onAfterChange) provient de ce js
il y a aussi un "attention" :
L’attribut « type » spécifié sur « videos/webm » n’est pas pris en charge. Le chargement de la ressource multimédia ./videos/lddcintro.webm a échoué. Essai de chargement à partir de l’élément <source> suivant.
IMPOSSIBLE de savoir d'où ça vient... tout est bien à sa place (nom, chemin...).
le HTML :
là, je vois pas du tout
Merci pour tout

l'URL... c'est un peu compliqué, mais l'erreur (Uncaught ReferenceError: slitslider is not defined onAfterChange) provient de ce js
$('#slider').slitslider(
{
autoplay: true,interval: 4500,onAfterChange: function(slide, idx)
{
slitslider._startSlideshow();
// Starts the autoplay againreturn false;
}
}
);
il y a aussi un "attention" :
L’attribut « type » spécifié sur « videos/webm » n’est pas pris en charge. Le chargement de la ressource multimédia ./videos/lddcintro.webm a échoué. Essai de chargement à partir de l’élément <source> suivant.
IMPOSSIBLE de savoir d'où ça vient... tout est bien à sa place (nom, chemin...).
le HTML :
<div class="sl-slide" data-orientation="vertical">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2">
<video autoplay loop muted="" playsinline="">
<source src="./videos/lddcintro.webm"type="video/webm">
<source src="./videos/lddcintro.mp4"type="video/mp4"></video>
</div>
<div class="marquee-rtl">
<!-- le contenu défilant -->
<h3 style="opacity: 0.4;" >PRESENTE</h3>
</div>
</div>
</div>
<div class="sl-slide" data-orientation="vertical">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3">
<video autoplay loop muted="" playsinline="">
<source src="./videos/trois.webm"type="video/webm">
<source src="./videos/trois.mp4"type="video/mp4"></video>
</div>
<h1>ONE</h1>
</div>
</div>
<div class="sl-slide" data-orientation="vertical">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4">
<video autoplay loop muted="" playsinline="">
<source src="./videos/deux.webm"type="video/webm">
<source src="./videos/deux.mp4"type="video/mp4"></video>
</div>
<h1>TROIS</h1>
</div>
</div>
<div class="sl-slide" data-orientation="vertical">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1">
<video autoplay loop muted="" playsinline="">
<source src="./videos/lddcrock.webm"type="video/webm">
<source src="./videos/lddcrock.mp4"type="video/mp4"></video>
</div>

là, je vois pas du tout

Merci pour tout

Bonjour,
J'essaye d'avoir en parallèle :hover et :focus.
Comportement étrange pour moi :
:hover fonctionne mais si je donne le focus à un élément :hover ne fonctionne plus pour les frères aînés, il ne fonctionne qu'avec les frères cadets.
Voir le codepen.
Avez-vous une explication, une solution ?
J'essaye d'avoir en parallèle :hover et :focus.
Comportement étrange pour moi :
:hover fonctionne mais si je donne le focus à un élément :hover ne fonctionne plus pour les frères aînés, il ne fonctionne qu'avec les frères cadets.
Voir le codepen.
Avez-vous une explication, une solution ?
Bonsoir, plutôt que des captures écrans inutilisable, poste nous l'URL de la page qui à le problème pour que l'on puisse analyser le code et tester avec les outils du navigateur.
>> je ne sais pas si cela concerne le js, le HTML où je ne sais pas quoi d'autre
Une ReferenceError c'est une erreur JS.
>> je ne sais pas si cela concerne le js, le HTML où je ne sais pas quoi d'autre
Une ReferenceError c'est une erreur JS.
Bonjour,
je ne sais pas si cela concerne le js, le HTML où je ne sais pas quoi d'autre
Je vous envoie des captures de la console afin de savoir ce que je peux vous envoyer comme code(s) pour résoudre mon problème de slider si vous avec qq minutes à m'accorder.
D'avance merci beaucoup
je ne sais pas si cela concerne le js, le HTML où je ne sais pas quoi d'autre

Je vous envoie des captures de la console afin de savoir ce que je peux vous envoyer comme code(s) pour résoudre mon problème de slider si vous avec qq minutes à m'accorder.


D'avance merci beaucoup

Merci beaucoup Niuxe,
je demandais à ce que la page soit rafraîchit car j'ai un gros souci avec le slider.
Puisque c'est à fuir, j'ai cherché ailleurs
j'ai regardé la console (pour la première fois) et j'ai des messages d'erreur sur ce slider.
Mon problème (slider qui se bloque) vient peut-être de là
??
J'ouvre un nouveau topic ce soir.
Merci pour ton aide et tes explications
Bonne soirée.
je demandais à ce que la page soit rafraîchit car j'ai un gros souci avec le slider.
Puisque c'est à fuir, j'ai cherché ailleurs

j'ai regardé la console (pour la première fois) et j'ai des messages d'erreur sur ce slider.
Mon problème (slider qui se bloque) vient peut-être de là


J'ouvre un nouveau topic ce soir.
Merci pour ton aide et tes explications

Bonne soirée.
Je n'avais pas vu ta réponse. J'ai fait quelques modifs en ajoutant des arguments pertinents par rapport à ce que tu fais (le rechargement de la page).
jQuery est une bonne librairie. Cela dit, son intérêt n'est plus aussi intéressant. le vanilla JS (natif) est une solution plus adéquate.
Modifié par Niuxe (01 Jul 2025 - 16:07)
jQuery est une bonne librairie. Cela dit, son intérêt n'est plus aussi intéressant. le vanilla JS (natif) est une solution plus adéquate.
Modifié par Niuxe (01 Jul 2025 - 16:07)
Bonjour,
Je développe un site avec Visual Studio Code et SCSS et j'ai un script qui met en place les styles d'un menu vertical. J'ai notamment quatre variables $menuTxt, $menuBg, $menuHover et $menuActu.
Ces variables servent à définir les background et couleurs pour les choix de menu et ça marche parfaitement bien.
Où ça se corse, c'est quand je veux intégrer les options que sont
les thèmes light et dark qui sont repérés par les classes alternatives body.light et body.dark, et aussi
le fait que le site est consulté sur mobile ou desktop ce que repère html.mobile (et html:not(.mobile). Les valeurs sont initialisées dans quatre listes SCSS dont voici un extrait de celle qui correspond à desktop light :
J'ai donc écrit ce code placé en tête du module qui gère le fameux menu :
Le problème pour lequel je vous consulte est que, bien que la compil se passe sans erreurs, les contenus de mes variables ne sont pas modifiés après ce passage, et celles-ci contiennent toujours du rouge.
Or il y a forcément une alternative vraie pour html.mobile / html:not(.mobile), et idem pour body.light / body.dark, car HTML initialise body par <body class="light">
Et si je remplace tout ce code par :
(sans les selecteurs html:not(.mobile) { body.light { devant) mes variables sont parfaitement renseignées avec les couleurs attendues.
Mais évidemment tout l'intérêt du code initial est perdu.
Où est ma faute ? Avez-vous une piste ?
Merci de m'avoir lu jusque-là.
Goggi
Modifié par goggi (02 Jul 2025 - 05:30)
Je développe un site avec Visual Studio Code et SCSS et j'ai un script qui met en place les styles d'un menu vertical. J'ai notamment quatre variables $menuTxt, $menuBg, $menuHover et $menuActu.
Ces variables servent à définir les background et couleurs pour les choix de menu et ça marche parfaitement bien.
Où ça se corse, c'est quand je veux intégrer les options que sont
les thèmes light et dark qui sont repérés par les classes alternatives body.light et body.dark, et aussi
le fait que le site est consulté sur mobile ou desktop ce que repère html.mobile (et html:not(.mobile). Les valeurs sont initialisées dans quatre listes SCSS dont voici un extrait de celle qui correspond à desktop light :
$desktopLightMap: (
color: #336633, // Txte principal (vert foncé)
background: #ffffdd, // Fond général (jaune très pâle)
container: #fffff0, // fond de boîte légèrement plus clair
...
menuTxt: #df6, // texte menu
menuBg: #121, // fond menu si pas image
menuHover: #fc0, // survol
menuActu: yellow, // menu sélectionné
);
J'ai donc écrit ce code placé en tête du module qui gère le fameux menu :
// Initialisation des variables globales qui seront utilisées plus bas (initialisées à n'importe quelle couleur, puisqu'elles sont censées être modifiées par le code ci-dessous).
$menuTxt: red;
$menuBg: red;
$menuHover: red;
$menuActu: red;
// initialise les variables locales $menuTxt, $menuBg, $menuHover et $menuActu
// Vérifier si on est en mode "mobile" ou "desktop" en fonction de html.mobile
html.mobile {
// ici on est en mode mobile
body.light {
// Mode clair en mobile
$menuTxt: map-get($mobileLightMap, menuTxt);
$menuBg: map-get($mobileLightMap, menuBg);
$menuHover: map-get($mobileLightMap, menuHover);
$menuActu: map-get($mobileLightMap, menuActu);
}
body.dark {
// Mode sombre en mobile
$menuTxt: map-get($mobileDarkMap, menuTxt);
$menuBg: map-get($mobileDarkMap, menuBg);
$menuHover: map-get($mobileDarkMap, menuHover);
$menuActu: map-get($mobileDarkMap, menuActu);
}
}
html:not(.mobile) {
// Ici on est en mode desktop
body.light {
// Mode clair en desktop
$menuTxt: map-get($desktopLightMap, menuTxt);
$menuBg: map-get($desktopLightMap, menuBg);
$menuHover: map-get($desktopLightMap, menuHover);
$menuActu: map-get($desktopLightMap, menuActu);
}
body.dark {
// Mode sombre en desktop
$menuTxt: map-get($desktopDarkMap, menuTxt);
$menuBg: map-get($desktopDarkMap, menuBg);
$menuHover: map-get($desktopDarkMap, menuHover);
$menuActu: map-get($desktopDarkMap, menuActu);
}
}
Le problème pour lequel je vous consulte est que, bien que la compil se passe sans erreurs, les contenus de mes variables ne sont pas modifiés après ce passage, et celles-ci contiennent toujours du rouge.
Or il y a forcément une alternative vraie pour html.mobile / html:not(.mobile), et idem pour body.light / body.dark, car HTML initialise body par <body class="light">
Et si je remplace tout ce code par :
$menuTxt: map-get($desktopLightMap, menuTxt);
$menuBg: map-get($desktopLightMap, menuBg);
$menuHover: map-get($desktopLightMap, menuHover);
$menuActu: map-get($desktopLightMap, menuActu);
(sans les selecteurs html:not(.mobile) { body.light { devant) mes variables sont parfaitement renseignées avec les couleurs attendues.
Mais évidemment tout l'intérêt du code initial est perdu.
Où est ma faute ? Avez-vous une piste ?
Merci de m'avoir lu jusque-là.
Goggi
Modifié par goggi (02 Jul 2025 - 05:30)
Merci beaucoup Niuxe,
je te tiens au courant très vite
Pour le JQuery, c'est remplacé par ? Uniquement du js ?
Merci encore
je te tiens au courant très vite

Pour le JQuery, c'est remplacé par ? Uniquement du js ?
Merci encore

Ce n'est pas une bonne idée de recharger la page. C'est même une très mauvaise pratique¹ (le même problème que meta refresh). Le mieux, tu détruis et tu reconstruis. As-tu une url à partager ou le code de ton slider ? Ce slider est fait maison ou est-ce une libriairie prise sur le net ?
Au passage, en lisant ça, c'est contre productif. Peut faire mieux
Dans la signature de la méthode animate(), tu bénéficies d'un callback. Ce qui permet d'ajouter un comportement après que l'animation eut été lancée (onComplete). Ne pas oublier que cette méthode (animate) est gourmande en ressource. En général, il vaut mieux éviter de l'utiliser. Il est aussi préférable d'utiliser la méthode stop() afin d'éviter des bugs ou comportements aléatoires/exotiques.
Ça te donne ceci :
**Nous sommes en 2025 et je ne vois plus l'intérêt d'utiliser jQuery.
____
¹ Les rechargements de page sont une mauvaise pratique parce que:
- Tu peux nuire au SEO. Les moteurs de recherches n'aiment pas ce genre de comportement
- L'utilisateur peut être surpris et frustré.
- l'historique de navigation est faux
- Les lecteurs d’écran ou aides techniques peuvent être interrompus en pleine lecture si la page se recharge.
- Les utilisateurs avec troubles cognitifs ou moteurs peuvent perdre le fil de l’action en cours
- etc.
Modifié par Niuxe (01 Jul 2025 - 15:53)
Au passage, en lisant ça, c'est contre productif. Peut faire mieux
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
setTimeout( () => {
window.location=document.location.href
}, 400);
});
Dans la signature de la méthode animate(), tu bénéficies d'un callback. Ce qui permet d'ajouter un comportement après que l'animation eut été lancée (onComplete). Ne pas oublier que cette méthode (animate) est gourmande en ressource. En général, il vaut mieux éviter de l'utiliser. Il est aussi préférable d'utiliser la méthode stop() afin d'éviter des bugs ou comportements aléatoires/exotiques.
Ça te donne ceci :
btn.on('click', function(e) {
e.preventDefault();
$('html, body').stop().animate({scrollTop:0}, 300, function(){
window.location=document.location.href
});
});
**Nous sommes en 2025 et je ne vois plus l'intérêt d'utiliser jQuery.
____
¹ Les rechargements de page sont une mauvaise pratique parce que:
- Tu peux nuire au SEO. Les moteurs de recherches n'aiment pas ce genre de comportement
- L'utilisateur peut être surpris et frustré.
- l'historique de navigation est faux
- Les lecteurs d’écran ou aides techniques peuvent être interrompus en pleine lecture si la page se recharge.
- Les utilisateurs avec troubles cognitifs ou moteurs peuvent perdre le fil de l’action en cours
- etc.
Modifié par Niuxe (01 Jul 2025 - 15:53)
50 Dernières réponses