Partage

Faire disparaître un texte ( twitch alerte)

Sujet résolu

15 février 2018 à 11:42:07

Bonjour a tous, je ne connais absolument pas le codage mais je voudrais enfaîte, après un certain délai, masque mon texte.

Voice le code HTML:

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>
<span><video autoplay><source src="http://webm.land/media/hMto.webm"type="video/webm">
      </video> </span>
<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->

     <div id="alert-message">{name} </div>
    <div id="alert-user-message">{}</div>
  
  </div>

</div>

C'est le texte {name} que je voudrais faire disparaître au bout de x seconde.

Merci d avance :)

Sanapag

15 février 2018 à 14:07:30

Yop,

Pour faire disparaître un texte au bout de quelque seconde tu peux mettre un settimeout avec un display none.

- le settimeout lance ta fonction après un délai

- et avec un document.getElementById tu peux modifier le style de tes contenus et du coup le passer en caché

Dis moi si tu te débrouille sinon hésite pas a redemander de l'aide

Raitex

15 février 2018 à 14:20:46

Merci beaucoup pour tes informations mais pour moi, tout sa c'est du chinois enfaîte haha :)

pierreletet

15 février 2018 à 15:38:20

        setTimeout(function () {
            $("#alert-message").css("display", "none");
            // en le mettant en display block de base... sinon il arrivera pas a modifier la propriété "display" 
        }, 2000); 
            // modifier 2000 pour changer le temps (en ms)

Ce code fonctionne (Il faut juste initialiser Jquery --> lis la suite)

setTimeout permet d'appeler une fonction après un temps donné en ms (ici 2000). C'est du javascript pur.

pour le reste du code que j'ai écris, c'est du Javascript qui utilise la librairie jquery (ce n'est pas obligatoire mais ça rend l'écriture moins longue)

Une librairie c'est une sorte de bibliothèque qui contient pleeeeeein de classes et de méthodes qui sont simplifiées.

Par exemple au lieu de faire :

element = document.getElementById(id);

Tu peux utiliser :

$("#id")

pour séléctionner un ID

Pour utiliser Jquery il faut l'initialiser avec ce bout de script dans ta balise head:

autre possibilité de syntaxe :

function Explosion(){
  alert("Boom!");
}
setTimeout(Explosion, 2000);

-
Edité par pierreletet 15 février 2018 à 15:49:19

Raitex

15 février 2018 à 16:14:35

Merci beaucoup pour ton explication clair, un grand merci a toi, donc si je comprend bien, je dois d abord mettre :

et ensuite mettre tes lignes de code au dessus? Et qu est une balise HEAD?

pierreletet

15 février 2018 à 16:50:13

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

 //  C'est la structure HTML MINIMUM

La balise <head> est un élément structurel (au même titre que les tags <html> ou <body>) d'un document html. Elle contient les informations essentielles à la description du document qui sera affiché dans le corps du document :
   - le titre du document (inclus dans la balise <title>)
   - les références aux feuilles de style utilisées par le document
   - les références aux javascripts utilisés par le document
   - les balises <meta> pouvant spécifier l'auteur la description du contenu l'encodage et de nombreuses autres informations

Au sein de la balise head, il est possible de déclarer les styles utilisés dans le corps du document soit par référence à une feuille de style CSS soit par utilisation de la balise <style> en y insérant directement les styles à utiliser. De même pour les scripts javascripts, il est possible de faire référence à un fichier externe ou bien d'employer la balise <script> et d'écrire directement à l'intérieur le code souhaité.

Donc elle ne sert pas à afficher de contenu (sauf le titre sur l'onglet avec <title>un titre</title> qui est dans la balise head et qui affiche le titre de la page dans l'onglet).

Dedans tu mets :

-> encodage utf-8

-> script js

-> feuilles de style (<link href="...

voilà un exemple de header : (qui n'a absolument rien à voir avec ton projet mais c'est juste histoire que tu vois la tronche que ca a vu que tu as l'air de ne vraiment pas connaitre)

<!--c'est un page html-->
<!DOCTYPE html>
<!--c'est un page html-->
<html lang="fr">

<head>
    <!--    L'ENCODAGE DE LA PAGE EN UTF-8 pour gérer les accents-->
    <meta charset="utf-8">
    <!--LE TITRE DE LA PAGE QUI S'AFFICHE DANS L'ONGLET-->
    <title>Saulon-La-Rue</title>
    <!-- DES FEUILLES DE STYLE   -->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="../Contenu/main.css">
    <link rel="stylesheet" href="../Contenu/footer.css">
    <link rel="stylesheet" href="../Contenu/publication.css">
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- MON JQUERY ICI  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--    MES SCRIPTS JS ICI : -->
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="/Controle/dropdown_connexion.js"></script>
    <script src="/Controle/navbar_fixed.js"></script>
    <script src="https://use.fontawesome.com/b157a0b817.js"></script>
    <script src="/Controle/scroll_indicator.js"></script>
    <script src="/Controle/scroll_arrow.js"></script>
    <script src="/Controle/textarea_limit.js"></script>
    <script src="/Controle/loader.js"></script>
    <script src="/Controle/dropdown_navbar.js"></script>
    <script src="Controle/slideup_welcome.js"></script>

    <!--UN SCRIPT MIS DIRECTEMENT DANS LA PAGE SANS APPELER DE FICHIER .JS-->
    <script>
        $(document).ready(function() {
            $(document).bind("contextmenu", function(e) {
                return false;
            });
        });

    </script>

    <script>
        function initMap() {
            var Saulon_la_rue = {
                lat: 47.2221185,
                lng: 5.064059000000043

            };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,

                center: Saulon_la_rue

            });
            var marker = new google.maps.Marker({
                position: Saulon_la_rue,
                map: map

            });
        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfLRXgCqdWNMaix8ZL8-6k15eKevhrCRc&callback=initMap" async></script>


</head>

Pour ton projet:

Tu crée un fichier qui s'appelle

"cacher_texte.js"

ensuite dans ton <head> tu l'appelles :

<script src="lien relatif vers cacher_text.js"></script>

rappel : ../ pour remonter un dossier

et : / pour entrer dans un dossier.

ensuite tu enregistre, tu actualise ta page et ca marche pas.

En effet, il faut aussi appeler la librairie jquery :

Dans ton <head></head> tu l'appelles :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CTRL + S (sauvegarde), va sur ta page, CTRL + F5 (actualisation).

Ca marche

Si tu ne comprends pas des choses je ne peux pas être plus clair, va voir les cours sur le site, ou des sites ressources comme https://www.w3schools.com/

Ce lien va surement t'aider.. beaucoup : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/votre-premiere-page-web-en-html

-
Edité par pierreletet 16 février 2018 à 9:05:23

Raitex

15 février 2018 à 17:05:00

Ha ouai ok, chaud mdr. Mais le fichier que je dois crée, c'est le faire directement sur mon pc et non dans les ligne de code?

Genre, je l appelle cacher_texte.js

Désoler, si je met du temps a comprendre, mais comme je n'ai jamais fait ce genre de chose et que je n'y connais rien mdr

-
Edité par Raitex 15 février 2018 à 17:08:22

pierreletet

16 février 2018 à 9:04:24

En gros il y a deux manière d'éxecuter du javascript sur une page.

La première : Ecrire directement sur ta page ton javascript entre des balises <script> </script>.

la deuxième en appelant script depuis un autre fichier en faisant un lien vers celui-ci :

Go lire les cours c'est gratuit tu vas comprendre en 30min top chrono...

-
Edité par pierreletet 16 février 2018 à 9:05:47

Krogoth

16 février 2018 à 10:35:22

pierreletet a écrit:

        setTimeout(function () {
            $("#alert-message").css("display", "none");
            // en le mettant en display block de base... sinon il arrivera pas a modifier la propriété "display" 
        }, 2000); 
            // modifier 2000 pour changer le temps (en ms)

Tu va quand même pas faire inclure jQuery juste pour ca???!!

setTimeout(function () {
    document.getElementById('alert-message').style.display = 'none';
}, 2000);
    // modifier 2000 pour changer le temps (en ms)

Un petit +1 si je vous ai aidé est toujours appréciable :).

pierreletet

16 février 2018 à 10:46:45

Pourquoi pas ? Et d'ailleurs j'ai indiqué qu'il pouvait aussi bien réaliser la fonction sans jquery.

Si ca te choques libre à toi de faire une réponse constructive et de garder les "????!!!!" pour toi.

Oui ca fait un peu lourd d'include jquery pour si peu, mais c'est dans un cadre plutôt éducatif que productif à mon avis qu'il fait se demande sur le forum... Donc niveau optimisation et performance je pense pas qu'il en soit là.

Et puis bon, on est sur un espace d'échange donc si il ne connaissait pas, ca lui donne l'occasion d'apprendre quelque-chose de plus. Si il veut aller plus loin, ça lui sera utile.

-
Edité par pierreletet 16 février 2018 à 10:53:13

Raitex

16 février 2018 à 14:38:41

Bhen a vrai dire, c'est juste pour faire des stream enfaîte, je veux pas trop me "compliquer" la vie a vrai dire; j'ai déjà pas mal bosser sur des animation via cinema 4D et sony vegas

Krogoth

16 février 2018 à 14:42:04

pierreletet a écrit:

Pourquoi pas ? Et d'ailleurs j'ai indiqué qu'il pouvait aussi bien réaliser la fonction sans jquery.

Si ca te choques libre à toi de faire une réponse constructive et de garder les "????!!!!" pour toi.

Oui ca fait un peu lourd d'include jquery pour si peu, mais c'est dans un cadre plutôt éducatif que productif à mon avis qu'il fait se demande sur le forum... Donc niveau optimisation et performance je pense pas qu'il en soit là.

Et puis bon, on est sur un espace d'échange donc si il ne connaissait pas, ca lui donne l'occasion d'apprendre quelque-chose de plus. Si il veut aller plus loin, ça lui sera utile.

-
Edité par pierreletet il y a environ 3 heures

Effectivement, reprennons....

@courlis09

C'est simple à faire en js natif, n'écoute pas ceux qui veulent te faire ajouter une librairie de plus de 50Ko uniquement pour une ligne de code.

Il te serra également bien plus profitable de commencer par apprendre le javascript natif que jquery.

Un petit +1 si je vous ai aidé est toujours appréciable :).

Raitex

16 février 2018 à 14:47:53

Ha ok, mais comme je ne m'y connais absolument pas, et même un peux perdu la, serai t'il possible que l'un de vous me fasse directement le petit code?

Raitex

19 février 2018 à 9:07:10

Je sais que c'est beaucoup demander et normalement je n'aime pas demander mais serai t'il possible de me donné directement les bon code svp?

Sixoren

19 février 2018 à 11:12:15

Je ne comprend pas précisément ce que tu cherches à faire mais s'il s'agit d'une anim montrant les gens qui se follow, sub ou autre puis de la faire disparaitre. Il te suffit de te renseigné sur Streamlabs. Tout est déjà prévu pour faire sans conception de code.

pierreletet

19 février 2018 à 12:20:09

setTimeout(function () {
    document.getElementById('alert-message').style.display = 'none';
}, 2000);
    // modifier 2000 pour changer le temps (en ms)

fonctionne a insérer dans ton head entre balise <script> le script ici ... </script>

-
Edité par pierreletet 19 février 2018 à 12:20:42

Raitex

22 février 2018 à 12:22:12

Non Neroxis car j'ai fait une animation et je veux que le texte disparaisse avant mon animation

Raitex

24 février 2018 à 18:49:49

J'ai essayer et sa ne fonctionne pas.. sa fait disparaître mon texte .....

( c'est bans le dans le JS que je dois l insérer? )