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 :

^^

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager