[DOM] Comment mettre du texte dans un JS et l'appeler sur n'importe quelle page . [Fait]

**jlb59** · 13/01/2009, 18h35

Bonsoir à tous,

Dans une page, je voudrais afficher du texte, mais d'un JS.

Voici ce que je voudrais ce qui soit affiché :

Code :

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

1
2
3
4
5
6
<div style='font: normal italic 16px verdana,arial,garamond;:#00008B;'>Références de l'évaluation du QI.</div><br>
<div style='font: normal italic 10px verdana,arial,garamond;color:#0000FF;'>Entre 55 et 85 = réflexion faible.<br>
"Entre 85 et 100 = réflexion moyenne.<br>
"Entre 100 et 125 = bonne réflexion.<br>
"Au-delà de 125= Très bonne réflexion.
</div>

Je pense que cela peut se faire en JS, non ?

Je sais que je peux le faire en Html ou Php, mais comme cette page est en JS, je ne voudrais pas dépareiller !

Merci d'avance de votre aide.

Merci d'avance.

**SpaceFrog** · 13/01/2009, 19h28

un petit tour sur un tuto DOM

Code :

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

document.createElement ....

**jlb59** · 13/01/2009, 20h36

Ben ! SpaceFrog, je ne vois pas le rapport.
Et j'ai pas bien compris le tuto DOM ????

**SpaceFrog** · 14/01/2009, 08h46

Justement si tu ne vois pas le rapport raison de plus pour aller faire un tour sur un tuto DOM

le dom permet de créer dynamiquement et surtout proprement des elements sur une page :

en gros voilà ce qu'il faut que tu colles dans le fichier externe que nou sappellerons par exemple
legende.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
 
function legende(){
d=document;
db=d.body;
br=document.createElement('br')
container = d.createElement('div')
container.style.cssText="font: normal italic 16px verdana,arial,garamond;color:#00008B;"
container.appendChild(d.createTextNode("Références de l'évaluation du QI."))
db.appendChild(container);
db.appendChild(br.cloneNode(true));
container=d.createElement('div')
container.style.cssText="font: normal italic 10px verdana,arial,garamond;color:#0000FF;"
container.appendChild(d.createTextNode('Entre 55 et 85 = réflexion faible.'));
container.appendChild(br.cloneNode(true));
container.appendChild(d.createTextNode("Entre 85 et 100 = réflexion moyenne."));
container.appendChild(br.cloneNode(true));
container.appendChild(d.createTextNode("Entre 100 et 125 = bonne réflexion."));
container.appendChild(br.cloneNode(true));
container.appendChild(d.createTextNode("Au-delà de 125= Très bonne réflexion."));
db.appendChild(container)
}

puis dans le head des pages dans lesquelles tu souhaites appeler le texte:

Code :

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

<script type='text/javascript' src="legende.js"></script>

et enfin dans le onload:

Code :

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

<body onload="legende" >

pour placer le texte à l'endroit voulu de la page il suffit de mettre un div dans la page et d'appender dans le div ...

Maintenant il est aussi possible de faire du document.write ou du innerHTML mais c'est nettement mois propre ...

**le_chomeur** · 14/01/2009, 09h19

en forme spaffy ^^
petite question : cssText c'est cross-browser ça ???

Edit : ha oui , d'ailleur très bon site :

http://www.quirksmode.org/dom/w3c_css.html

**SpaceFrog** · 14/01/2009, 09h25

Oui fillot testé avant

mais on peut le faire par les propriétés du style ...

Code :

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

container.style.cssText="font: normal italic 16px verdana,arial,garamond;color:#00008B;"

devient;

Code :

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

1
2
3
4
5
container.style.fontWeight="normal";
container.style.fontStyle="italic";
container.style.fontSize="16px";
container.style.fontFamily="verdana,arial,garamond";
container.style.fontColor:#00008B;"

**jlb59** · 14/01/2009, 13h53

Bonjour,

Je n'ai jamais utilisé ça, mais si tu dis que ç fonctionne, je vais essayer.

Envoyé par SpaceFrog

Justement si tu ne vois pas le rapport raison de plus pour aller faire un tour sur un tuto DOM

le dom permet de créer dynamiquement et surtout proprement des elements sur une page :

Je te dirais le résultat.

Merci SpaceFrog

**jlb59** · 14/01/2009, 14h15

Envoyé par SpaceFrog

pour placer le texte à l'endroit voulu de la page il suffit de mettre un div dans la page et d'appender dans le div ...

Désolé de mon incompétence, mais le DOM est tout nouveau pour moi.

J'ai pas bien percuté ce que tu as dis en parlant "d'appender" !...

Tu veux dire quoi en faisant ça ?

**E.Bzz** · 14/01/2009, 14h17

Bonjour,

Envoyé par jlb59

J'ai pas bien percuté ce que tu as dis en parlant "d'appender" !...

Code :

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

db.appendChild(container)

A+

**Bovino** · 14/01/2009, 14h19

Code :

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

cssText

J'avoue que je le connaissais pas non plus celui-là !

Spaffy !

**SpaceFrog** · 14/01/2009, 14h33

c'est un raccourci intéressant que j'ai déja utilisé dans la contribution sur les formulaires dynamiques
http://www.developpez.net/forums/d53...ynamique-form/

**javatwister** · 14/01/2009, 18h35

pour les profanes, à manipuler avec précaution quand même, vu que ça écrase les autres définitions de style, globales ou ciblées dans css ou js; il faut donc être sûr de son coup quand on déclare cssText;

doit avoir mal au crâne, le jlb59

**jlb59** · 14/01/2009, 19h02

Envoyé par javatwister

pour les profanes, à manipuler avec précaution quand même, vu que ça écrase les autres définitions de style, globales ou ciblées dans css ou js; il faut donc être sûr de son coup quand on déclare cssText;

doit avoir mal au crâne, le jlb59

C'est vrai que le jlb59 à une tête comme une pastèque

, parce le DOM c'est tout nouveau pour moi...

et comme je n'ai aucune notion dans ce domaine, je pense laisser le tout comme à l'ancienne.

Il est vrai que c'est dans les vieux pots qu'on fait la meilleure soupe !

Bon, maintenant, est-ce que ça s'adresse à l'informatique ?

A+++

**SpaceFrog** · 14/01/2009, 19h34

essaye IE 4 pour savoir

pour JT oui le cssText ecrase l'existant, mais en l'occorrence c'est une creation

**le_chomeur** · 14/01/2009, 23h02

pour cssText on peut l'ajouter a currentStyle et getComputedStyle

**jlb59** · 15/01/2009, 04h41

Envoyé par SpaceFrog

essaye IE 4 pour savoir

pour JT oui le cssText ecrase l'existant, mais en l'occorrence c'est une creation

Je ne me sers pas d'IE4, mais je ne vois pas le rapport ?

Je considèrerai comme "RÉSOLU" cette aide parce que c'est trop compliqué pour le néophyte que je suis.
En clair, je n'arrive pas à mettre en application et je ne vais pas me casser la tête uniquement pour ça.

Je le laisse en PHP et fait un 'INCLUDE" là où cela doit s'afficher.

Merci quand même de ton aide.

A+++

**SpaceFrog** · 15/01/2009, 08h59

ha ben si tu peux mettre du php conserve l'include ...

pour IE4 tu parlais des vieux pots ...

pour la mise en oeuvre c'est pas si compliqué ...
le principe est d'avoir un fichier js externe et de l'appeler sur le onload ...
tout est decrit dans le post précédent et si tu le suis en pas à pas ...

Mais encore une fois si tu as php l'include est préférable

**jlb59** · 15/01/2009, 09h29

Envoyé par SpaceFrog

pour IE4 tu parlais des vieux pots ...

Je parlais de la programmation HTML et PHP, je me suis peut-être mal exprimé, comme je crois savoir que ça évolue !....

Envoyé par SpaceFrog

pour la mise en oeuvre c'est pas si compliqué ...
le principe est d'avoir un fichier js externe et de l'appeler sur le onload ...
tout est decrit dans le post précédent et si tu le suis en pas à pas ...

C'est pas si compliqué ! C'est pas si compliqué ! peut-être pour celui qui connaît déjà le DOM, moi; c'est pas le cas.

Je vais sans doute me faire mieux comprendre :
Mon beau-fils, qui connaît un peu le HTML, je dis bien un peu, et bien quand je lui explique par exemple que "TARGET=_blank" peut-être remplacé par "onclick="window.open(this.href); return false;", ben, c'est dur à rentrer.
Il s'en tient à la bonne vieille méthode (celle d'antan)... un peu comme moi.

C'est un exemple hein !

, donc, pas de méprises !

Donc; comme tu dis, j'en reste au PHP.

Pour le DOM, on verra plus tard.

Bonne journée.

**le_chomeur** · 15/01/2009, 10h09

Dommage

, sinon conseil d'amis , passe par un listener d'évènement ...

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//Permet de savoir si l'on est sous IE
IsIE=!!document.all;
 
if (!IsIE){
					tonelement.addEventListener('click', function(){
						tamethode(lesparametres)
					}, false);
				} else{
					tonelement.attachEvent('onclick', function(){
						tamethode(lesparametres)
					});
				}