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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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 ?

Voir 40 message(s) de cette discussion en une page