Probleme d'affichage frontend HTML widget

WordPress :5.8
Statut : résolu

Ce sujet contient 2 réponses, 2 participants et a été mis à jour pour la dernière fois par Yoloic, le il y a 1 année.

3 sujets de 1 à 3 (sur un total de 3)

Auteur

Messages
13 septembre 2022 à 16 h 16 min #2420014
Yoloic
Participant

Initié WordPress
5 contributions
Bonjour,

J’aimerais créer un effet de machine à écrire sur mon texte, et j’ai utilisé un script JavaScript dans un widget HTML sut Elementor, et tout fonctionne coté backend, mais rien ne s’affiche coté frontend.

Coté backend l’animation du texte en rouge se fait sans problème, mais cote frontend il n’y a absolument rien.

Voici le code ajouté au widget HTML :
```
<script src="https://cdn.jsdelivr.net/npm/typed.js"></script>
<div class="autotyping"><span class="typing_text"></span></div>
<script>
//typing text animation script
    var typed = new Typed(".typing_text", {
        strings: ["Grâce au SMS,      envoyez vos Offres à tout le monde     <br>Même aux Clients ...      que vous n’avez pas encore !"],
        typeSpeed: 55,
        loop: false,
        cursorChar: '|️',
    });
</script>
<style>
.autotyping{
    font-family: 'Courier', serif; 
    color: #f92221;
    font-size:2.5em;
    font-weight: 800;
    text-align: center
}
.autotyping>span{
    color: #f92221;
    font-size:0.9em;
    font-weight: 600;
    letter-spacing: -1px;
}
/*Shrinking for tablet*/ 
@media (min-width: 481px) and (max-width: 768px) {   
  .autotyping{
    font-size:2.0em;
    font-weight: 800;
    text-align: center
    }
   
.autotyping>span{
    font-size:0.7em;
    font-weight: 100;
    letter-spacing: -2px;
  }
}
/*Shrinking for mobile*/ 
@media (max-width: 480px) {
  .autotyping{
    font-size:1.9em;
    font-weight: 800;
    text-align: center;
} 
.autotyping>span{
    font-size:0.7em;
    font-weight: 100;
    letter-spacing: -2px;
}   
}
</style>
```
Pour info, je n’y connais rien en JavaScript.

Pour ceux qui veulent directement jeter un coup d’oeil au site voici le lien : http://www.web.fenchell.com/sms

Merci d’avance aux personnes qui essaieront de m’aider !

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
13 septembre 2022 à 17 h 23 min #2420025

mathieu42
Participant

Maître WordPress
1989 contributions

le fichier typed.js qui est sur votre site ne correspond pas à l’exemple de code dans votre message.

vous avez peut-être un système de cache qui a déformé le fichier et qui rend le code invalide.

13 septembre 2022 à 21 h 06 min #2420057

Yoloic
Participant

Initié WordPress
5 contributions

Merci pour votre réponse.
En effet, le nom du fichier change pour je ne sais quelle raison…

Je ne sais pas si c’est très optimisé mais j’ai résolu le problème en mettant le script entier directement dans le widget HTML pour contourner le problème de redirection.

Le problème a été contourner mais si quelqu’un a une meilleure solution je suis preneur!
Auteur

Messages