Nouveau sujet Aide

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:

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.

Dans Développement web côté serveur, CMS · MAX et MIN en MySQL

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)

Dans Sémantique web et HTML · Image qui ne s'affiche pas

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)

Dans Sémantique web et HTML · Image qui ne s'affiche pas

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.
<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 Smiley decu

Dans Sémantique web et HTML · Image qui ne s'affiche pas

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)

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

Bonjour gcyrillus,

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.

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

Bonjour,

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 ?

Dans CSS et mise en forme, CSS3 · [Résolu] Border-collapse pour Grid

Bonjour gcyrillus,

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.

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

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 :

.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)

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

Bonjour,
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}`
  }
}

Dans JavaScript, DOM et API Web HTML5 · Question autour de XHR

Bonjour,
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)

Dans JavaScript, DOM et API Web HTML5 · Question autour de XHR

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 Smiley smile

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 Smiley smile Mais c'est personnel

Cordialement

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

Bonjour Niuxe,
problème de slider résolu... ENFIN biggrin]
Un grand merci Smiley cligne
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 Smiley cligne

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

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 cours 
python -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)

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

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

upload/1751527577-40948-dotenv-solved.jpg

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

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 ?

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

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¹ : 

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 Smiley cligne 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. Smiley cligne
Modifié par Niuxe (03 Jul 2025 - 00:42)

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

Je ne comprends pas Niuxe, c'est trop fort pour moi, désolé Smiley murf
Par contre, tu m'as mis sur une voie : les images Smiley smile
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 Smiley rolleyes

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 Smiley smile

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

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...

upload/1751482977-40948-python-circular.jpg

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

Salut Lionel,

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 Smiley lol
Modifié par Niuxe (02 Jul 2025 - 20:30)

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

Bonjour gcyrillus,

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 ?

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

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

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...

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

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:


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...

Dans Développement web côté serveur, CMS · Variable environnement avec Python (Open AI API)

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 :
/* 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)

Dans CSS et mise en forme, CSS3 · Exploitation de variables SCSS pour l'affectation de couleurs

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)

Dans Questions générales et questions de débutants · Carrousel d'images avec vignettes

Bonjour casper2 et Niuxe,
c'est très sympa de m'aider, merci Smiley smile
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 Smiley lol
Très bonne journée à vous Smiley smile

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

À 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 :

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

Dans CSS et mise en forme, CSS3 · Exploitation de variables SCSS pour l'affectation de couleurs

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. Smiley ohwell

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la 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.

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

Salut Casper2 Smiley smile
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>


Smiley hum

là, je vois pas du tout Smiley murf
Merci pour tout Smiley cligne

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Problèmes d'un slider détectés par la console

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 Smiley cligne
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à Smiley ohwell ?? Smiley ohwell
J'ouvre un nouveau topic ce soir.
Merci pour ton aide et tes explications Smiley smile
Bonne soirée.

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Faire un scrolltop qui atteigne le header de la page

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 :

$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)

Dans CSS et mise en forme, CSS3 · Exploitation de variables SCSS pour l'affectation de couleurs

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

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)

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Faire un scrolltop qui atteigne le header de la page

50 Dernières réponses
Aller à