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

Version imprimable

2 pièce(s) jointe(s)

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 :
Pièce jointe 284696

Obtenu avec ce code JS :
Code:

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 :
Pièce jointe 284692

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:

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... :oops: j'en suis vraiment au début de l'apprentissage et mes bases js sont assez médiocres... ) ?

Merci beaucoup d'avance !!

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:

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>

11/06/2017, 16h44
Romenag

Re-bonjour la communauté !! :coucou:

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

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 !! :arf:
11/06/2017, 16h50
Romenag
Citation:

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:

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:

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:

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 ! :koi:

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:

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>  <div id="contenu"> </div> <script src="../js/liensweb.js"></script> </body> </html>
et :
Code:

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 !

11/06/2017, 17h34
Archimède
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:

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

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:

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+

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

Code:

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

1 pièce(s) jointe(s)

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

Du coup voici mon fichier JS :

Code:

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 :

Pièce jointe 284735

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

Voici les consignes :

Citation:

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é.

11/06/2017, 19h02
Archimède

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...
11/06/2017, 19h32
Romenag

Ok merci pour le conseil !! Et pour ton aide !!
11/06/2017, 20h31
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.
11/06/2017, 20h34
Archimède

De rien.

Bonne soirée
11/06/2017, 20h44
Archimède

Citation:

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 ;)
11/06/2017, 23h02
Romenag

Citation:

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 :oops:...

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
12/06/2017, 09h35
Archimède
Citation:

Envoyé par Romenag

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

N'oublie pas d'en faire autant pour :
Code:

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)
12/06/2017, 17h28
Romenag

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

:coucou:
13/06/2017, 10h54
eleydet
Bonjour,

Juste une remarque. Il est possible de remplacer :
Code:

1 2 3 listeLiens.forEach(function (liste,index) { ... });
par une simple boucle :
Code:

1 2 3 4 for (index=0; index<listeLiens.length; index++) { liste=listeLiens[index]; ... }
Je ne sais pas trop quelle solution est la meilleure.