Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le deal à ne pas rater :
[CDAV] LG TV LED 65″ (165cm) – 65NANO756 – 4K UHD, Smart TV
564 €
Voir le deal

 

 [TOUTES VERSIONS] Afficher un texte dactylographié

Aller en bas 
+7
damieng59
El_Mojito
Ancients
Gae
mariok
lmc38510
Milouze14
11 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyDim 29 Nov 2015 - 18:07

coucou ,

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 &nbsp; Valid




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  Valid

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
' : \'




Dernière édition par Milouze14 le Lun 29 Nov 2021 - 16:47, édité 6 fois
Revenir en haut Aller en bas
https://www.milouze14.com
lmc38510
Milouzien

lmc38510



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyLun 30 Nov 2015 - 1:14

Merci beaucoup !
Revenir en haut Aller en bas
http://lacaverneauxgrimoire.forumactif.org/
mariok
Membre regretté

mariok



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyLun 30 Nov 2015 - 9:25

Merci beaucoup !
Revenir en haut Aller en bas
http://www.amarid.net
Invité
Invité
Anonymous



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyLun 30 Nov 2015 - 17:22

Merci beaucoup !
Revenir en haut Aller en bas
Invité
Invité
Anonymous



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMar 1 Déc 2015 - 11:37

Merci Philippe super
Revenir en haut Aller en bas
Gae
Milouzien

Gae



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyDim 27 Déc 2015 - 21:23

Merci beaucoup !
Revenir en haut Aller en bas
http://www.famille-r3d-dw4rf.com/
Ancients
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyLun 7 Mar 2016 - 7:58

Merci beaucoup !
Revenir en haut Aller en bas
http://forum.nsp-d3.fr/forum
Invité
Invité
Anonymous



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyLun 4 Avr 2016 - 18:43

Merci beaucoup !
Revenir en haut Aller en bas
El_Mojito
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyDim 16 Oct 2016 - 16:57

Merci beaucoup !
Revenir en haut Aller en bas
http://Crewweedganja.forumactif.be
damieng59
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMer 2 Nov 2016 - 19:47

Merci beaucoup !
Revenir en haut Aller en bas
http://dg-59.forumactif.org
SuperSpaceCab
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMer 16 Nov 2016 - 6:34

Merci bien !
Revenir en haut Aller en bas
http://www.ets2-mods-forum.com/
Invité
Invité
Anonymous



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyJeu 23 Fév 2017 - 1:39

Merci beaucoup !
Revenir en haut Aller en bas
msfeettoes
Milouzien

msfeettoes



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMar 30 Mai 2017 - 13:14

Merci beaucoup !
Revenir en haut Aller en bas
https://feetloverfeets.forumactif.com/
silas88
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptySam 6 Jan 2018 - 15:01

Merci beaucoup !
Revenir en haut Aller en bas
http://s4-rnc.forumactif.com/
chrisnvidia
Milouzien

chrisnvidia



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMer 13 Juin 2018 - 16:55

Merci beaucoup !
Revenir en haut Aller en bas
https://sos-pc.forumactif.org/
damieng59
Milouzien

avatar



[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié EmptyMer 13 Juin 2018 - 17:56

Merci beaucoup !
Revenir en haut Aller en bas
http://dg-59.forumactif.org
Contenu sponsorisé





[TOUTES VERSIONS] Afficher un texte dactylographié Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher un texte dactylographié   [TOUTES VERSIONS] Afficher un texte dactylographié Empty

Revenir en haut Aller en bas
 
[TOUTES VERSIONS] Afficher un texte dactylographié
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
» [TOUTES VERSIONS] Afficher un texte qui au clic postera un message automatiquement
» [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte
» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
» [TOUTES VERSIONS] Ajouter le texte bienvenu et le Pseudo dans l'onglet du navigateur

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Toutes versions-
Sauter vers: