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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager