Bonjour,

En bricolant et brodant sur les classes de base de bootstrap .spinner-border et en adaptant un script de compteur, on peut faire un truc du genre : https://codepen.io/gc-nomade/pen/abXQmKE

Je ne suis pas non plus expert de bootstrap, je suis allé pioché dans ces class toutes prêtes dans la doc : https://getbootstrap.com/docs/5.0/components/spinners/ puis en surchargeant .

cdt

Bonjour,
j'ai des liens sous forme de petites images de 44x33 px. Ce sont des ancres. En mode grand écran, tout va bien. En mode mobile, le lien n'est pas actif sur la totalité de l'image, mais uniquement sur une petite partie à la gauche de l'image

<div>
    <div style="float: left">
         <a href="#bala"><img src="#" data-src="Images/Bala-M-C.jpg" alt="Musique au balafon" title="Bala" width="44" height="33"></a>
         </div>
    <div class="ancres">
        Bala
    </div></div>]

J'ai mis une class pour placer correctement le titre à droite de l'image.
Le css pour les smobiles :

.ancres {
        position:relative;
	display:block;	
        width:4em;
	margin-left:1em;}

Mystère.

Bonjour,

Je voudrais faire un spinner Boostrap comme un compteur de cinéma.

Auriez vous des pistes pour le développer ?

Je suis pas expert en Boostrap.

Merci

Bonjour à vous tous,

Précédemment, je vous avais demandé s'il existait un moyen de pointer un paragraphe contenant une ancre <a>. Voici cette discussion : https://forum.alsacreations.com/topic-2-90719-1-Comment-utiliser-un-lien-local-sur-un-site-web-deja-existant-Y.html Je sais maintenant que cette fonctionnalité ne marche que sur Firefox et Safari et pas sur les autres navigateurs.

Aujourd'hui, je voudrais vous demander si vous savez comment faire pour sélectionner du texte après l'avoir pointé en utilisant l'attribut href du lien <a>.Voici un exemple parlant avec Google, j'envoie la requête suivante : "Peut-on cumuler les jours de congés payés sur plusieurs années ?". Il me répond en sélectionnant directement la partie concernée, comme le montre la capture écran suivante :
Je voudrais donc savoir si l'un de vous sait si on peut faire ça avec du HTML, CSS et Javascript, quand on clic sur un lien et que celui-ci pointe directement le paragraphe concerné et le sélectionne. Mon but est de faciliter la lecture de l'internaute en lui montrant directement la partie à lire.

Merci pour votre aide et
que le code soit avec vous !
Modifié par ObiJuanKenobi (02 Dec 2023 - 08:28)

Des outils assez classiques en sommes. Du coup, retour à la case départ pour comprendre en quoi tes collègues arrivent à savoir en quoi un :has() CSS ou un .classList.add() JS peuvent poser problème.
Modifié par Olivier C (03 Dec 2023 - 10:15)

Bonjour evanescente-ondine,
Et bienvenue sur le forum.

Ah oui, merci. C'est bon maintenant, j'ai bien compris comment ça marche.

gcyrillus a écrit :
Oui, si l'on corrige la typo:

font: var(--font);

Bravo. Je ne l'avais même pas vu.

Ah, j'ai compris. Finalement ce n'est pas si utile pour le cas d'usage présent. Les enfants héritent de la valeur de la propriété définie sur le parent (ou ancêtre), mais vu que celle-ci n'a pas été défini sur les enfants eux-mêmes la valeur est figée. Le plus simple est de couvrir les éléments concernés par les changements avec les bon sélécteurs. Dans mon cas:

body, address, body>nav, header {
  --font-weight: normal;
  --font-size: 1rem;
  --font-family: Roboto;
  --line-height: 1;
  --font: var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
  font: var(--font);
}

Puis changer des composantes de font dans les éléments couverts par les sélecteurs, et l'héritage fera son travail sur leur enfants.
Modifié par evanescente-ondine (01 Dec 2023 - 18:42)

Oui, si l'on corrige la typo:

font: var(--font);

Je lis que l'on peut utiliser les custom properties n'importe où, comme n'importe quel morceau d'une autre variable. Y compris d'un autre c.p (dieu merci ce n'est pas un forum anglophone, ces initiales auraient un autre sens !).
Est-ce que le code suivant est censé marcher ? Est-ce mon code ou le support navigateur ?

body {
--font-weight: 400;
--font-size: 1rem;
--font-family: Roboto;
--line-height: 1;
--font: var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
font: (--font);
}

Modifié par evanescente-ondine (01 Dec 2023 - 15:57)

merci pour vos 2 suggestions j'ai pus finir ce que je voulais tous seul j'ignorai qu'il fallait éviter les %
et merci pour le convertisseur je n'y avait pas penser non plus

evanescente-ondine a écrit :
Merci.
L'intérêt d'une custom property est qu'en changeant sa valeur, toutes les propriétés en dépendant sont mises à jour: je les utilise comme ça à plusieurs endroits. Mais là ça ne marche pas ? Pourquoi ? On dirait que la valeur dont hérite color n'est pas "var(--logo-color)" mais "red", ce qui n'est ni intuitif ni utile !

Oula, je sens de la confusion (inherits à false ou true est plutôt intuitif pour moi):
A * Il y a inherits dans la propriété (la propriéte est réappliqué aux enfants)
B * color est aussi une propriété héritable , si pas redéfinie, elles prend celle du parent le plus proche ou elle est déclarée la dernière fois, sinon , la valeur par défaut utilisée par le navigateur.


je t'ai présente deux bloc de CSS fonctionnel en rapport direct avec ta structure de test.

un UL recevant la class .green et un enfant avec la class .red

une propriété définie pour color reglée sur red.
Dans l'un des bloc en exemple , cette propriété est héritable, donc réappliquée aux enfants. Il te faut donc bien la réinitialisé à sa valeur déclaré si tu veut retrouvé du rouge déjà modifié à partir de la class green ,et en rappelant cette variable réinitialisé dans ton selecteur .red.
Dans l'autre bloc, elle n'est pas héritable, donc appliqué uniquement à l’élément et la valeur de propriété reste celle d'origine pour les autres, il suffit juste de la faire appliqué sans devoir la réinitialisé.

Je te joins un codepen pour tester avec le navigateur Chrome avec un ul et un ol côte à côte : https://codepen.io/gc-nomade/pen/QWYZZgq survol le ol pour réinitialisé la valeur de propriété modifiée par la class .green du parent.

cdt
Modifié par gcyrillus (01 Dec 2023 - 15:52)

Oui, exact, de plus...
Je ne sais pas si ce que donne le convertisseur s'applique aussi aux @media, mais 66% font 0.66rem ou 10.56px. Ce sont des valeurs bien trop faibles.
Personnellement, j'utilise 35em comme point de rupture pour les mobiles et je n'ai jamais eu de problème avec aucun mobile. Le convertisseur donne 3500% pour 35em.
De toute façon, utiliser les % n'est pas une bonne idée pour les @media.
https://codebeautify.org/rem-to-px-converter

Easy.
Le problème est la valeur donnée à min-width, en pourcentage. Tu te réfères à la largeur du viewport, ok ? Le viewport est est la totalité de la fenêtre du navigateur. Ton site ne peut avoir accès à rien d'autre (oublions device-width). n% serait n% de quelque chose, mais il n'y a rien au-dessus.
Donc ta valeur doit-être en unité absolue, typiquement cm, in ou px. Pas sûr que rem marche. em ne marchera pas car relatif à la valeur de la propriété héritée du parent ou de la valeur initiale.
Que veut tu faire ?

Merci.
L'intérêt d'une custom property est qu'en changeant sa valeur, toutes les propriétés en dépendant sont mises à jour: je les utilise comme ça à plusieurs endroits. Mais là ça ne marche pas ? Pourquoi ? On dirait que la valeur dont hérite color n'est pas "var(--logo-color)" mais "red", ce qui n'est ni intuitif ni utile !
Modifié par evanescente-ondine (01 Dec 2023 - 14:41)

Bonjour,

la valeur à utilisé est initial et il faut redefinir aussi la regle.

@property --logo-color {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}
.green {
	--logo-color: green;
	color: var(--logo-color);
}
.red {
  --logo-color:initial;/* un reset */
color:var(--logo-color); /* on applique  la regle à nouveau si herité*/
}

ou sans heritage :

@property --logo-color {
  syntax: "<color>";
  inherits: false;/* pas d'heritage */
  initial-value: red;
}
.green {
	--logo-color: green;
	color: var(--logo-color);
}
.red {
color:var(--logo-color);/* au lieu de la couleur par défaut */
}

Firefox est dans les choux pour le moment , plutôt vérifier dans chrome par exemple.

cdt
Modifié par gcyrillus (01 Dec 2023 - 14:03)

bonjour je n'arrive pas a utiliser la balise @media pour changer la taille de on texte,
je susi relativement nouveau en html css mais je pensai savoir l'utiliser, j'ai meme reverifier sur des site dont celui la pour m'assurer de bien l'avoir utiliser, j'ai donc :
.all{
background-color: whitesmoke;
font-size: 24pt;
}
@media screen and (min-width: 66%){
.all{
background-color: whitesmoke;
font-size: 16pt;
}
}
la couleur etai pour tester plus facilement mais meme sa ne marche pas je pourrai vous montrer le html mais ya deja pas mal de truc et jai deja verifier si cetai pas un probleme avec la class="all" et elle marche bien
merci d'avance

Bonjour,
J'essaie de comprendre comment marchent les custom properties, et j'ai l'impression de ne m'être trompé quelque part. Je souhaite utiliser les nouvelles variables CSS à leur plein potentiel, c'est à dire comme de véritables propriétés personnalisée. J'essaie de tirer partie de leur héritage et valeur initiale en particulier.

Disons que j'ai:

@property --logo-color {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}
.green {
	--logo-color: green;
	color: var(--logo-color);
	& .red {--logo-color: unset}
}

Je sais que "color:initial" n'est pas du tout ce que j'attends, parce que la valeur par défaut de la propriété vient de la feuille de style par défaut du navigateur, dont personne n'a rien à f$$$$.
Mais je pensais que définir "--logo-color: initial" aurait l'effet de retourner à la valeur initiale faisant partie de la définition. Sans quoi, je n'y verrais aucun intérêt !
Et bien avec ce code plus haut, et disons

<ul class="green">
<li><p>green</p></li>
<li><p>green</p>
      <p class="red">red</p>
</li>
</ul>

Rien ne se passe, tout reste vert.
Peu importe à quelle valeur je redéfinis la variable le changement n'opère pas, même si le developper tool prend bien note de la nouvelle valeur. Aucun changement quant à "color".

Est-ce un bug ? Firefox et chromium ont le même comportement pourtant.
Merci de votre aide

" il y a un truc que j'aimerais bien connaître, c'est les outils que vous utilisez pour évaluer ces performances."

Chez mon client, ils font leur propres monitoring avec Graphana en utilisant les API de Google pour les CWV (https://pagespeed.web.dev) et de WebPageTest (https://www.webpagetest.org)
Modifié par Derwoed (01 Dec 2023 - 11:43)

Bonjour,

Je cherche à valider un champ par Jquery en passant par Ajax

Si il y a une erreur j'aimerai utiliser Tooltip Bootstrap pour avoir un texte d'erreur en dessous du champ pour ressembler aux messages automatiques de validation de champ

Je ne sais pas si on peut utiliser cette méthode de tooltip mais si c'est le cas où se trouve l'erreur

Mon champ

<div class="form-group row">
                        <label for="reference" class="col-sm-4 col-form-label ">Reference</label>
                        <input class="col-sm-7 col-form-label" type="text" name="reference" id="reference" required placeholder ="Format plant_xxx" pattern="^plant_[0-9]{3}$" >
                        <div id="myTooltip" class="tooltip hide">
                            
                            </div>    
                     </div>

Mon tooltip

<div id="myTooltip" class="tooltip hide">
   <div class="tooltip-inner">
    Erreur d'enregistrement
   </div>
   <!--<div class="tooltip-arrow"></div>-->
 </div>

if(response.error)
                {
                $('#myTooltip').tooltip('show')    
                //$('#reference').addClass('error').after('<span class="error">'+ "Cette référence est déjà enregistrée" +'</span>').next().hide().delay(speed).slideDown(speed);
                }

Modifié par dudu22 (01 Dec 2023 - 11:18)

Je pense avoir compris ce que tu disais, j'ai mis l'ajax dans une fonction à part et en fonction du résultat true ou false) je mets e.preventdefault();

Le problème c'est que la fonction avec l'ajax ne fonctionne pas et donc je passe directement à la validation PHP

Mon code :

$("#plant_Add_Form").submit(function(e){

var reference_value = $('#reference').val();      

var result_duplicate = duplicate(reference_value);

if(result_duplicate)
    {
    e.preventDefault();    
    }
        

}); // Fin Submit

function duplicate(ref) {
   
        $.ajax({
        url: "/fr/BO/Plants/checkReference",
        type: "POST",
        data: {reference: ref},
        dataType: "json"
        }) 
        .done(function(response) {
            if(response.error)
                {
                $('#reference').addClass('error').after('<span class="error">'+ "Cette référence est déjà enregistrée" +'</span>').next().hide().delay(speed).slideDown(speed);    
                return true;    
                }
            else
                {
                return false;    
                }    
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            return false;
        
        });//FIN AJAX 

}

Merci pour votre aide
Modifié par dudu22 (01 Dec 2023 - 21:35)

Salut,

Et bah il faut mettre ton appel AJAX dans la seconde parti si le Js n'a pas détecté d'erreur non ?

Bonne journée

Oui, c'est vrais que je n'ai pas parlé du reflow (qui impacte le layout par exemple) et qui influe sur les perfs. Mais là on parle de l’interaction sur une page après le chargement initial, c'est pour cela que je ne vois pas où est le problème.

Je laisse la main à d'autres alsanautes pour voir ce qu'ils vont en dire. Je lirais leurs commentaires avec intérêt.

Amicalement.

PS : il y a un truc que j'aimerais bien connaître, c'est les outils que vous utilisez pour évaluer ces performances. À part Lighthouse je veux dire. Parce que suis curieux de savoir sur quoi les gens se fondent pour affirmer tel ou tel principe.
Modifié par Olivier C (03 Dec 2023 - 13:46)

J'avais dis que je ne défendrais pas le concept, parce que ce n'est pas le mien. Je peux toutefois l'expliquer, en partie.

"Mais que vient faire l'apparence du site là-dedans ? Je parle ici de ce que voit l'utilisateur grâce au CSS, où via des manipulations JavaScript sur des données déjà existantes dans la page."

Ce que voit l'utilisateur impacte les Core Web Vitals, et le JS qui change des choses via une interaction de l'utilisateur dans la page en impacte directement le FID. Enfin pour ce que j'en ai compris…

Je ne comprends pas.

Que l'on s'attache à rechercher une performance pour le rendu des données (le HTML, du JSON-LD...), ceci afin d'exposer ces données le plus rapidement possible aux moteurs de recherche, là, ok, je comprends : il s'agit ici de générer la page le plus rapidement possible et dans ce cas, la rapidité du serveur, l'optimisation du poids des ressources de la page et quelques autres subtilités seront des critères importants pour le SEO (en plus de tout ce que l'on peut faire par ailleurs comme la sémantique du HTML et la structuration des données bien sûr).

Mais que vient faire l'apparence du site là-dedans ? Je parle ici de ce que voit l'utilisateur grâce au CSS, où via des manipulations JavaScript sur des données déjà existantes dans la page. Dans mon post précédent, lorsque je parlais de performance, je parlais du rendu de la mise en forme de la page, pas de la génération du rendu des données.

Alors oui, les moteurs les plus évolués commenceraient à lire un peu de JS... parait-il. J'entends ça depuis 10 ans. Ça reste à prouver car, pour l'instant, pour des applications full React, ne s'appuyant pas sur un framework backend (tel que Next.js, capable de fournir du contenu HTML pour chaque URL), ce n'est pas glorieux pour le SEO. Quand au CSS... j'entendais à une époque que, peut-être, le contenu caché en `display: none` n'était pas correctement référencé... Là encore on a des preuves ? Et si le contenu caché faisait parti d'un composant accordéon ou onglets ? Vous croyez que Google et consort n'y auraient pas pensé et auraient préférés s'embêter à déréférencer du contenu alors qu'ils ont d'autres chats à fouetter ? Ils faudrait déjà qu'ils arrivent enfin à correctement analyser du HTML de base***.

On en dit des choses dans le monde du web... Quand j'ai commencé en 2008/2009 on disait aussi que le sélecteur "*" n'était pas performants, les articles à ce sujet tournaient en boucle sur les blogs d'intégrateurs... 10 ans plus tard : nop.

__________________
*** deux points :

1/ Oui, je reconnais que je suis provoc' sur ce coup : en réalité le problème n'est pas tant que les moteurs n'arrivent pas à analyser correctement le HTML que le fait qu'ils soient obligés de tenir compte des (très) mauvaises pratiques de nombre de sites webs (sans doute statistiquement les plus nombreux). C'est un paramètre qui rentre forcément en compte dans la balance. Les GAFAM connaissent leurs intérêts : ce qu'ils veulent, c'est fournir du contenu de qualité à leurs utilisateurs. Alors bien sûr qu'ils poussent aux meilleures pratiques ils savent bien que, trop souvent, "contenu de qualité" ne rime pas forcément avec "contenu optimisé pour le SEO". Ils sont donc obligés de faire avec et ne pas trop déclasser un contenu de qualité mal référencé. Par contre leurs utilisateurs veulent du contenu qui s'affichent rapidement et là c'est une autre histoire.

2/ Et non, je ne suis pas tout à fait provoc' pour rien : en effet, il ne faut pas s'imaginer que les moteurs de recherche soient si au top que cela. Dix ans après l'introduction de HTML5 la balise <figure> n'était toujours pas prise en compte (Par exemple, le contenu d'un <figcaption> en dessous de son image était rattaché à l'image suivante, sans aucune prise en compte de la structure du HTML, comme du vulgaire texte qui aurait comme règle de devoir toujours précéder son image. Je ne sais pas où nous en sommes aujourd'hui, je n'ai pas refais de test).
À ce jour, en 2023, la balise <section> ne structure toujours pas la hiérarchie des titres de la page en cours (sauf pour les styles) : en clair, si on met une balise <h1> dans une section en se disant "je peux le faire, après tout je suis en HTML5 et c'est la norme"... et bien on a tout faux (et sur les blogs d'intégrateurs, qu'est-ce qu'on nous raconte ? ).
On avait aussi des problèmes avec les contenus de details/summary, certains d'entre eux ont été réglés récement. J'en passe et des meilleures. Bref, pas terrible tout ça...
Modifié par Olivier C (30 Nov 2023 - 23:48)

Merci j'ai corrigé.

Par contre j'ai un petit souci :

Pour empêcher la validation par PHP j'ai mis e.preventdefault au début de la validation donc j'ai bien mes vérifications JS
Le problème c'est que je ne sais pas ressortir du e.preventdefault quand le champ est correct pour passer à la validation php

Comment pourrais je faire ?

Hello,

Ça fait un bout de temps que je n'ai pas touché à JQuery et je ne saurais t'aider plus sur la validation de ton formulaire.

Par contre, concernant la réponse de la requête Ajax et son traitement, il me semble que c'est au sein de la méthode $.ajax() que tu peux accéder au contenu de la réponse, et effectuer un traitement spécifique selon la valeur de success. Sur internet, on trouve beaucoup d'exemples en ce sens, en voici un qui je pense devrait fonctionner dans ton cas :

$.ajax({
    url: 'formula.php',
    type: 'POST',
    success: function(response) {
        if (response.success) {
            console.log('OK');
        } else {
            // Sinon, success vaut false
            console.log('KO');
        }
    },
    error: function(error) {
        console.log('Error : ', error);
    }
});

PS: dans mon précédent message s'était glissé une petite erreur, echo json_encode($data) au lieu de echo json_encode($response). C'est corrigé.

"On reste sur une présentation de documents web, les performances à ce niveau n'ont pas vraiment d'impacts significatifs. "

Pour les humains, oui, je suis bien d'accord !
Mais pas pour Google apparemment. La perf. web et le SEO ne sont pas vraiment dans mes compétences professionnelles (en tout cas pas mes spécialités) et je ne défendrais donc pas ce qui suit, mais d'après les experts de ces domaines dans la société pour laquelle je travaille (et pour qui le référencement et donc les perfs sont vitales), toutes dégradation, même infime de ces perfs est catastrophique. C'est pourquoi nous sommes (entre-autre) en train de passer ttes nos pop-ins "à l'ancienne" (<div> avec JS) à des <dialog> sans JS. J'ai réussi à tout reproduire sauf le no-scroll du body avec cette balise Pour le "no-scroll" j'ai pensé au body:has(), mais le spécialiste perf. me l'a très fortement déconseillé (pour ne pas dire interdit…). Je cherche donc des arguments dans un sens ou dans l'autre pour étayer mon avis.

Bonjour,

Justement j'en parlais récemment sur le forum : Firefox v.121+ supporte enfin le sélecteur CSS :has(). Donc ça arrive bientôt pour tout le monde et il faut savoir que, après beaucoup de tâtonnement, :has() se révèle excellent et ne pose pas de problème de perf' (ce qui était vraiment un problème auparavant et c'était la raison pour laquelle :has() a mis longtemps avant d'être implémenté par les navigateurs).

Après... une classe sur le body via JavaScript... je le fais couramment et il n'y a pas vraiment d'impact en JS non plus. Par exemple, sur ce site, si on réduit la taille de la fenêtre le menu est transformé en menu hamburger, et j'utilise alors une classe sur les tags <html> et <body> pour bloquer le scroll à l'ouverture du menu (avec overflow: clip) : y'a pas de problème. Je défie quiconque de percevoir quoi que ce soit comme latence au niveau de l'utilisateur final. Vous imaginez tous les sites codés avec React et Vue.JS ? Ils en manipulent autrement du DOM (et même pire : du DOM virtuel) !

On reste sur une présentation de documents web, les performances à ce niveau n'ont pas vraiment d'impacts significatifs.
Modifié par Olivier C (30 Nov 2023 - 15:47)

Bonjour,

Je vérifie un champ de formulaire avec javascript en utilisant ajax

J'arrive à bloquer l'appel au serveur quand response.error =true mais je n'arrive pas quand il n'y a plus d'erreur (response.error = false) à lancer l'appel au serveur et effectuer la requête PHP

.done(function(response) {
            if(response.error == true)
                {
                 $('#reference').addClass('error').after('<span class="error">'+ "Cette référence est déjà enregistrée" +'</span>').next().hide().delay(speed).slideDown(speed);
                event.preventDefault(); //empêcher une action par défaut*/  
                }
else
 {  //!!! QUOI FAIRE ?
}

Comment faire ?

Merci pour votre aide
Modifié par dudu22 (30 Nov 2023 - 18:26)

Bonjour.

J'ai une question un peu "particulière. Je la pose quand même ici dans l'espoir qu'un "sachant" soit dans les parages pour me répondre.

Avant, quand on voulait modifier dynamiquement le <body> on utilisait du JS pour positionner une classe sur celui-ci (p. ex : pour bloquer le scroll lors de l'affichage d'une pop-in avec un overflow: hidden;…). Le problème de cette méthode est qu'elle n'est pas terrible au niveau perfs : quand le navigateur reçoit la demande Javascript d'ajout de classe, il reparse tout le DOM pour vérifier les impacts éventuels sur chaque éléments individuellement…

Il y a (presque) aujourd'hui une autre solution : body:has() (je dis "presque" parce qu'il reste encore FF a trainer un peu la patte sur l'implémentation de :has(), mais cela devrait bientôt arriver…).

Ma question est donc : body:has() a-t-il un impacte au niveau perfs ? Et si oui, est-il supérieur, égal, ou inférieur à la méthode JS ?

Dans mon parcours de programmation Python, je suis aux prises avec les nuances des différentes structures de boucles et je cherche à clarifier les distinctions entre les boucles for et while. Voici un extrait de code illustrant leur utilisation :

# Example using for loop
for i in range(5):
    print("Iteration using for loop:", i)

# Example using while loop
j = 0
while j < 5:
    print("Iteration using while loop:", j)
    j += 1

Bien que les deux boucles semblent capables d’obtenir des résultats similaires, quelles sont les principales différences entre les boucles for et while en Python ? Bien que j'essaie également d'apprendre de plusieurs blogs, dans quels scénarios une structure de boucle serait-elle préférée à l'autre, et y a-t-il des considérations de performances ou des conventions de codage à prendre en compte lors du choix entre elles ? De plus, pouvez-vous partager des informations sur les aspects de lisibilité et de maintenabilité de l’utilisation des boucles for et while dans le code Python ?

Bonjour,

a écrit :
Malgré le code apparemment simple pour formater la date actuelle, je n'obtiens pas le résultat attendu.

Quel est le résultat que tu obtiens, et quel est le résultat que tu attends ?
Si tu n'expliques pas clairement ton problème, personne ne pourra t'aider.

C'est la base de la demande d'aide sur un forum: fournis toutes les informations que tu peux, et ne t'attends pas à ce qu'on les devine.

Par contre, si je peux me permettre une première remarque: tu utilises les classes Date et SimpleDateFormat, qui sont dépréciées depuis longtemps (elles datent de Java 1.0).
Tu devrais plutôt utiliser les classes du package java.time, en l'occurence ici LocalDate ou LocalDateTime, et DateTimeFormatter pour la mise en forme. Elles existent depuis Java 8, il est peu probable que tu utilises une version plus ancienne de Java (à moins que tu ne maintiennes une application qui a déjà une bonne dizaine d'années).

Super merci beaucoup, ma requête marche dans formula.php


Mais je n'ai pas de message quand la valeur existe déjà au niveau du

$('#plant_Add_Form').validate({

        rules: {
            reference: {
                required: true,
                REFERENCE_NOT_DUPLICATE: true
            }
        },
        messages: {
            
            reference: {
                required: "Entrez la référence.",
                REFERENCE_NOT_DUPLICATE: "Existe déjà",
                }
        },

Je m'interroge sur l'écriture :

deferred.resolve(response !== true);

Je me serai attendu à :
deferred.resolve(response.success); pour avoir true ou false

return deferred.promise(); n'a l'air de rien retourner alors qu'il devrait je pense retourner false ou true
Modifié par dudu22 (29 Nov 2023 - 11:09)

Hello,

Si ta requête Ajax ne retourne rien, c'est normal : tu dois en fait print le contenu de cette réponse dans le corps de la réponse HTTP renvoyée. Sinon, cette réponse sera effectivement vide. Il vaudrait alors mieux utiliser la fonction echo plutôt que return dans ton script PHP.

Par exemple :

// ...

if ($result>0) {
    $response = ['success' => true];
}
else {
    $response = ['success' => false];
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($response); // EDIT : Il y avait une erreur ici, $data au lieu de $response

Le header est optionnel, tu n'es pas obligé de retourner une réponse au format Json mais c'est plus pratique et conventionnel.
Modifié par Loraga (30 Nov 2023 - 20:20)

C'est ce que j'ai fait et que je mentionne dans mon post.
Mais il n'y a pas que les mentions légales, il y a aussi le Copyright et quelques trucs. Ça fait un gros pavé qui ne ressemble plus à un footer (en tous cas à 99 % de ceux que je vois sur le net).
Je peux aussi faire un lien vers une nouvelle page, par exemple "Mentions légales", mais une page ne comportant que ces mentions. Le texte mis en page correctement, mais sans menus et pied de page. Je l'ai fait pour le plan du site et ça marche bien. La flèche du navigateur ou un lien de retour comme tu le montre permet de quitter la page pour revenir au site. On recharge toujours la page, mais je n'ai pas à faire le travail pour transformer toutes les ancres du menu.
En attendant, ça m'a été bénéfique de me pencher sur ça, j'ai découvert que tous les liens du Plan étaient en 404.

Merci beaucoup pour ton aide mais cela ne marche pas, j'espère que je n'ai pas d'erreurs autre part

La requête sur reference marche

mais j'ai un problème sur formula.php qui ne fonctionne pas ?

Pourtant elle récupère bien la valeur mais ne renvoie rien ?
Modifié par dudu22 (28 Nov 2023 - 18:34)

Bonjour,

Il y a une possibilité via javascript.
par exemple :

const titlemap = document.querySelector("svg title");
const defTitle = titlemap.textContent;
for (let e of document.querySelectorAll("svg path")) {
  e.addEventListener("mouseover", function () {
    titlemap.textContent = e.getAttribute("data-departement");
  });
  e.addEventListener("mouseleave", function () {
    titlemap.textContent = defTitle;
  });
}

On peut récupérer le contenu du data-attribute au survol et on remet l'original en sortant de la zone.
non testé, mais voilà l'idée.
cdt
Modifié par gcyrillus (28 Nov 2023 - 17:12)

bonjour
pourquoi ne pas mettre tes mentions légales en bas de ta page unique ?

sinon d'une page voisine pour revenir à ta page principale:

<a href="page1.html">retour</a>

ou à un endroit de ta page principale en précisant l'id:

<a href="page1.html#ici">retour</a>

Salut Je pense qu'il faudrait que tu te rapproche des concepts des promesses javascript.

L'appel AJAX est comme son nom l'indique Asynchrone. Ce qui signifie que le code continue son exécution pendant que la requête AJAX est en cours.

Cela signifie que lorsque validate_reference_not_duplicate retourne result, la requête Ajax n'a pas encore été complétée, donc result reste indéfini.
C'est peut être une solution que d'utiliser les promesses pour gérer la logique asyncrhone.


exemple :

$.validator.addMethod("REFERENCE_NOT_DUPLICATE", function (value, element) {
    var deferred = $.Deferred();

    validate_reference_not_duplicate(value)
        .done(function (response) {
            deferred.resolve(response !== true);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            deferred.reject("Erreur de validation: " + textStatus);
        });

    return deferred.promise();
}, "Référence déjà utilisée.");

function validate_reference_not_duplicate(reference_value) {
    return $.ajax({
        url: "formula.php",
        type: "POST",
        data: { reference: reference_value }
    });
}

Concernant l'ajout de Deferred, voici une explication piqué sur le net :

L'objet Deferred est une promesse qui peut être dans l'un des trois états principaux : "pending" (en attente), "resolved" (résolu), ou "rejected" (rejeté). Cet objet est utilisé pour représenter le résultat d'une opération asynchrone qui peut être résolue avec succès (resolved) ou échouer (rejected).

Dans le contexte de la validation asynchrone, une Deferred est souvent utilisée pour gérer la logique asynchrone d'une manière qui rend le code plus lisible et maintenable.
Modifié par JENCAL (28 Nov 2023 - 14:59)

Hello,
Est-ce qu'il ne serait pas possible d'avoir une structure comme ceci:

<svg>
   <g><!-- un group par région -->
      <path /><!-- Région -->
      <text /><!-- Titre -->
      <text /><!-- Description -->
   </g>
</svg>

text { opacity: 0; }
path:hover ~ text { opacity: 1; }

Bonjour,
voilà le problème.
J'ai un site onepage, tous les liens du menu sont des ancres qui dirigent vers des points précis de l'unique page.
Si je veux, dans mon footer, créer un lien qui va par exemple vers "Mentions légales", je dois construire une nouvelle page "Mentions légales", qui ne contiendra que ces mentions légales, mais devra aussi reproduire l'ergonomie du site original - menu, footer, etc. C'est en tous cas ce que je vois partout sur le net.
C'est là que le problème se pose. Sur cette nouvelle page "Mentions légales", les ancres du menu ne fonctionnent plus, elles ne peuvent plus atteindre la page principale. Je dois transformer ces liens du menu en liens https qui rechargent le site. C'est un peu lourd, et c'est pourquoi j'ai réalisé un footer où tout est écrit en dur, comme sur une page normale.
Première question, y-a-t-il une solution pour régler ce problème.
Seconde question, le footer tel que je l'ai conçu est-il un problème. Je n'en vois aucun réalisé de cette façon sur le net, il doit bien y avoir une raison.
Je n'ai évidemment pas ce problème sur les sites multi-pages.

Bonjour,

Je souhaite vérifier qu'une donnée n'existe pas pour un champ de formulaire avant de le valider en utilisant Jquery Validator avec Ajax mais je n'arrive pas à récupérer ma valeur ( .done(function(response) en JS

Merci pour votre aide

Mon fichier de formulaire

<?php 

include("formula.php");

include("core/Views/templates/default.php");

?>

<div id="test">

<div class="container container-center margin">

    <div class="card card-default card-body text-center">
        <div class="col-sm-6 offset-sm-3 text-center <!--was-validated-->">
           <form class="form justify-content-center" method="post" id="plant_Add_Form" name="plant_Add_Form" >
                <fieldset>
                    <legend >Ajout Plante</legend> 
                
                    <div class="form-group row">
                        <label for="reference" class="col-sm-4 col-form-label ">Reference</label>
                        <input class="col-sm-7 col-form-label " type="text" name="reference" id="reference"  >
                    </div>
                                        
                    <button class="btn btn-primary" id="add" name="add">Ajouter</button>
                
                    <button  type="reset" class="btn btn-primary reset" id="reset" name="reset"  >Effacer</button>   

                </fieldset> 	
            </form> 
        </div>    
   </div>     
</div>

Mon JS

$.validator.addMethod("REFERENCE_NOT_DUPLICATE", function (value, element) {
return this.optional(element) || validate_reference_not_duplicate( );
},
"Référence déjà utilisée."
);

function validate_reference_not_duplicate() {

        var reference_value = $('#reference').val();

        var result
    
        $.ajax({
            url: "formula.php", // script to validate in server side
            type:"POST",
            data: {reference: reference_value}//LES DONNEES QUE L'ON ENVOIE AU FORMULAIRE
         })

        .done(function(response) {
           /console.log (response);
            result = (response !== true) ? true : false;
           
                    
       })
 
        .fail(function(jqXHR, textStatus, errorThrown) {

            if(jqXHR.status == 400)
                {
                alert("Erreur 400");   
                }
            else
                {
                alert (jqXHR, textStatus,errorThrown)
                }    
       
        })

        .always(function() {

        });//FIN AJAX 

        return result; 
    }

  $('#plant_Add_Form').validate({

        rules: {
            reference: {
                required: true,
                REFERENCE_NOT_DUPLICATE: true
            }
        },
        messages: {
            
            reference: {
                required: "Entrez la référence.",
                REFERENCE_NOT_DUPLICATE: "Existe déjà",
                }
        },

            
        submitHandler: function(form) {
            form.submit();
        }
    });  

</script>

Mon fichier formula.php

<?php

if(isset($_POST['reference']))
{
require_once("connexion/connexion.php");

mysqli_select_db($db, $dbname);

$reference = $_POST['reference'];

$query = "SELECT reference FROM plants WHERE reference = '$reference'";

$query_retrived = mysqli_query($db, $query) or die ("Error:".mysqli_error($db));
$rows = mysqli_fetch_assoc($query_retrived);
$result = mysqli_num_rows($query_retrived);


if ($result>0)
{
return true;
}
else
{
return false;
}

mysqli_free_result($query_retrived);
}
Modifié par dudu22 (28 Nov 2023 - 13:09)

Bonjour,

Je viens d'éditer ton message en suivant l'indication que tu nous as données ; j'espère que c'est OK ainsi

Bonjour à vous,
Je développe une carte interactive (france départements) avec des marqueurs qui aux clics mettront en exergue via changement de couleurs département des zones d'interventions,.

La carte est en svg.
J'aimerai qu'au survol de chaque départements le n° apparaissent (comme dans un 'alt' sur une image en html).
Mais voila le langage svg et les paths n'acceptent pas les alt, ni les titles, ni les datas...
Par contre si je mets un titre à ma carte, celui-ci apparait comme un alt à chaque hover sur département.

J'aimerai que ce titre ne soit pas visible mais peut-être que via js, il est possible de demander qu'a chaque id departement , le titre change avec le n° du département ?

je vous partage le code de deux départements :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
	 height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600">
<title>ma carte<title>
<g id="Departements">
	<g>
		<g>
			<path data-departement="57" id="dept-57"  fill="#edebeb" stroke="#999999" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" d="M522.1,129.7
				l-6.399,4.1l-6.9-1.2l-2.5,1.2l-2.3-3.9l-3-1.4l-2.8,1.6l-0.3,2.9l-2.7-0.7l-8-9.1l-1.7-5.9l-3-2l-11.1-2.6l-4.4,3.5l-2.8,0.1
				L459.1,114l2.4,9.4l2.5,1.6l1.2,3.6l-1.601,3.1l0.9,5.6l-2.8,0.1l4.399,7.5l11.5,4l-0.399,2.8l2.7,5.2l8.5,1.5l5.3,3.8
				l14.399,5.4l2,2.6l3.5,0.4l2.2-1.8l3-13.3l-4.3-3.4l-2.9-0.4l-1.399,2.5l-2.3-1.6l1.699-2.5l-5.5-2.4l4.9-10.8l0.8,2.8l9.101,4.6
				l8.899-0.3l1.4-2.6l1.399-4.3H530.4L522.1,129.7z" />
				<textPath href="#dept-57">département 57</textPath>
			<path data-departement="67" id="dept-67" fill="#edebeb" stroke="#999999" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" d="M518.9,144.3
				l-9.101-4.6l-0.8-2.8l-4.9,10.8l5.5,2.4l-1.699,2.5l2.3,1.6l1.399-2.5l2.9,0.4l4.3,3.4l-3,13.3l-2.2,1.8l-3.5-0.4l1.9,1.4l0,0
				l-1.3,10l5.2,2.2l3.1,0.2l8.5,5.6l0.3,2.8l4.2,2l5.8-13.7l1.4-15.7l10.5-13.7l3.899-10.6l-8.5-3l-14.5-0.6l-1.399,4.3l-1.4,2.6
				L518.9,144.3z"/>
</g>
</svg>

Merci de vos suggestions
Modifié par JustEpic (28 Nov 2023 - 12:20)

Je suis tombé sur ce lien web à propos des polices de caractère pour coder :
https://kinsta.com/fr/blog/meilleures-polices-programmation/
Peut être qu'il intéressera l'un d'entre vous.

Bonjour,

Loraga a écrit :
... Dans les deux cas, cela permet de n'avoir qu'une seule URL sur laquelle le contenu change sans recharger la page ou changer d'URL. Mais c'est un gros chantier ^^

Et c'est probablement catastrophique pour le référencement.

Amicalement,

Bonjour,

Après analyse il n'y avait pas de bug CSS, ce sont juste les couleurs qui étaient proches et la différence pas facilement visible avec une carte graphique de base...

Je coche Résolu.

Encore merci pour l'aide et les liens.

Pas mal, je me rappelle quand j'ai commencé ici sur le forum, ces règles de styles que l'on appelait plus ou moins "règle de maintenance css"...

Un partage de mon côté :

Étant donné que cette nouvelle règle débarque aux côté de beaucoup d'autres (Container Queries, opérateurs logiques...) : vu que @container a comme exigence d'avoir un formatage sur l'élément parent je procède ainsi :

.parent-grid, /* @note Fallback pour le sélecteur :has(), ajout de la classe via JS. */
:has(> [class^=grid]) {
  container: grid / inline-size;
  width: 100%; /* @note Important si le conteneur n'a pas de largeur définie par défaut. */
}

[class^=grid] {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  /* the code... */
}

@container grid (35em < width) {
  .grid2,
  .grid3,
  .grid4 {
    --n: 2;
    /* the code... */
  }
}

Et maintenant, le plus intéressant, un p'tit fallback maison en JavaScript :

// @note Fallback pour CSS Container Queries et grid layout @affected Firefox en particulier, et les navigateurs moins récents.
// @see  https://css-tricks.com/a-new-container-query-polyfill-that-just-works/
 
// @note Conditional JS : plus performant que de passer par la détection d'une classe dans le HTML comme pour les autres scripts.
const supportContainerQueries = 'container' in document.documentElement.style // Test support des Container Queries (ok pour Chrome, problème avec Firefox)
const supportMediaQueriesRangeContext = window.matchMedia('(width > 0px)').matches // Test support des requêtes média de niveau 4 (Media Query Range Contexts).
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 // @todo Solution temporaire pour Firefox car, à ce jour, il n'existe pas de solution propre pour ce dernier. @todo À réévaluer dans le temps.

if (!supportContainerQueries || !supportMediaQueriesRangeContext || isFirefox) {
  getStyle('/styles/gridFallback.css', 'screen') // @note Une petite fonction maison qui m'injecte par défaut les styles indiqués dans le head.
  document.querySelectorAll('[class^=grid]').forEach(grid => grid.parentElement.classList.add('parent-grid')) // @affected Firefox =< v108 @note Compense le non support de :has() sur les grilles.
}

Modifié par Olivier C (24 Nov 2023 - 22:21)