Taille de caractères avec Javascript

  • Auteur de la discussion la beline
  • Date de début

la beline

Nouveau membre
Bonjour,

Je suis complètement novice en language de programmation, aussi j'utilise des scripts prêt à l'emploi pour mon blog sur canalblog.

Malheureusement je n'arrive pas à augmenter la taille de ma police pour le script suivant, que dois je faire ???
Merci d'avance pour votre aide.
[cpp]

<h2>
<script type="text/javascript" language="JavaScript1.2">// <![CDATA[
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit
//Visit for this script
var message="Bienvenue dans mon Jardin !"
var neonbasecolor="lightcoral"
var neontextcolor="red"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
// ]]></script>[/cpp]
 

LudoTools

Expert
Bonjour,

En ligne 17, ajoute le texte en rouge
document.write('<font color="'+neonbasecolor+'" size="14pt">')
Si tu veux une taille de texte plus grande, augmante le chiffre et vice-versa...
 

zeb

Modérateur
Ludo, le code c'est entre balises
Code:
. Et tant pis pour le rouge !
[:zeb:6]
 

LudoTools

Expert
:ange: Pardon Grand Maître ( ;) )... mais c'est vrai que le rouge n'apparaîssant pas dans les balise
Code:
, j'ai opté pour [citation] par facilité... Promis juré ! Je ne recommencerai pas... (jusqu'à la prochaine fois ?).
 

la beline

Nouveau membre



Bonjour,

Merci beaucoup de ton aide, j'ai modifié ma ligne texte comme tu me l'a conseillé, cela fonctionne malheureusement j'ai un petit souci : quelque soit taille indiquée, les caractères ne changent plus, ils restent trop gros !!
C'est comme si j'avais ou tout ou rien...Je ne comprends pas ??

Aurais tu une solution ??
Merci mille fois.
 

LudoTools

Expert
:??: Aurais-tu une feuille de style (CSS) qui définie la taille de la police de ton site ?... je ne vois que ça qui gênerait.
 

la beline

Nouveau membre



Non je ne pense pas avoir cette feuille de style : à vrai dire je ne sais même pas ce que signifie "CSS"...

Merci beaucoup pour ton aide mais je vais encore chercher !
Malgré mon ignorance, je suis têtue et persévérante, je ne laisserai pas tomber tant que je n'aurai pas trouvé la solution !!

Au fait y a-t-il une différence entre "size' et "font size" ?

A bientôt.
 

LudoTools

Expert
size est un des attributs de la balise ... en HTML.

:ange: et à ce sujet, je t'ai écrit des c0nn3ries... ce n'est pas size="14pt" qu'il aurait fallu écrire (ça c'est bon dans une feuille de style) mais size=x avec x=1,2,3,4,5,6 ou 7, sachant que la taille dite normale est 3...
Tu peux aussi écrire size=+1 (augmente la taille de 1, passe de 3 à 4) pour plus grand,
ou bien size=-1 (diminue la taille de 1, passe de 3 à 2) pour plus petit...

Désolé de t'avoir laissé patauger si longtemps...


PS : CSS = Cascading Style Sheet ( )
 

la beline

Nouveau membre



Génial !!! Cela fonctionne ! T'es vraiment super sympa de m'avoir aidé !!!
Il ne me reste plus qu' à trouver une solution pour centrer mon texte, aurais tu aussi une solution ?

Merci merci
 

LudoTools

Expert
:) content pour toi...

Si tu veux centrer le texte, il ne faut pas qu'il y ait quoi que ce soit à droite et à gauche de ton "titre néon"...
En ligne 19, il y a :
Code:
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

Un <span> est une zone de texte... juste une portion de texte, qui accepte des "objets" (texte ou images) a ses côtés. Ce n'est pas une balise "bloc", mais une balise "en ligne".
Donc il faut que tu "transformes" cette zone en "bloc"...

Deux soluces :
1/ tu remplaces le terme <span id... par <div id..., sans oublier les balises de fermeture : </span> devient </div>.
Pour centrer, il suffit d'ajouter style="margin:10px auto;text-align:center" entre <div et id="neonlight"....
Cela mettra un espace de 10 pixels en haut et en bas du bloc DIV, et laissera le navigateur calculer l'espace à gauche et à droite pour centrer le bloc dans la page.

2/ moins "conventionnel" mais tout aussi acceptable, tu "forces" la balise SPAN à devenir une zone de type bloc :
<span style="display:block;margin:10px auto;text-align:center" id="neonlight'+...

N'oublies pas de jetter un oeil au lien sur le CSS...
A+, Bonne mise en page...
 

la beline

Nouveau membre




Salut Ludo Tools,

J'ai testé tes 2 solutions : cela me donne à chaque fois un texte en vertical au lieu d'un centrage.... Bizarre non ?!!
Si tu as encore une astuce, fais moi signe.

Je me suis tout de même débrouillée pour un résultat satisfaisant, mais va falloir que je potasse dur en HTML : j'ai encore bien du boulot avant de tout assimiler !!!.....

Merci beaucoup
A+

La Beline

 

LudoTools

Expert
Peux-tu me copier ton script tel qu'il est maintenant ?... et aussi la partie html ou le script "écrit" ton "néon"...
(le tout entre les balise
Code:
)
 

la beline

Nouveau membre


Voici mon script :

[cpp]
<h2>
<script type="text/javascript" language="JavaScript1.2">// <![CDATA[
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit
//Visit for this script
var message="Bienvenue dans mon Jardin, bonne visite..."
var neonbasecolor="darksalmon"
var neontextcolor="red"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'" size=+2>')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
// ]]></script>
</h2>
[/cpp]
 

LudoTools

Expert
hum... entre les balises <H2>, c'est normal que tu ne puisses pas centrer ton texte... par défaut, une balise H a un texte aligné à gauche.
Donc c'est là, à la place de <H2> et </H2> qu'il te faut mettre le "bloc centré"...
A la place de <H2> en ligne 1, tu mets <div style="width:100%;text-align:center;margin:10px auto;">
et à la place de </H2> en ligne 53, tu mets </div>
 

zeb

Modérateur
Salut,

Et pourquoi ne pas appliquer ce style à <h2> directement ?
<h2> est une balise "block" comme une autre.

Ainsi la hiérarchie des titres serait conservée. C'est bien le fond qui doit primer sur la forme.
 

LudoTools

Expert
Tout à fait mon cher Thierry.... :sol:

Toutefois, ne sachant pas si la beline avait tenté ainsi de modifier la taille des caractères (son but initial), j'ai opté pour une DIV...
 

la beline

Nouveau membre



Bonsoir Ludo,

J'ai suivi tes conseils, mon texte est bien centré !
Par contre (histoire de te contrarier un peu) la taille des marges ne bouge pas, elles restent les mêmes que j'indique 10px ou 30 px : rien ne change !

Pour la remarque de Zeb, je suis un petit peu ou :lol: :pt1cable: :pt1cable: :pt1cable: :pt1cable: beaucoup bouchée....Mais je n'ai pas tout compris : dois je laisser <h2> ?

Encore mille merci de me consacrer ton temps.

A+

La beline
 

LudoTools

Expert
Comme le faisait remarquer (très justement) Zeb, la balise <H2> est une balise de type bloc, elle est utilisée dans la hierarchie des titres habituellement (du plus gros titre, H1, au plus petit, H6).

Perso, je supprimerai la balise H, pour mettre une DIV... après tout, ton effet néon est un peu comme un bandeau-image, un objet flash... mais n'est pas un titre d'une des rubriques de ton site... non ?

Quant à l'espacement, 10 ou 30 px, c'est une marge entre le haut de la DIV et ce qui est au-dessus (ainsi qu'entre le bas de la DIV et ce qui est en dessous). Cela n'influencera pas la marge intérieure de la DIV (ça, c'est le "padding"), donc, quand tu mets 30px, si ton néon est positionné en début de page, tu devrai le voir légèrement plus bas, par rapport au haut de la page que si tu indiques 10px... mais bon, 20 pixels de différence, c'est léger. En tout cas, cela ne change pas sa hauteur (liée à la taille de la police d'écriture).
 

la beline

Nouveau membre



:hello: Hello,

Merci pour toutes ces précisions Ludo.
Je pensais que le centrage d'un texte dépendait des marges de gauche et de droite...
Je ne comprends pas trop comment faire pour scinder le "Bienvenue dans mon Jardin" du "Bonne visite".
En effet je souhaiterai que "Bonne visite" soit centrer sous "Bienvenue dans mon Jardin"en laissant une ligne entre les 2 blocs de texte.

Or dans le cas présent seul le mot "visite" vient se centrer sous "Bienvenue dans mon Jardin, Bonne" et il manque une interligne..

Décidément, c'est pas évident tout ça !

 

LudoTools

Expert
comment faire pour scinder le "Bienvenue dans mon Jardin" du "Bonne visite".
?
Hé bien tout simplement en scindant la phrase !-)
Quelle balise permet de faire un retour à la ligne ?... la balise <BR /> bien sûr !
Résultat : "Bienvenue dans mon Jardin<BR />Bonne visite"...

Je sais... tu vas te précipiter pour me dire "merci" :non: et puis après avoir essayé, tu vas être déçu :pfff: ...

Ben oui, ça ne marchera pas... lisons le code en ligne 19 :
[cpp]document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')[/cpp]
message.charAt(m) c'est quoi ça ?...

message, c'est la variable dans laquelle il y a ta phrase (une variable chaîne de caractères).
charAt(), c'est une fonction javascript qui va lire un caractère dans une chaîne à une position donnée.
Ici, la position est indiqué par la variable m - incrémentée en ligne 18 par la boucle for (m=0;m<message.length;m++) qui dit (en clair) : pour m=0 ; jusqu'à m inférieur à longueur.message ; exécuter le code entre parenthèse puis faire m = m+1 .

Donc, si tu mets une balise <BR /> dans ta "phrase", elle va être interprétée caractère par caractère et non pas en tant que balise HTML... :cry:

Bon d'accord ! mais y a-t-il une solution ? :heink:

:sol: o , u , i... oui, sinon je ne m'embêterai pas à écrire tout ça...

Puisque dans ton code "néon" la phrase n'est pas interpretée mais décortiquée, on aurait pu pensermettre un "piège" qui insèrera une balise <BR /> là où tu le veux (bien grand mot pour petite chose)...
:( ça march'pô !...

Alors ?... ben yapuka ifokon !
il n'y a plus qu'à trouver la bonne largeur en pixel pour scinder la phrase...
il faut qu'on teste... et on trouve aproximativement : <div style="width:390px; text-align:center; margin:10px auto;">

Bien sûr, si tu changes la taille des caractères, la largeur changera ! En plus, ce n'est pas dit que cela se présente bien sur tout les navigateurs... 390 pixels c'est bon sous FireFox3.3.16, avec un size=+3 ! à toi de faire des tests :hello:
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 079
Messages
6 716 711
Membres
1 586 247
Dernier membre
MrAzgarIII
Partager cette page
Haut