Agrandir la hauteur d'une DIV en fonction d'une donnée textuelle ou d'un attribut non conventionnel

**clavier12AZQSWX** · 19/10/2020, 20h04

bonjour,

pour améliorer un système, j'ai l'occasion de placer un script JS dans le document ready pour modifier les propriétés des élements affichés.

mon souci :
le rendu d'une page contient une multitude d'élements DIV comme ça (en gros ce rectangle qui représentent des missions ,des cours....) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="boite">
<div class="groupedate">2020-10-20 : HR/SCIENCE</div>
<div class="horaire">08:50-10:20</div>
<div class="matiere">Maîtrise de la bio</div>
<div class="prof">holeg</div>
<div class="salle">Tour perret</div>
<div class="txt">HR/SCIENCE=marc,sophie,jackie</div>
</div>

Toutes les div de class boite ont la même hauteur et c'est un problème de compréhension visuel pour bcp de gens, et donc je voudrais que cette hauteur soit proportionnelle à la durée.

Notre prestataire nous dit qu'il a la possibilité de rajouter un attribut dans le DIV HORAIRE avec la durée en minutes pour que nous ayons ceci (noubeauté ligne 3) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="boite">
<div class="groupedate">2020-10-20 : HR/SCIENCE</div>
<div class="horaire" duree=90>08:50-10:20</div>
<div class="matiere">Maîtrise de la bio</div>
<div class="prof">holeg</div>
<div class="salle">Tour perret</div>
<div class="txt">HR/SCIENCE=marc,sophie,jackie</div>
</div>

Problème cette demande est payante par le prestataire...

mon idée est de savoir si on peut faire sans ou pas OU si on laisse le presta ajouter l'attribut DUREE, est-ce que ce sera utile pour nous sachant que l'attribut DUREE n'est pas une norme du w3c pour un champs div ! (peut-être créateur de bug)

Est-ce que en jquery ou simplement JS, je pourrais capter pour CHAQUE div, cette valeur duree ET ensuite allonger le div (sa height) en fonction de la valeur ?

j'ai pensé à ça (écritue expérimentale car la partie en italic, je sais pas comment l'écrire:

$(".boite").css('height', _self.attr( 'duree' ));

// je sélectionne tous les objets div de class boite et pour chacun, je change la height en fonction de l'attribut de chacun

est-ce que c'est possible sans la modif du presta ? donc récuper le contenu html du div horaire, en déduire une durée ET ensuite mettre cette durée dans le div boite parent ?
ou faut-il obligatoirement l'attribut 'duree' mais qui n'est pas conventionnel du tout (et payant à faire mettre)

est-ce que ma ligne de code peut marcher ou dois-je faire un truc avec un for each ?

Je rappelle que je n'ai la main que sur la parti js du document ready, je ne peux pas "regénérer" le contenu html (rôle du prestataire)

merci de vos conseils

**-Nikopol-** · 19/10/2020, 21h08

Bonsoir, on pourrait créer cet attribue en JS (.setAttribute) mais après il faudrait le récupérer donc ce n'est pas très utile.
Voici ce que je ferai, le code est suffisamment commenté je pense

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .boite{
            border: 2px solid black;
            border-radius: 5px;
            padding: 1em;
            margin: 1em auto;
            width: 50%
        }
    
    </style>
</head>
 
<body>
 
    <div class="boite">
        <div class="groupedate">2020-10-20 : HR/SCIENCE</div>
        <div class="horaire" duree=90>08:50-10:20</div>
        <div class="matiere">Maîtrise de la bio</div>
        <div class="prof">holeg</div>
        <div class="salle">Tour perret</div>
        <div class="txt">HR/SCIENCE=marc,sophie,jackie</div>
    </div>
    <div class="boite">
        <div class="groupedate">2020-10-20 : HR/SCIENCE</div>
        <div class="horaire" duree=90>09:35-12:25</div>
        <div class="matiere">Maîtrise des maths</div>
        <div class="prof">Rudolf</div>
        <div class="salle">Tour de garde</div>
        <div class="txt">HR/SCIENCE=laurel et hardy</div>
    </div>
    <div class="boite">
        <div class="groupedate">2020-10-20 : HR/SCIENCE</div>
        <div class="horaire" duree=90>09:50-10:20</div>
        <div class="matiere">Maîtrise de l'informatique</div>
        <div class="prof">Martin</div>
        <div class="salle">Salle 208</div>
        <div class="txt">HR/SCIENCE=Henry</div>
    </div>
 
 
    <script>
        const getDurationMin = (duration) => {//fonction qui va renvoyer le nombre de minutes
            let start = duration.split('-')[0]// avant "-" heur de debut
            let end = duration.split('-')[1] // apres ...
            
            let startMin = +start.split(':')[0]*60 + +start.split(':')[1]//heure *60 + min 
            let endMin = +end.split(':')[0]*60 + +end.split(':')[1]// le + devant end est l'equivament de number
            
            return  endMin - startMin //on retourne la différence : la durée
            
            
        }
    let boxes = document.querySelectorAll('.boite')//on récupère toutes les div boites
    
    boxes.forEach(box=>{
        let duration = box.querySelector('.horaire').textContent // onrecupère le contenu de la div
        let minutes = getDurationMin(duration)//on reccupère les minutes
        box.style.height= minutes/5 + 'em' //on fixe la hauteur
    })
    
    
    
    </script>
</body>
 
</html>

PS: je serai curieux de savoir combien le prestataire facture ca

**clavier12AZQSWX** · 19/10/2020, 22h13

bonjour/bonsoir Nicopol,

merci pour votre réponse.
donc vous avez optez pour l'option 1 : on détermine nous-même la durée plutôt que demander au presta de la rajouter dans un attribut.

Vu que qu'il y a au pire 100 div box par page, ça ne devrait pas faire ralentir le browser côté client avec le calcul de la durée à partir du parse de la chaine horaire.

Dans l'optique d'une solution 2 (le presta ajoute un attribut nommé "duree"), est-ce que ça pose un souci que l'attribut ne fasse pas parti du w3c ? si on passe la page à un validator, ça retournera une erreur. ça ne doit pas être courrant d'ajouter des attribut sans rapport avec le html. par exemple, le navigateur (et son interpréteur) ne saura pas si la bonne syntaxe est duree=90 ou duree=90min ou duree="90" ou duree="90min".. Notre doc est par chance "<!DOCTYPE html>" donc moins pointilleux, mais je me pose la question de comment vont interpréter les navigateur en voyant apparaitre un attribut inconnu....
j'ai regardé la page https://www.w3schools.com/jsref/met_...tattribute.asp et elle ne dit pas ce qu'il se passe si on ajoute un attribut folklorique...

ps : aucun coût unitaire du prestataire car ça rentre dans un lot de "jobs" mensualisés par contrat. ça coute rien, ça prend juste la place d'une autre modification... (par exemple un droit à X modifs fonctionnelle ou/et cosmétique par mois/trimestre)

**-Nikopol-** · 19/10/2020, 22h27

Pour le choix du back ou du front, ca depend, il est possible ici que niveau du back il y ai la durée et la date de debut auquel cas cette durée et deja là donc la mettre dans un attribut serait judicieux plutot que de faire deux fois les calculs. En revanche si le prestatire fait ca correctement il passera pas les data-* attribut : https://developer.mozilla.org/fr/doc...versels/data-*

**clavier12AZQSWX** · 21/10/2020, 12h07

bonjour,

même si la solution proposée fonctionne, j'ai néanmoins réussi à faire descendre l'attribut data-duree en minute directement dans le code html au niveau de la div BOITE (et non pas au niveau de la div fille HORAIRE)
maintenant le rendu est comme àa :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="boite" data-duree="90">
        <div class="groupedate">2020-10-20 : HR/SCIENCE</div>
        <div class="horaire" >08:00-09:30</div>
        <div class="matiere">Maîtrise de la bio</div>
        <div class="prof">holeg</div>
        <div class="salle">Tour perret</div>
        <div class="txt">HR/SCIENCE=marc,sophie,jackie</div>
    </div>

du coup j'ai modifié le code ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
boxes.forEach(box=>{
 
        let minutes = box.attr('data-duree'); //on reccupère les minutes
        box.style.height= minutes/5 + 'em' //on fixe la hauteur
    })

mais étrangement l'accès à la propriété duree ne fonctionne pas, ça indique que attr() n'est pas une fonction.
j'ai aussi tenté :
box.data('duree');
même résultat...

avez-vous une idée de la coquille ?
avez-vous une idée du pourquoi ?

**-Nikopol-** · 21/10/2020, 12h26

bonjour, c'est getAttribute('data-durée')

**clavier12AZQSWX** · 21/10/2020, 16h14

Envoyé par -Nikopol-

bonjour, c'est getAttribute('data-durée')

merci ! merci beaucoup.
j'ai compris j'ai mélangé/confondu les écritures jquery et DOM pures....
il va falloir que j'arrête de jongler , ça me retourne dans tous les sens l'esprit .

**clavier12AZQSWX** · 21/10/2020, 16h51

une dernière question pour ma culture personnelle :

pourquoi l'absence des point-virgules en bout de lignes dans votre code ne produit ni erreur ni alerte par le navigateur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
let boxes = document.querySelectorAll('.boite')//on récupère toutes les div boites
 
    boxes.forEach(box=>{
        let duration = box.querySelector('.horaire').textContent // onrecupère le contenu de la div
        let minutes = getDurationMin(duration)//on reccupère les minutes
        box.style.height= minutes/5 + 'em' //on fixe la hauteur
    })

**NoSmoking** · 22/10/2020, 10h23

Bonjour,

pourquoi l'absence des point-virgules en bout de lignes dans votre code ne produit ni erreur ni alerte par le navigateur ?

parce que le point-virgule n'est pas obligatoire pour que cela fonctionne, sous certaines conditions.

Le seul avantage est que cela fait gagner un caractère par ligne, petit gain, mais il y a des cas où cela peut s'avérer dangereux, minification par exemple.

Airbnb JavaScript Style Guide() -> Semicolons

Agrandir la hauteur d'une DIV en fonction d'une donnée textuelle ou d'un attribut non conventionnel

JavaScript

Discussions similaires

Partager

Partager