div qui coulisse hors de l'ecran ie: ok FF2 :KO :(

Version imprimable

bonjour les gens !

J'expose mon probleme :

J'ai un script qui permet de faire coulisser un div dans l'ecran ou hors de l'ecran !
Celui-ci fonctionne trés bien avec IE a premeier vue !
Mais pas sous FF2 !

En faite sous ff2 le div accept de sortir de l'ecran mais pas de revenir :(

Voici mon script :

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
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css"> 
 
 #cadreintro2{
	position:absolute;
	left: 0px;
	top: 199px;
	z-index: 3;
	width: 540px;
	height: 236px;
background-color:#00CC00;
 } 
   </style>
 
 
    <script type="text/javascript">
var pos=0
function launch(){
 
var banniere=document.getElementById('cadreintro2')
var moveup=setInterval(function(){   
                              if(pos==0){clearInterval(moveup)}
                              else{banniere.style.left=pos;
                                   pos++;}
                               },1)   
 
var movedown=setInterval(function(){   
                              if(pos==-520){clearInterval(movedown)}
                              else{banniere.style.left=pos;
                                   pos--;}
                               },1)   
}
 
</script>  
<!-- DEBUT DIV INTRO-->
 
<div id="cadreintro2">
<table width="540" border="0" cellspacing="0" cellpadding="0">
 
  <tr>
      <td width="540"> PETIT HOMME DANS LA VIE IL FAUT 
        QUE CA GLISSE :) </td>
    <td>
    <input type="button" onclick="launch()" value="go" /></td>
  </tr>
</table>
</div>
 
<!-- FIN DIV INTRO -->

Merci d'avance ;)

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=-101
function launch(){
var banniere=document.getElementById('banniere')
var moveup=setInterval(function(){	
										if(pos>0){clearInterval(moveup);
										          pos=0;}
										else{banniere.style.bottom=pos;
										     pos=pos+4;}
										 },1)    
 
setTimeout(function(){
var movedown=setInterval(function(){	
										if(pos<(-101)){clearInterval(movedown)}
										else{banniere.style.bottom=pos;
										     pos--;}
										 },1)    
},5000)
 
}
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;">
<input type="button" onclick="launch()" value="go" />
<div id="banniere" style="position:absolute; bottom:-101px;left:0px; width:100%;background-color:red;color:white; font-size:30px;text-align:center;height:100px;width:100%;">bannière</div>
</body>
</html>

T'es trop fort ;)

Cependant j'ai encore quelque soucis !

En faites je voudrai qu'a l'ouverture de ma page la banniere soit visible !
Au premier clic sur le bouton la banniere se cache .
Au deuxieme clic elle remonte a sa place initiale.

vola le sricpt que j'ai modifié (saccagé ^^)
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 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Bannière bas </title> <script type="text/javascript"> var pos=0 function launch(){ var banniere=document.getElementById('banniere') var moveup=setInterval(function(){ if(pos>0){clearInterval(moveup); pos=0;} else{banniere.style.bottom=pos; pos=pos+4;} },1) var movedown=setInterval(function(){ if(pos<(-101)){clearInterval(movedown)} else{banniere.style.bottom=pos; pos--;} },1) } </script> </head> <body style="overflow:hidden;margin:0px;"> <input type="button" onclick="launch()" value="go" /> <div id="banniere" style="position:absolute; bottom:0px;left:0px; width:100%;background-color:red;color:white; font-size:30px;text-align:center;height:100px;width:100%;">bannière</div> </body> </html>
Elle apparait a l'ouverture de la page : OK :)
Elle disparait quand on clic sur le bouton :OK :)
Elle réapparait quand on reclique : NOK ==> elle remonte et redescend :( arrghhh

VIte fait alors voici une façon de resoudre ton problème ...

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
37
38
39
40
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=0
var VisibleBar =true
 
function launch(){
var banniere=document.getElementById('banniere')
VisibleBar?Movedown():Moveup();
}
 
function Moveup(){ 
var moveup=setInterval(function(){	
										if(pos>0){clearInterval(moveup);
										          pos=0;}
										else{banniere.style.bottom=pos;
										     pos=pos+4;}
										 },1)    
VisibleBar=true
}
 
function Movedown(){ 
var movedown=setInterval(function(){	
										if(pos<(-101)){clearInterval(movedown)}
										else{banniere.style.bottom=pos;
										     pos--;}
										 },1)    
VisibleBar=false 
}
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;">
<input type="button" onclick="launch()" value="go" />
<div id="banniere" style="position:absolute; bottom:0px;left:0px; width:100%;background-color:red;color:white; font-size:30px;text-align:center;height:100px;width:100%;">bannière</div>
</body>
</html>

06/03/2007, 17h28
NoobX

Pfffiiiou :)

rien a dire c'est parfait :king:

Merci Monsieur Spacefrog :)

Bonjour @ll

Bien que super satisfait du script précédent je voudrais apporté une modif !

Je voudrai que le bouton qui déclenche l'action se trouve sur une autre page(enfant) !

Donc la page départ contient la bannière déroulante et une iframe qui pointe vers le bouton qui active la montée/descente.

voici grossièrement le script de la page "mere" :

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
37
38
39
40
41
<html>
<head>
<title></title>
<style type="text/css"> 
 #banniere{
	position:absolute;
	left: 0px;
	top:0px;
	z-index:5;
	width: 525px;
	height: 360px;
 } 
   </style>
</head>
 
<body  style="overflow:hidden;margin:0px;">£
 
<!-- DEBUT DE LA  PAGE QUI CONTIENT LE BOUTN ACTION -->
<IFRAME  frameborder="0"  SRC="page JS.php" NAME="ZONE2"  HEIGHT="100%" width="100%" style="z-index:1;"> 
Désolé mais votre navigateur ne supporte pas les cadres locaux. 
</IFRAME>
<!--FIN DE LA  PAGE QUI CONTIENT LE BOUTN ACTION -->
 
 
<!-- DEBUT DE LA BANNIERE DEROULANTE -->
<div id="banniere">
  <table width="525px" height="360px" border="1" cellspacing="0" cellpadding="0" >
    <tr> 
<td valign="top" >ICI SE TROUVE LA BANNIERE QUI MONTE ET DESCENT ...
    </tr>
    <tr valign="top"> 
      <td align="center" valign="top">
</td>
    </tr>
  </table>
</div>
<!-- FIN DE LA BANNIERE DEROULANTE -->
 
 
</body>
</html>

Et donc voici le code de la page cible de l'iframe qui contient le bouton et le script necessaire a faire bouger la banniere

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
37
38
39
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var pos=0
var VisibleBar =true
 
function launch(){
var banniere=top.document.getElementById('banniere')
VisibleBar?Movedown():Moveup();
}
 
function Moveup(){ 
var moveup=setInterval(function(){	
										if(pos>0){clearInterval(moveup);
										          pos=0;}
										else{banniere.style.top=pos;
										     pos=pos+4;}
										 },1)    
VisibleBar=true
}
 
function Movedown(){ 
var movedown=setInterval(function(){	
										if(pos<(-356)){clearInterval(movedown)}
										else{banniere.style.top=pos;
										     pos=pos-4;}
										 },1)    
VisibleBar=false 
}
</script>
</head>
 
<body>
 
<div align="right"><img src="/INTRO2.GIF" onclick="launch()"></div>
</body>
</html>

Et donc ça marche po :(

Je pensais qu'il suffisait de modifier la ligne:
"var banniere=document.getElementById('banniere')"
par :
"var banniere=top.document.getElementById('banniere')"

Mais non il me manque quelque chose.

me sens comme ca : :bug: ^^

22/03/2007, 15h03
SpaceFrog

heu il faut savoir que la bannière ne passera jamais au dessu du frame ...
ce n'est pas ça que tu essaye de faire par hasard ?

Afin d'être plus clair voici mon ancien script qui lui fonctionne!
La différence est que celui-ci ne déroule pas il s'affiche ou se cache !!!

Mais la logique est exactement la meme .

donc voici la page "mere" :

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
37
38
<html>
<head>
<title></title>
<style type="text/css"> 
 #banniere{
	position:absolute;
	left: 0px;
	top:0px;
	z-index:5;
	width: 525px;
	height: 360px;
 } 
   </style>
</head>
 
<body  style="overflow:hidden;margin:0px;">
 
<!-- DEBUT DE LA  PAGE QUI CONTIENT LE BOUTON ACTION -->
<IFRAME  frameborder="0"  SRC="/visible.php" NAME="ZONE2"  HEIGHT="100%" width="100%" style="z-index:1;"> 
Désolé mais votre navigateur ne supporte pas les cadres locaux. 
</IFRAME>
<!-- DEBUT DE LA  PAGE QUI CONTIENT LE BOUTON ACTION -->
 
<!-- DEBUT DE LA BANNIERE AFFICHE/CACHE -->
<div id="banniere" style="visibility:hidden;">
  <table width="525px" height="360px" border="1" cellspacing="0" cellpadding="0" >
    <tr> 
<td valign="top" >ICI SE TROUVE LA BANNIERE QUI S AFFICHE ET SE CACHE....
    </tr>
    <tr valign="top"> 
      <td align="center" valign="top">
</td>
    </tr>
  </table>
</div>
<!-- FIN DE LA BANNIERE AFFICHE/CACHE -->
</body>
</html>

et voici la page "enfant", la cible de l'iframe en faite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
    <script type="text/javascript">
function montremoioupas() {
 
top.document.getElementById('banniere').style.visibility=
top.document.getElementById('banniere').style.visibility=='visible'?'hidden':'visible'}
 
</script>
 
 
</head>
 
<body>
<div align="right"><img src="/INTRO2.GIF" onclick="montremoioupas()"></div>
</body>
</html>

22/03/2007, 16h15
NoobX
Le probleme semble venir de la declaration de la variable "banniere" :

var banniere=top.document.getElementById('banniere')

si j'enleve cette variable et que je rentre a la main
"top.document.getElementById('banniere')"
dans chaque fonction cela fonctionne

ex :
Code:

1 2 3 4 5 6 if(pos>0){clearInterval(moveup); pos=0;} else{banniere.style.top=pos; pos=pos+4;} },1) VisibleBar=true
deviend :
Code:

1 2 3 4 5 6 if(pos>0){clearInterval(moveup); pos=0;} else{top.document.getElementById('banniere').style.top=pos; pos=pos+4;} },1) VisibleBar=true
et bien cela fonctionne !!!

Attention au sens de déplacemùent pour rendre visible
si la bannière est en bas il faut monter pour la rendre visible ...
si elle est en haut ... il faut descendre
ce qui donne :

la page "mère"

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title></title>
<style type="text/css"> 
 #banniere{
	position:absolute;
	left: 0px;
	top:0px;
	z-index:5;
	width: 525px;
	height: 360px;
 } 
   </style>
 <script type='text/javascript'>  
var pos=-359
var VisibleBar=false
 
function launch(){
var banniere=document.getElementById('banniere');
VisibleBar?Moveup():Movedown();
}
 
function Moveup(){ 
var moveup=setInterval(function(){	
										if(pos<=-360){clearInterval(moveup);
										          pos=-360;
										          VisibleBar=false;}
										else{banniere.style.top=pos;
										     pos=pos-4;}
										 },1)    
 
}
 
function Movedown(){ 
var movedown=setInterval(function(){	
										if(pos>0){clearInterval(movedown);
										           pos=0;
										           VisibleBar=true;}
										else{banniere.style.top=pos;
										     pos=pos+4;}
										 },1)    
 
}
</script>   
 
</head>
 
<body  style="overflow:hidden;margin:0px;">
 
<!-- DEBUT DE LA  PAGE QUI CONTIENT LE BOUTON ACTION -->
<IFRAME  frameborder="1"  SRC="noob2.htm" NAME="ZONE2"  HEIGHT="100%" width="100%" style="z-index:1;border:solid red 5px;"> 
 
</IFRAME>
<!-- DEBUT DE LA  PAGE QUI CONTIENT LE BOUTON ACTION -->
 
<!-- DEBUT DE LA BANNIERE AFFICHE/CACHE -->
<div id="banniere" style="position:absolute; top:-360px;z-index:2;">
  <table width="525px" height="360px" border="1" cellspacing="0" cellpadding="0" style="border: dotted green 10px;" >
    <tr> 
<td valign="top" >ICI SE TROUVE LA BANNIERE QUI S AFFICHE ET SE CACHE....
    </tr>
    <tr valign="top"> 
      <td align="center" valign="top">
</td>
    </tr>
  </table>
</div>
<!-- FIN DE LA BANNIERE AFFICHE/CACHE -->
</body>
</html>

la fifille:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
</head>
 
<body>
<div align="right"><img src="/INTRO2.GIF" onclick="top.launch()"></div>
</body>
</html>

voilà ;)

et si le bannière est gauche il faudra aller vers la droite
et si elle est à droite il faudra aller à gauche !!!

deja MERCI à SF ;) (une fois de plus)

j'ai découvert une bizarrerie que vous allez sans doute pouvoir m'expliquer ;)

Reprenons a partir de mon 1er code de la journée.
la page cible contenait ce script :
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 <script type="text/javascript"> var pos=0 var VisibleBar =true function launch(){ var banniere=top.document.getElementById('banniere') VisibleBar?Movedown():Moveup(); } function Moveup(){ var moveup=setInterval(function(){ if(pos>0){clearInterval(moveup); pos=0;} else{banniere.style.top=pos; pos=pos+4;} },1) VisibleBar=true } function Movedown(){ var movedown=setInterval(function(){ if(pos<(-356)){clearInterval(movedown)} else{banniere.style.top=pos; pos=pos-4;} },1) VisibleBar=false } </script>
CE CODE NE FONCTIONNAIT PAS MAIS :

si je fais comme ce qui suit cela fonctionne sans rien changer d'autre :
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 <script type="text/javascript"> var pos=0 var VisibleBar =true function launch(){ VisibleBar?Movedown():Moveup(); } function Moveup(){ var moveup=setInterval(function(){ if(pos>0){clearInterval(moveup); pos=0;} else{top.document.getElementById('banniere').style.top=pos; pos=pos+4;} },1) VisibleBar=true } function Movedown(){ var movedown=setInterval(function(){ if(pos<(-356)){clearInterval(movedown)} else{top.document.getElementById('banniere').style.top=pos; pos=pos-4;} },1) VisibleBar=false } </script>
et bien cela fnctionne

en résumer j'ai supprimer la declaration
( var banniere=top.document.getElementById('banniere') )
et a la place de chaque variable "banniere" j'ai mis
top.document.getElementById('banniere')
et cela fonctionne ????
alors pourquoi ca je sais pas ????

22/03/2007, 17h09
SpaceFrog

parceque tu déclare la variable dasn une focntion, sa portée n'est donc pas globale ...
elle n'est pas reconnue dasn une autre focntion ...

declare la variable hors des fonctions et ça ira mieux ...
22/03/2007, 17h21
SpaceFrog
explication:
Code:

1 2 3 4 5 6 7 function one(){ var locale='coucou'} function two() {alert(locale)} one() two()
retourne undefined puisque la variable est declarée dasn la fonction one, ce qui limite sa portée à la fonction one.

si tu as besoin de la variable dans la fonction two trois possibilités :
- 1 declarer la varaible hors des fonctions de sorte qu'elle ait une portée globale:
  Code:
  
  1 2 3 4 5 6 var globale function one(){globale='coucou'} function two() {alert(globale)} one() two()
- 2 declarer la varaible dans une fonction mais en la rattachant directement à la fenetre de sorte qu'elle ait une portée
  Code:
  
  1 2 3 4 5 6 7 function one(){ window['globale']='coucou'} function two() {alert(locale)} one() two()
- la passer en parmaètre d'une fonction à l'autre
  Code:
  
  1 2 3 4 5 6 7 function one(){ var locale='coucou' two(locale)} function two(variable) {alert(variable)} one()
22/03/2007, 17h27
NoobX

bon bah là c'est encore mieux que mieux :) :yaisse2:

non seulement j'ai un script qui tourne au poil mais en plus j'ai un petit cours sur un truc que j'avais mal ou pas compris :)

MERCI Mr SpaceFrog

Le jour ou t'écris un bouquin sur la prog j'achète le 1ere exemplaire :king:

que dire de plus ... ha oui je sais "RÉSOLU"