[TOUTES VERSIONS] Afficher un texte dactylographié

,

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 Javascript
Mettre 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 style

Ceci:

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:

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 :

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:

é : \351
è : \350
ê : \352
à : \340
' : \'

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci Philippe

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci bien !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !