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 : 285
Taille : 14,6 Ko

Nom : ScreenShot_forum.png
Affichages : 285
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 : 272
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, 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, 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...)

**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+

**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 : 242
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, 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 !!

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager