Cacher div après 7 secondes

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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

09/12/2013, 13h03
SpaceFrog

pas de PHP ici ...
http://www.developpez.net/forums/d73...isation-forum/
09/12/2013, 13h28
NoSmoking

Bonjour,
personnellement je ne vais pas attendre 7 secondes avant de quitter le site :calim2:
09/12/2013, 13h39
Anonyme1784

u_U

Merci,

Citation:

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

Citation:

Envoyé par NoSmoking

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

Et c'est justement pour ça que je ne demande pas des avis sur cette méthode, mais comment la faire fonctionner.
09/12/2013, 13h43
SpaceFrog

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

donne le code html généré ...
09/12/2013, 13h50
SylvainPV

Code:

notifier.wait->();

c'est censé être quoi ça ? Pas du JS en tout cas
09/12/2013, 13h51
Anonyme1784

Oui merci,
http://webfrag.tk/aatimer.php
09/12/2013, 13h52
Bovino
Code:

1 2 3 4 5 function wait(){ var notifier = new EventNotifier(); setTimeout(notifier, 2000); notifier.wait->(); }
Ca sort d'où cette syntaxe ? :koi:

Ceci dit, je pense que tu auras du mal à faire attendre 7s avec setTimeout(notifier, 2000); ! :mouarf:
09/12/2013, 16h55
SylvainPV

Et l'attribut onload sur des <div>, quel sens ça peut bien avoir :weird:
09/12/2013, 18h11
Anonyme1784

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
09/12/2013, 19h31
SylvainPV

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>

Merci,

alors j'ai modifié :

Code:

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

J'ai quand même l'impression que tu te compliques la vie, mais avant il te faut former un code HTML propre

Code:

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

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

09/12/2013, 20h40
Anonyme1784

Merci beaucoup,
on est bien d'accord que mon contenu s'affiche avant le timer ?!!
09/12/2013, 21h28
NoSmoking

Citation:

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.

Merci :D,
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:

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

10/12/2013, 00h22
SylvainPV

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.
10/12/2013, 08h55
SpaceFrog

Citation:

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é :merci:
10/12/2013, 10h10
Auteur

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 8O
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).
10/12/2013, 17h54
Anonyme1784

Oui merci,
en fait j'arrive à faire ce que je veux au final 8-)
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. :mouarf:

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 :aie:

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 :ccool: Et donc comme ça, il est traduit par le serveur et envoyé au client ?!

Voir 40 message(s) de cette discussion en une page