Cacher div après 7 secondes

**Anonyme1784** · 09/12/2013, 13h52

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

**SpaceFrog** · 09/12/2013, 14h03

pas de PHP ici ...
http://www.developpez.net/forums/d73...isation-forum/

**NoSmoking** · 09/12/2013, 14h28

Bonjour,
personnellement je ne vais pas attendre 7 secondes avant de quitter le site

**Anonyme1784** · 09/12/2013, 14h39

Merci,

Envoyé par SpaceFrog

pas de PHP ici ...
http://www.developpez.net/forums/d73...isation-forum/

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

Envoyé par NoSmoking

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.

**SpaceFrog** · 09/12/2013, 14h43

oui mais nous donner ton code php ne nous sert à rien ...

donne le code html généré ...

**SylvainPV** · 09/12/2013, 14h50

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

notifier.wait->();

c'est censé être quoi ça ? Pas du JS en tout cas

**Anonyme1784** · 09/12/2013, 14h51

Oui merci,
http://webfrag.tk/aatimer.php

**Bovino** · 09/12/2013, 14h52

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); !

**SylvainPV** · 09/12/2013, 17h55

Et l'attribut onload sur des <div>, quel sens ça peut bien avoir

**Anonyme1784** · 09/12/2013, 19h11

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

**SylvainPV** · 09/12/2013, 20h31

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>

**Anonyme1784** · 09/12/2013, 20h49

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

**NoSmoking** · 09/12/2013, 21h12

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...

**Anonyme1784** · 09/12/2013, 21h40

Merci beaucoup,
on est bien d'accord que mon contenu s'affiche avant le timer ?!!

**NoSmoking** · 09/12/2013, 22h28

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.

**Anonyme1784** · 09/12/2013, 22h33

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

**SylvainPV** · 10/12/2013, 01h22

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.

**SpaceFrog** · 10/12/2013, 09h55

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é

**Auteur** · 10/12/2013, 11h10

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).

**Anonyme1784** · 10/12/2013, 18h54

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 ?!

Cacher div après 7 secondes

JavaScript

Discussions similaires

Partager

Partager