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

Version imprimable

Bonsoir à tous,

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

Voici ce que je voudrais ce qui soit affiché :
Code:

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

Merci d'avance de votre aide.

Merci d'avance.

13/01/2009, 19h28
SpaceFrog

un petit tour sur un tuto DOM :roll:

Code:

document.createElement ....
13/01/2009, 20h36
jlb59

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

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:

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:

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

et enfin dans le onload:

Code:

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

14/01/2009, 09h19
le_chomeur

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
14/01/2009, 09h25
SpaceFrog
Oui fillot testé avant ;)

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

Code:

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

devient;
Code:

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;"
14/01/2009, 13h53
jlb59

Bonjour,

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

Citation:

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
14/01/2009, 14h15
jlb59

Citation:

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 ?
14/01/2009, 14h17
E.Bzz

Bonjour,

Citation:

Envoyé par jlb59

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

Code:

db.appendChild(container)

;)

A+
14/01/2009, 14h19
Bovino

Code:

cssText

J'avoue que je le connaissais pas non plus celui-là !
:merci: Spaffy !
14/01/2009, 14h33
SpaceFrog

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/
14/01/2009, 18h35
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 :mrgreen:
14/01/2009, 19h02
jlb59

Citation:

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 :mrgreen:

C'est vrai que le jlb59 à une tête comme une pastèque :?, parce le DOM c'est tout nouveau pour moi...8O 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+++
14/01/2009, 19h34
SpaceFrog

essaye IE 4 pour savoir :mouarf:

pour JT oui le cssText ecrase l'existant, mais en l'occorrence c'est une creation
14/01/2009, 23h02
le_chomeur

pour cssText on peut l'ajouter a currentStyle et getComputedStyle :)
15/01/2009, 04h41
jlb59

Citation:

Envoyé par SpaceFrog

essaye IE 4 pour savoir :mouarf:

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 ? 8O

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+++
15/01/2009, 08h59
SpaceFrog

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
15/01/2009, 09h29
jlb59

Citation:

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

Citation:

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 ! :lol:, donc, pas de méprises ! ;)

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

Pour le DOM, on verra plus tard.

Bonne journée.

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

exemple :

Code:

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

un peu plus lourd mais beaucoup plus permissif et propre :)

15/01/2009, 10h10
E.Bzz

Code:

IsIE=!document.all;

Un de trop, non ?
15/01/2009, 10h25
le_chomeur

non non ;)
15/01/2009, 10h31
E.Bzz

Citation:

Envoyé par le_chomeur

non non ;)

8O

Tu peux préciser ? :koi:

(j'ai bien fait de t'attendre au lieu d'éditer ton post :aie: )

test :

Code:

1
2
3
4
5
6
 
<script type="text/javascript">
alert(!!document.all);
alert(!document.all);
alert(document.all);
</script>

sous ie et firefox :)

15/01/2009, 10h44
Bovino

Code:

document.all

est un objet pour IE et undefined pour les autres nav, donc

Code:

!document.all

est false pour IE, true pour les autres, donc

Code:

!!document.all

est true pour IE, false pour les autres.
Il s'agit en fait de transformer une propriété en booléen. ;)
15/01/2009, 10h52
E.Bzz

Je l'avais pas vu utilisé comme ça :aie:

Merci à vous deux pour la démo :king:
15/01/2009, 10h54
le_chomeur

merci pour ce complément d'information Bovino ;)
15/01/2009, 10h55
jlb59

Citation:

Envoyé par le_chomeur

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

exemple :

Merci pour l'exemple Chomeur, mais ça ne m'avance pas trop, déjà que j'ai du mal à percuter avec ce que m'a donné SpaceFrog, si t'en rajoutes, c'est pas la joie du tout.:oops:
15/01/2009, 10h57
le_chomeur

regarde bien l'exemple que j'ai donné , il te permet d'assigner des méthodes avec paramètres a des évènements ...

assez simple j'ai remplacé les nom de fonction par des mot assez explicite je crois ^^
15/01/2009, 14h12
jlb59

D'acord avec toi Le Chomeur, mais mon hic est que je n'arrive pas à l'appliquer.

Vous avez eu la gentillesse toi et SpaceFrog de me donner des codes pour essayer de résoudre ce que je cherchais à faire, mais, comme je l'ai déjà dit; je suis nul avec le DOM.

Tiens ! SpaceFrog m'avait donné le code pour mon prb et il me disait à la fin qu'il suffisait "d'appender" pour mettre en application.
Comme je ne savais pas ce que cela signifiait, j'ai demandé des explications, et voilà ce qu'on m'a donné :

Code:

db.appendChild(container)

Mais comme je n'étais pas plus avancé parce que dans le code de SpaceFrog il y avait ça aussi, j'ai préféré en rester à la bonne vieille méthode du PHP et d'include.
D'ailleurs, cela m'a même était conseillé !...

Tu comprends pourquoi je ne m'aventure pas là-dedans ?

Merci quand même de ton aide.