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

**NoobX** · 06/03/2007, 14h29

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 :

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

**SpaceFrog** · 06/03/2007, 14h32

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

**NoobX** · 06/03/2007, 17h14

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 :

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

**SpaceFrog** · 06/03/2007, 17h22

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

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

**NoobX** · 06/03/2007, 17h28

Pfffiiiou

rien a dire c'est parfait

Merci Monsieur Spacefrog

**NoobX** · 22/03/2007, 15h00

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 :

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

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

^^

**SpaceFrog** · 22/03/2007, 15h03

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 ?

**NoobX** · 22/03/2007, 15h49

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 :

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

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

**NoobX** · 22/03/2007, 16h15

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 :

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

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 :

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

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

**SpaceFrog** · 22/03/2007, 16h21

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 :

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

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

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

**NoobX** · 22/03/2007, 16h37

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 :

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

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

**SpaceFrog** · 22/03/2007, 17h09

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

**SpaceFrog** · 22/03/2007, 17h21

explication:

Code :

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

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 :

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

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 :

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

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 :

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

1
2
3
4
5
6
7
 
function one(){ var locale='coucou'
                     two(locale)}
 
function two(variable) {alert(variable)}
 
one()

**NoobX** · 22/03/2007, 17h27

bon bah là c'est encore mieux que mieux

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

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

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

JavaScript

Discussions similaires

Partager

Partager