,
l'astuce consiste a afficher un texte façon machine à écrire ,
le script est assez simple mais complexe sur sa structure d'affichage .
Modules/
HTML JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cocher sur toutes les pages.
Déposez ceci:
- Code:
-
var text = '
<span class="vert">Texte 1 </span>
<span class="orange">Contenu 1</span>\n
<span class="vert">Texte 2 </span>
<span class="orange">Contenu 2</span>\n
<span class="vert">Texte 3 </span>
<span class="orange">Contenu 3</span>\n
<span class="vert">Texte 4 </span>
<span class="orange">Contenu 4</span>\n
<span class="vert">Texte 5 </span>
<span class="orange">Contenu 5</span>\n
<span class="vert">Texte 6 </span>
<span class="orange">Contenu 6</span>\n
<span class="vert">Texte 7 </span>
<span class="orange ">Contenu 7</span>\n
<span class="vert">Texte 8 </span> \n\t
<span class="orange">Contenu 8</span>\n
<span class="white">Fin</span>\n
';
var currentChar = 1;
var htmltag = false;
var cache = '';
function type() {
var str = text.substr(0, currentChar);
var last = str.substr(str.length - 1, str.length);
if (last != '<' && last != '>' & last != '/') {
$("#consoleText2").html(str);
}
currentChar++;
if (currentChar <= text.length) {
if (last == '<') {
htmltag = true;
} else if (last == '>') {
htmltag = false;
}
if (htmltag) {
setTimeout(type, 1);
} else {
setTimeout(type, 50);//AUGMENTEZ OU DIMINUER LA VITESSE ICI
}
}
}
$(document).ready(function () {
$("#consoleText2").html("");
setTimeout(type, 2000);
});
Pensez a cliquer sur le bouton
Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleCeci:
- Code:
-
/*Le conteneur*/
#console2
{
height: auto;/*NE PAS TOUCHER */
border:1px solid orange;
border-radius: 5px;
background: #000;
padding: 15px 15px;
}
/*Couleur verte*/
#console2 .vert
{
color:green;margin-left:2px;margin-right:2px;
}
/*Couleur orange*/
#console2 .orange
{
color: orange;margin-left:2px;margin-right:2px;
}
/*Couleur blanche*/
#console2 .white
{
color: white;margin-left:2px;margin-right:2px;
}
Pensez à valider les modifications en cliquant sur le bouton
Il ne reste plus que le code html qui ne doit en aucun cas être modifié,
a placer dans n'importe qu'elle partie du forum:
- Code:
-
<div id="console2">
<pre id="consoleText2"></pre>
</div>
Explications sur la partie principale, l'affichage du texte dactylographié.
Tout se passe ici:
- Code:
-
var text = '
<span class="vert">Texte 1 </span>
<span class="orange">Contenu 1</span>\n
<span class="vert">Texte 2 </span>
<span class="orange">Contenu 2</span>\n
<span class="vert">Texte 3 </span>
<span class="orange">Contenu 3</span>\n
<span class="vert">Texte 4 </span>
<span class="orange">Contenu 4</span>\n
<span class="vert">Texte 5 </span>
<span class="orange">Contenu 5</span>\n
<span class="vert">Texte 6 </span>
<span class="orange">Contenu 6</span>\n
<span class="vert">Texte 7 </span>
<span class="orange ">Contenu 7</span>\n
<span class="vert">Texte 8 </span> \n\t
<span class="orange">Contenu 8</span>\n
<span class="white">Fin</span>\n
';
Il faudra donc bien laisser les deux simples guillemets avant la première balise span et après la dernière balise span.
Ici:
- Code:
-
<span class="vert">Texte 1 </span>
<span class="orange">Contenu 1</span>\n
Le texte affiché sera sur la même ligne ce qui donnera:
- Citation :
Texte 1 Contenu 1
après ceci:
- Code:
-
<span class="orange">Contenu 1</span>\n
On distingue ceci:
- Code:
-
\n
Cela correspond à un saut de ligne.
et ici:
- Code:
-
<span class="vert">Texte 8 </span> \n\t
<span class="orange">Contenu 8</span>\n
On distingue un saut de ligne puis un autre caractère:
- Code:
-
\t
Cela correspond à un saut de ligne puis un espace
Ce qui donnera :
- Citation :
Texte 8
Contenu 8
Ensuite l’avantage avec ce petit plugin est que vous pouvez ajouter autant de couleur dans votre feuille de style:
Prenez aussi en compte les caractères spéciaux , il faudra alors les remplacer par les valeurs suivantes:
- Citation :
é : \351
è : \350
ê : \352
à : \340
' : \'
Accueil 
