TP à réaliser, taille élément inline

**Romenag** · 11/06/2017, 14h48

Bonjour,

Je suis un cours "Créer des pages web interactives avec JS" et j'en suis à la première activité sur la modification du style des éléments.

J'ai plus ou moins réussi en tâtonnant un peu mais bon...

Voilà le résultat :
Nom : ScreenShot_forum.png
Affichages : 255
Taille : 14,6 Ko

Nom : ScreenShot_forum.png
Affichages : 255
Taille : 14,6 Ko

Obtenu avec ce code JS :

Code :

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
 
/* 
Activité 1
*/
 
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
 
listeLiens.forEach(function (liste) {
 
    var spanElt = document.createElement("span");
    spanElt.id = "span";
 
 
    var titreElt = document.createElement("a");
    titreElt.id = "titre";
    titreElt.classList.add("lien");
    titreElt.textContent = liste.titre;
    titreElt.style.color = "#428bca";
    titreElt.href = liste.url;
    titreElt.style.fontWeight = "bold";
    titreElt.style.textDecoration = "none";
    titreElt.style.fontSize = "1.5em";
 
 
    var urlElt = document.createElement("cite");
    urlElt.id = "url";
    urlElt.classList.add("lien");
    urlElt.textContent = liste.url;
 
 
    var auteurElt = document.createElement("div");
    auteurElt.id = "auteur";
    auteurElt.classList.add("lien");
    auteurElt.textContent = "Ajouté par : " + liste.auteur;
    auteurElt.style.marginBottom = "20px";
 
 
 
 
    document.getElementById("contenu").appendChild(spanElt);
    document.getElementById("span").appendChild(titreElt);
    document.getElementById("span").appendChild(urlElt);
    document.getElementById("span").appendChild(auteurElt);
});

et voilà ce que je dois obtenir :
Nom : résultat_image.png
Affichages : 245
Taille : 31,9 Ko

Ce que je voudrais maintenant donc, c'est modifier la largeur et la hauteur de mes éléments "urlElt" pour les mettre à 100%.

J'ai essayé plusieurs choses dont par exemple

Code :

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

urlElt.style.width = "100%";

et autre variantes mais rien ne bouge à chaque fois...

Pouvez-vous m'aider ? Et me donner votre avis sur mon TP en même temps (me conseiller si jamais mon code est aussi maladroit que je le pense...

j'en suis vraiment au début de l'apprentissage et mes bases js sont assez médiocres... ) ?

Merci beaucoup d'avance !!

**Archimède** · 11/06/2017, 16h41

Si ça peut t'aider, j'ai fait ça comme ceci ( après, je ne suis pas un spécialiste en javascript... pour l'instant, je bricole...):

Code :

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
74
75
76
77
78
79
80
 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
<script>
 
var w=window.innerWidth, h=window.innerHeight;
document.body.style.backgroundColor="#ededed";
 
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
 
listeLiens.forEach(function (liste,index) {
    var spanElt = document.createElement("span");
    spanElt.style.position="absolute";
    spanElt.style.width=0.9*w+"px";
    spanElt.style.left=0.05*w+"px";
    spanElt.style.backgroundColor="#ffffff";
    spanElt.style.top=+(index+1)*h/12+"px";
 
 
 
    var titreElt = document.createElement("a");
    titreElt.id = "titre";
    titreElt.classList.add("lien");
    titreElt.textContent = liste.titre;
    titreElt.style.color = "#428bca";
    titreElt.href = liste.url;
    titreElt.style.fontWeight = "bold";
    titreElt.style.textDecoration = "none";
    titreElt.style.fontSize = "1.5em";
 
 
    var urlElt = document.createElement("cite");
    urlElt.id = "url";
    urlElt.classList.add("lien");
    urlElt.textContent = liste.url;
 
 
 
    var auteurElt = document.createElement("div");
    auteurElt.id = "auteur";
    auteurElt.classList.add("lien");
    auteurElt.textContent = "Ajouté par : " + liste.auteur;
 
 
 
    document.body.appendChild(spanElt);
    spanElt.appendChild(titreElt);
    spanElt.appendChild(urlElt);
    spanElt.appendChild(auteurElt);
 
});
</script>
 
</body>
</html>

**Romenag** · 11/06/2017, 16h44

Re-bonjour la communauté !!

Je continue de chercher depuis que j'ai poster mon message mais je ne trouve pas de solution à mon problème...

En fait je dois tout modifier en Javascript je n'ai pas le droit de toucher à la feuille de style CSS ou au fichier HTML.

Je crois me souvenir qu'on ne peut pas modifier la taille d'un élément inline non ? Du coup j'ai essayer d'adapter le "display: inline-block" du CSS à mon fichier JS, mais je dois pas l'utiliser correctement parce que ça ne m'aide pas plus...

Besoin de conseils pleeaaase !!

**Romenag** · 11/06/2017, 16h50

Envoyé par Archimède

Si ça peut t'aider, j'ai fait ça comme ceci ( après, je ne suis pas un spécialiste en javascript... pour l'instant, je bricole...):

Ah merci ! J'essaye de ce pas !!

Tu peux juste m'expliquer les deux lignes :

Code :

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

spanElt.style.width=0.9*w+"px"; spanElt.style.left=0.05*w+"px";

plus exactement la partie ' valeur*w+"px" ' ?

Edit : Ah et puis celle là que je n'avais pas vu :

Code :

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

spanElt.style.top=+(index+1)*h/12+"px";

C'est plus complexe que ce que j'ai vu dans mon cours !!

Edit2 : Aaarf, il y a celle là aussi :

Code :

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

1
2
var w=window.innerWidth, h=window.innerHeight;
document.body.style.backgroundColor="#ededed";

Ca explique un peu les autres mais c'est encore flou tout ça !

**Romenag** · 11/06/2017, 17h25

Bon je viens de regarder plus en détail ce que tu proposes et c'est assez complexe quand même...

Mon cours c'est vraiment les bases et je ne comprends pas ta solution... Et puis j'ai déjà une page HTML et une page CSS avec du code que je n'ai pas le droit de modifier...

Si tu as une solution plus simple, ou quelqu'un d'autre, je suis preneuse !!

Voici les deux fichiers associés à mon fichier JS que je n'ai pas le droit de modifier (si ça peut vous être utile...) :

Code :

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
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 1</title>
</head>
 
<body>
    <h1>Activité 1</h1>
 
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>
 
    <script src="../js/liensweb.js"></script>
</body>
 
</html>

et :

Code :

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
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}
 
span {
    font-weight: normal;
    font-size: 80%;
}
 
.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}

Merci d'avance !

**Archimède** · 11/06/2017, 17h34

En fait, je commence par chercher à connaître la largeur et la hauteur du contenu visible de la fenêtre de navigation.
ce qui me permet de fixer les dimensions en relatif pour les différents éléments de cette fenêtre...

Code :

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

1
2
 
var w=window.innerWidth, h=window.innerHeight;

ensuite

Code :

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

1
2
3
 
 spanElt.style.width=0.9*w+"px";
 spanElt.style.left=0.05*w+"px";

je m'arrange pour que la largeur des spanElt soit à 90% de la largeur de la fenêtre et je fixe leur position à gauche à 5% de w pour les centrer...

Pour terminer :

Code :

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

1
2
 
  spanElt.style.top=+(index+1)*h/12+"px";

Je me suis fixé arbitrairement une position top pour chaque spanElt qui soit h/12 pour le premier, ensuite 2*h/12 et 3*h/12.
index est un paramètre de forEach qui me permet d'obtenir l'indice des éléments de ta liste. (0,1,2)

Après le top, tu fais comme tu veux...
pour left et top, il ne faut pas oublier style.position="absolute";

a+

**Archimède** · 11/06/2017, 18h22

J'ai ça: mais j'ai enlevé le background du lien dans le CSS (désolé, il est redondant)

Code :

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style>
     body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        background-color: #eee;
        margin-left: 30px;
        margin-right: 30px;
     }
 
    span {
        font-weight: normal;
        font-size: 80%;
     }
 
     .lien {
        padding: 10px;
        margin-bottom: 10px;
      }
     </style>
</head>
 
<body>
 <div id="contenu">
 </div>
<script>
 
var w=window.innerWidth, h=window.innerHeight;
 
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
 
listeLiens.forEach(function (liste,index) {
    var spanElt = document.createElement("span");
    spanElt.style.position="absolute";
    spanElt.style.width=w-60+"px";
    spanElt.style.backgroundColor="#ffffff";
    spanElt.style.top=(index+1)*h/10+"px";
 
    var titreElt = document.createElement("a");
    titreElt.id = "titre";
    titreElt.classList.add("lien");
    titreElt.textContent = liste.titre;
    titreElt.style.color = "#428bca";
    titreElt.href = liste.url;
    titreElt.style.fontWeight = "bold";
    titreElt.style.textDecoration = "none";
    titreElt.style.fontSize = "1.5em";
 
 
    var urlElt = document.createElement("cite");
    urlElt.id = "url";
    urlElt.classList.add("lien");
    urlElt.textContent = liste.url;
 
 
 
    var auteurElt = document.createElement("div");
    auteurElt.id = "auteur";
    auteurElt.classList.add("lien");
    auteurElt.textContent = "Ajouté par : " + liste.auteur;
 
 
 
    document.getElementById("contenu").appendChild(spanElt);
    spanElt.appendChild(titreElt);
    spanElt.appendChild(urlElt);
    spanElt.appendChild(auteurElt);
 
});
</script>
 
</body>
</html>

Perso, je préfère mettre tous mes éléments en relatif par rapport à la fenêtre et n'avoir aucune valeur précise en pixels pour ne pas avoir de mauvaises surprises...les padding et margin en pixels ce n'est pas mon truc...Ici je mélange les deux et je ne définis pas les positions verticales des spanElts en fonction de leur hauteur (ce qu'il faudrait faire...)

**Romenag** · 11/06/2017, 18h43

J'ai rajouter quelques trucs pour obtenir ce que je voulais vraiment.

Du coup voici mon fichier JS :

Code :

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
74
75
76
77
78
79
80
/* 
Activité 1
*/
 
//Connaître la hauteur et la longueur du contenu visible de la fenêtre :
var w = window.innerWidth, h = window.innerHeight;
 
 
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
 
 
listeLiens.forEach(function (liste,index) {
 
    var spanElt = document.createElement("span");
    spanElt.style.position="absolute";
    spanElt.style.width = 0.9 * w + "px";
    spanElt.style.left = 0.05 * w + "px";
    spanElt.style.backgroundColor="#ffffff";
    spanElt.style.top=+(index+1)*h/5+"px";
    spanElt.style.paddingTop = "20px";
 
 
    var titreElt = document.createElement("a");
    titreElt.id = "titre";
    titreElt.classList.add("lien");
    titreElt.textContent = liste.titre;
    titreElt.style.color = "#428bca";
    titreElt.href = liste.url;
    titreElt.style.fontWeight = "bold";
    titreElt.style.textDecoration = "none";
    titreElt.style.fontSize = "1.5em";
    titreElt.style.paddingTop = "20px";
 
 
 
 
    var urlElt = document.createElement("cite");
    urlElt.id = "url";
    urlElt.classList.add("lien");
    urlElt.textContent = liste.url;
    urlElt.style.paddingTop = "26px";
 
 
 
    var auteurElt = document.createElement("div");
    auteurElt.id = "auteur";
    auteurElt.classList.add("lien");
    auteurElt.textContent = "Ajouté par : " + liste.auteur;
    auteurElt.style.paddingTop = "20px";
    auteurElt.style.paddingBottom = "20px";
 
 
    document.getElementById("contenu").appendChild(spanElt);
    spanElt.appendChild(titreElt);
    spanElt.appendChild(urlElt);
    spanElt.appendChild(auteurElt);
});

Voilà le résultat :

Nom : résultat final.png
Affichages : 216
Taille : 24,6 Ko

Tu en penses quoi ? C'est correct ? Je vais être notée alors...

Voici les consignes :

Le titre de chaque lien est cliquable et envoie vers son URL.
La couleur à donner au titre d’un lien est “#428bca”.
Les fichiers liensweb.css et liensweb.html ne doivent pas être modifiés.
Conformément aux bonnes pratiques vues dans le cours, les nouveaux éléments du DOM doivent être créés et modifiés avant d’être ajoutés à la page.
Les variables JavaScript doivent respecter la norme camelCase et le fichier liensweb.js doit être correctement indenté.

**Archimède** · 11/06/2017, 19h02

Personnellement, je suis prof de physique et je fais de la programmation pour le fun donc je n'ai pas les compétences d'un enseignant spécialisé en la matière...et, je ne me permettrais pas de porter un jugement sur un travail qui n'est pas de mon ressort. J'ai essayé de te donner un coup de main et je ne suis pas dans la tête de ton prof...
Le rendu est satisfaisant, il faudrait cependant améliorer le positionnement vertical des spanElts pour qu'ils soient à espacement fixe et dépendant de la hauteur de ceux-ci...

**Romenag** · 11/06/2017, 19h32

Ok merci pour le conseil !! Et pour ton aide !!

**eleydet** · 11/06/2017, 20h31

Bonsoir,

Il vient d'où, le tout premier code proposé par Romenag? A mon avis, ce code est erroné et maladroit.
- Erroné : Un identifiant (id) doit être unique.
- Maladroit : De préférence, le style devrait être placé dans une feuille de style à part.

**Archimède** · 11/06/2017, 20h34

De rien.

Bonne soirée

**Archimède** · 11/06/2017, 20h44

Envoyé par eleydet

Bonsoir,

Il vient d'où, le tout premier code proposé par Romenag? A mon avis, ce code est erroné et maladroit.
- Erroné : Un identifiant (id) doit être unique.
- Maladroit : De préférence, le style devrait être placé dans une feuille de style à part.

Je suis d'accord avec toi pour l'Id qui n'était pas unique...c'est pour ça que j'avais rectifié cette partie là...

Merci de le souligner

**Romenag** · 11/06/2017, 23h02

Il vient d'où, le tout premier code proposé par Romenag? A mon avis, ce code est erroné et maladroit.

Salut, baaaah, il vient de moi lol !
Je débute il faut être indulgent

...

Pour les id, j'ai merdé, je le savais en plus !

Mais pour le CSS bah j'avais pas le choix, ça fait parti des consignes, je ne devais pas toucher à la feuille de style CSS ni au HTML. En fait c'est un cours sur les bases de Javascript, donc comme c'est possible de le faire, on l'apprend mais le prof a bien sûr précisé qu'il ne fallait pas en abuser et qu'il vaut mieux utiliser la feuille de style.

Si tu as des conseils par rapports à d'autres maladresse, n'hésite pas

Bonne fin de soirée

**Archimède** · 12/06/2017, 09h35

Envoyé par Romenag

Pour les id, j'ai merdé, je le savais en plus !

N'oublie pas d'en faire autant pour :

Code :

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

1
2
3
4
 
  titreElt.id = "titre";
  urlElt.id = "url";
  auteurElt.id = "auteur";

Je ne l'avais pas vu et là, c'est le même problème. (tu vas générer 3 fois le même id pour chaque dans le forEach)

**Romenag** · 12/06/2017, 17h28

Ouaip c'est déjà fait, en fait après rectification de mon code, je ne me sers plus des ID donc je les ai tous supprimés !

Et au passage, je voulais vous dire que j'ai trouvé la solution pour mon CSS qui buguait et j'ai pu enlever les lignes que tu m'as fait ajouter. Comme ça je n'utilise que ce que j'ai vu en cours.

En fait je m'étais planté en créant mon élément <span/>, j'ai changé pour une <div/> et j'ai mis la classe .lien sur cette div au lieu de la mettre sur les différents éléments titreElt, lienElt et urlElt.

Comme ça la mise en page est nickel et en plus même si je m'en sortais avec ta méthode, mon code était erroné car il y avait l'élément urlElt qui était dans une div à l'intérieur du fameux <span/>.

Je sais pas si c'est très clair lol, en tout cas merci pour vos messages, ça m'aura permis de ne pas me décourager et de continuer à chercher une solution !

a+ pour un éventuel futur problème

**eleydet** · 13/06/2017, 10h54

Bonjour,

Juste une remarque. Il est possible de remplacer :

Code :

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

1
2
3
listeLiens.forEach(function (liste,index) {
  ...
});

par une simple boucle :

Code :

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

1
2
3
4
for (index=0; index<listeLiens.length; index++) {
  liste=listeLiens[index];
  ...
}

Je ne sais pas trop quelle solution est la meilleure.

TP à réaliser, taille élément inline

JavaScript

Discussions similaires

Partager

Partager