IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Cacher div apr�s 7 secondes


Sujet :

JavaScript

  1. #1
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut Cacher div apr�s 7 secondes
    Bonjour,

    Mon code marche pas :'(

    Je souhaite que toute la page charge avec un voile et le .gif, puis qu'apr�s 7 secondes (pause en javascript) on cache le voile et le .gif pour montrer la page.
    Aidez-moi s'il vous plait
    (en fait j'ai plein de iframe et je pr�f�re ce syst�me :p )

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function suppr(cache) {
                if (document.getElementById(cache).style.visibility=="visible"){
                    document.getElementById(cache).style.visibility="hidden";}
                else{
                    document.getElementById(cache).style.visibility="visible";}
     
                 return true;
    }
     
    function wait(){
        var notifier = new EventNotifier();
        setTimeout(notifier, 2000);
        notifier.wait->();
    }
    Code php : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?php
    echo '<div id="cache">ii<center><img src="wait.gif"><br>Attendez 5 secondes SVP</center><div>
    <style>
    #cache{
    visibility: visible;
    top:-1;
    left:-1;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    position:absolute;
    }
    </style><div onload="wait()">wait!</div><script>wait();</script>
    ';
     
     
    echo '<div onload="suppr(cache)">supp!</div><script>suppr(\'cache\');</script>';
    ?>


    Merci

  2. #2
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  3. #3
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    Bonjour,
    personnellement je ne vais pas attendre 7 secondes avant de quitter le site

  4. #4
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut u_U
    Merci,

    ?? J'ai un probl�me javascript, donc je poste dans la cat�gorie javascript... !

    Citation Envoy� par NoSmoking Voir le message
    Bonjour,
    personnellement je ne vais pas attendre 7 secondes avant de quitter le site
    Et c'est justement pour �a que je ne demande pas des avis sur cette m�thode, mais comment la faire fonctionner.

  5. #5
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    oui mais nous donner ton code php ne nous sert � rien ...

    donne le code html g�n�r� ...
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  6. #6
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    c'est cens� �tre quoi �a ? Pas du JS en tout cas

  7. #7
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299

  8. #8
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    function wait(){
        var notifier = new EventNotifier();
        setTimeout(notifier, 2000);
        notifier.wait->();
    }
    Ca sort d'o� cette syntaxe ?

    Ceci dit, je pense que tu auras du mal � faire attendre 7s avec setTimeout(notifier, 2000); !
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  9. #9
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Et l'attribut onload sur des <div>, quel sens �a peut bien avoir

  10. #10
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut
    Merci,

    Oui j'ai mis 2000 mais �a revient au m�me, c'est qu'une formalit�.

    Le onload c'est pour que le script se lance quand la div apparait.

    En fait je cherche � faire un compteur au milieu du code, quand les 2 ou 7 secondes sont pass�es, la div disparait

  11. #11
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Le onload implique qu'il y ait un chargement, or une <div> ne charge rien de particulier, c'est juste une division.

    onload est appropri� pour ces tags l� uniquement :
    <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

  12. #12
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut
    Merci,

    alors j'ai modifi� :
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <script>
    function fonction(){
        setTimeout(suppr, 5000);
     
    }
    </script>
    <?php
    echo '
    <div id="cache"><center><img src="wait.gif"><br>Attendez 5 secondes SVP</center><div>
    <style>
    #cache{
    visibility:visible;
    top:-1;
    left:-1;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.65);
    position:absolute;
    }
    </style><br><br>
    <div><br>Hey contenu de page<br></div>';
    ?>
     
    <body onload="fonction()">
    BOOOOODYYYYY !! :D
    </body>
     
    <script>
    function suppr() {
                if (document.getElementById("cache").style.visibility=="visible"){
                    document.getElementById("cache").style.visibility="hidden";}
                else{
                    document.getElementById("cache").style.visibility="visible";}
    }
    </script>
    Mais �a marche toujours pas
    http://webfrag.tk/aatimer.php

  13. #13
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    J'ai quand m�me l'impression que tu te compliques la vie, mais avant il te faut former un code HTML propre
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    <div id="cache"><center><img src="wait.gif"><br>Attendez 5 secondes SVP</center><div>
    la balise de fin de DIV ne ferme rien </div>.

    Au d�part ta DIV id="cache" est affich�e donc ne cherche pas, passe la en display:none � l'issu de x secondes, pas de test � faire qui ne servent pas � grand chose.

    Inutile de cr�er une fonction qui renvoie � une autre, tu peux all�ger tout cela, allez exemple
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Masquage</title>
    <style>
    #cache{
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color:rgba(0,0,0,0.65);
      position:absolute;
      text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="cache">
      <img src="wait.gif">
      <br>Attendez 5 secondes SVP
    </div>
    <div>
      Hey contenu de page
    </div>
    <script>
    window.onload = function(){
      setTimeout( function(){
          document.getElementById("cache").style.display = 'none';
        }, 5000);
    };
    </script>
    </body>
    </html>
    Tu noteras que l'on passe par display et non visibility.

    Important, regarde toujours le code HTML g�n�r� pour voir les erreurs...HTML...

  14. #14
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut
    Merci beaucoup,
    on est bien d'accord que mon contenu s'affiche avant le timer ?!!

  15. #15
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    on est bien d'accord que mon contenu s'affiche avant le timer ?!!
    je ne comprend pas trop la signification de cela, si tu esp�res que le contenu TOTAL de ta page, IFRAME comprises, soit affich� avant la suppression du voile, cela va d�pendre du temps de chargement de tes pages et de la connexion internet de l'internaute, donc 7 secondes cela peut �tre trop long ou trop court, voil� une raison du pourquoi cette approche est mauvaise.

    Si tu veux plus de pr�cision il te faut g�rer les �v�nements onload de tes IFRAME.

  16. #16
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut
    Merci ,
    le probl�me c'est qu'il me faut un code pour emp�cher de scroll, je souhaitais que le contenu soit cach� et fixe...
    Et j'ai �a, mais maintenant je sais pas comment l'int�grer
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    var keys = [37, 38, 39, 40];
     
    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault)
          e.preventDefault();
      e.returnValue = false;  
    }
     
    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }
     
    function wheel(e) {
      preventDefault(e);
    }
     
    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }
     
    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

    En effet, j'ai d�j� demand� de l'aide pour g�rer les id "ind�nombrables"...

    Et je me suis r�sign� � poser cette question :
    http://www.developpez.net/forums/d13...ascript-clique

  17. #17
    R�dacteur/Mod�rateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par d�faut
    Ceci est le comportement caract�ris� du "d�veloppeur de supermarch�". On fait ses courses, on regarde ce qu'il y a en rayon par ci par l�, on prend, on repose, on va voir ailleurs...

    Je ne peux pas trop t'en vouloir si tu es en classe de terminale. Mais tu auras du mal � arriver � tes fins si tu n'apprends pas les choses dans l'ordre. Aller � t�tons et essayer au petit bonheur la chance des bouts de code trouv�s sur des forums, �a risque de te cr�er plus de probl�mes que �a ne va en r�soudre.

  18. #18
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    Aller � t�tons et essayer au petit bonheur la chance
    Tout comme pour l'utilisation de ce forum !!!

    Merci de lire les r�gles d'utilisation
    tu persistes a mon montrer ton code PHP

    Qui soit dit en passant n'a aucune justification, tu fais des echo qui n'ont pas lieu d'�tre car ils ne contiennent aucune variable.

    Regarde le code de NoSmo ... pas de php ...

    ici on mets le code html g�n�r�
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  19. #19
    Expert confirm�
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par d�faut
    bonjour,

    j'ai regard� le code du message #12 et j'ai vu beaucoup dans la structure de la page :
    1- une balise script
    2- suivi d'une balise div avec du PHP
    3- ensuite vient la balise body
    4- encore une balise script

    To175, j'ai le sentiment que tu as m�lang� beaucoup de choses et que tu cherches � mettre la charrue avant les boeufs. Il faudrait (re)voir les bases :
    - structure d'une page HTML ;
    - diff�rences entre langage serveur / langage client (et la diff�rence entre un client et le serveur) ;
    - qu'est-ce que le PHP (notion de langage serveur) ;
    - qu'est que javascript (notion de langage client).

  20. #20
    Membre tr�s actif
    Profil pro
    Inscrit en
    Juillet 2013
    Messages
    299
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2013
    Messages : 299
    Par d�faut
    Oui merci,
    en fait j'arrive � faire ce que je veux au final
    je pense que aucune de mes pages ne respectent quelconque r�gle (genre doctype et tout) mais moi je peux le visionner sur firefox et google chrome et je sais que mes camarades iront plutot sur ces navigateurs.

    Je me demande pourquoi vous ne voulez pas de php, mais je crois comprendre quand m�me. Et au d�part j'�tais parti sur une sorte de compteur qui m�lange PHP et javascript avec les $_SESSION

    Et aussi, je trouve �trange le comportement du timer qui d�marre gr�ce � la balise body. J'essaye de comprendre au fur et � mesure parceque il y a �norm�ment de choses, et l'ordre des script est d�routant parfois.

    Oui je sais que le code php se charge dans... HA OK lol ba oui euh je crois comprendre enfait... j'ai pas pens� que le code php �tait "perdu" une fois arriv� chez le client Et donc comme �a, il est traduit par le serveur et envoy� au client ?!

+ R�pondre � la discussion
Cette discussion est r�solue.
Page 1 sur 2 12 Derni�reDerni�re

Discussions similaires

  1. [C#] Comment cacher un div apr�s x secondes
    Par jbrasselet dans le forum ASP.NET
    R�ponses: 10
    Dernier message: 17/03/2011, 10h16
  2. Redirection apr�s qq secondes
    Par BnA dans le forum Web
    R�ponses: 2
    Dernier message: 13/05/2006, 15h17
  3. R�ponses: 9
    Dernier message: 02/02/2006, 15h46
  4. Fermer la fenetre apr�s 5 secondes
    Par Sniper37 dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 05/01/2006, 11h24
  5. afficher / cacher div
    Par Cruelo dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 25/11/2004, 13h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo