Code javascript - Popup montante / descendante

Version imprimable

10/12/2008, 14h02
seb0634

Code javascript - Popup montante / descendante

Bonjour,

J'aimerais trouver un code js qui me permette de créer une fenêtre qui apparaisse en bas de ma page (qui s'ouvre en montant puis se ferme en redescendant) ... un peu dans le style de la popup msn lorsqu'un nouveau contact apparaît en ligne.

Connaissez vous un code simple de ce style ?

Merci.

code déja fourni => recherche

un truc de ce style là:

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
71
72
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
 
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Bannière bas</title>
<script type="text/javascript">
var pos=97
var running='no'
var moveup; 
var movedown;
 
function Moveup(){
banniere=document.getElementById('mp3player')
 
 
if(running=='down'){clearInterval(movedown)}
if (running=='up'){return false;}
moveup=setInterval(function(){   
                              if(pos<83){clearInterval(moveup);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos--;
                                   running='up';}
                               },1);   
 
} 
 
function Movedown (){
banniere=document.getElementById('mp3player')
 
if (running=='up'){clearInterval(moveup);}
if (running=='down'){return false;}
 
movedown=setInterval(function(){   
                              if(pos>97){clearInterval(movedown);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos++;
                                   running='down';}
                               },1);   
 
 
}
 
 
 
 
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;height:100%;">
 
<div id="mp3player" style="position:absolute; left:0px; top:97%; width:100%; font-size:12px;height:200px;cursor:pointer; background-color:violet" onclick="Moveup()">
  <a href="javascript:void(0)" style="font-size:20px;" onclick="Moveup()">Menu</a>
  <div style="background-color:yellow;color:white;">
    <input type="button" onclick="Movedown()" value="x" style="float:right;width:20px;height:20px;margin:0;padding:0;line-height:5px;" /><br />
    <a href="javascript:alert('coucou 1')" onclick="Movedown()">lien 1</a><br />
    <a href="javascript:alert('coucou 2')" onclick="Movedown()">lien 2</a><br />
    <a href="javascript:alert('coucou 3')" onclick="Movedown()">lien 3</a><br />
    <a href="javascript:alert('coucou 4')" onclick="Movedown()">lien 4</a><br />
  </div>
</div>
 
</body>
 
</html>

10/12/2008, 15h21
seb0634

Merci

MAis ce code ne fonctionne pas terrible ni sur IE 6 ni sur FF... Sur IE la popup s'ouvre et se ferme à l'infini au click sur un lien...

Merci de me dire ce qui ne va pas pour correction ou de me fournir le lien qui traite deja ce pb car je n'arrive pas à le trouver.

A+
10/12/2008, 15h28
SpaceFrog

je n'ai pas ce souci chez moi sou IE ou ffx ...
le click sur le lien ferme bien la popup ...
tu as essayé le code telquel ?
08/06/2009, 12h47
Balafatch

La fermeture ne fonctionne pas

Bonjour,
J'ai essayé le code tel quel.
Avec Mozilla 3 0 10 la fermeture ne fonctionne pas.:cry:
Avec IE 7 aprés avoir autorisé le script la fermeture ne s'effectue pas et cela tremble de partout !!!8O
Avec Chrome cela fonctionne une fois (ouverture/fermeture) et après... plus rien !:calim2:
...
Je n'ai pas pris le temps d'essayer les autres...:aie:
@+

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
71
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
 
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Bannière bas</title>
<script type="text/javascript">
var pos=97
var running='no'
var moveup; 
var movedown;
 
function Moveup(){
banniere=document.getElementById('mp3player')
 
 
if(running=='down'){clearInterval(movedown)}
if (running=='up'){return false;}
moveup=setInterval(function(){   
                              if(pos<83){clearInterval(new moveup);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos--;
                                   running='up';}
                               },1);   
 
} 
 
function Movedown (){
banniere=document.getElementById('mp3player')
 
if (running=='up'){clearInterval(moveup);}
if (running=='down'){return false;}
 
movedown=setInterval(function(){   
                              if(pos>97){clearInterval(new movedown);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos++;
                                   running='down';}
                               },1);   
 
 
}
 
 
 
 
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;height:100%;">
 
<div id="mp3player" style="position:absolute; left:0px; top:97%; width:100%; font-size:12px;height:200px;cursor:pointer; background-color:violet" onclick="Moveup()">
  <a href="javascript:void(0)" style="font-size:20px;" onclick="Moveup()">Menu</a>
  <div style="background-color:yellow;color:white;">
    <input type="button" onclick="Movedown()" value="x" style="float:right;width:20px;height:20px;margin:0;padding:0;line-height:5px;" /><br />
    <a href="javascript:alert('coucou 1')" onclick="Movedown()">lien 1</a><br />
    <a href="javascript:alert('coucou 2')" onclick="Movedown()">lien 2</a><br />
    <a href="javascript:alert('coucou 3')" onclick="Movedown()">lien 3</a><br />
    <a href="javascript:alert('coucou 4')" onclick="Movedown()">lien 4</a><br />
  </div>
</div>
 
</body>
 
</html>

curieusement ça solutionne les soucis soue IE ffx et opéra 8O

09/06/2009, 08h37
bigboomshakala

pour moi aucun des 2 scripts ne marchent correctement :aie:

- dans les 2, le bandeau se lève
- dans le 1er, le bandeau peut redescendre, mais c'est un peu aléatoire et ça vibre
- dans le 2è, les "new [var_timer]" génèrent l'erreur "[var_timer]" is not a constructor et le bandeau ne se baisse pas (du coup)
09/06/2009, 08h40
SpaceFrog

honêtement ça ne m'étonne pas plus que ça, c'est juste un pansement..;
j'ai pas le temps de m'y repencher, masi il s'agit d'un souci d'instanciation des fonctions qui se bouffent le nez ...

pff je l'ai modifié dans la 1/2h mais j'ai oublié de le poster... (fallait que je parte tafer...)

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
<html>
<head>
<title>Bannière bas</title>
<script type="text/javascript">
var pos=-180
var running='no'
var moveup; 
var movedown;
 
function Moveup(){
  banniere=document.getElementById('mp3player')
  if(running=='down')
    {clearInterval(movedown)}
  if (running=='up')
    {return false;}
 
  moveup=setInterval(function(){   
    if (pos < 0){
      banniere.style.bottom=pos + "px";
      pos += 2;
      running='up';
  }
    else{
      clearInterval(moveup);
    }
  },1);                         
} 
 
function Movedown (){
  banniere=document.getElementById('mp3player')
 
  if (running=='up')
    {clearInterval(moveup);}
  if (running=='down')
    {return false;}
 
  movedown=setInterval(function(){   
    if (pos > -180){
      banniere.style.bottom=pos+"px";
      pos -= 2;
      running='down';
    }
    else{
    	clearInterval(movedown);
    }
  },1);                               
} 
</script>
</head>
<body style="overflow:hidden;margin:0px;height:100%;">
<div id="mp3player" style="position:absolute; left:0px; bottom:-180px; width:100%; font-size:12px;height:200px;cursor:pointer; background-color:violet" onclick="Moveup()">
  <a href="javascript:void(0)" style="font-size:20px;" onclick="Moveup()">Menu</a>
  <div style="background-color:yellow;color:white;">
    <input type="button" onclick="Movedown()" value="x" style="float:right;width:20px;height:20px;margin:0;padding:0;line-height:5px;" /><br />
    <a href="javascript:alert('coucou 1')" onclick="Movedown()">lien 1</a><br />
    <a href="javascript:alert('coucou 2')" onclick="Movedown()">lien 2</a><br />
    <a href="javascript:alert('coucou 3')" onclick="Movedown()">lien 3</a><br />
    <a href="javascript:alert('coucou 4')" onclick="Movedown()">lien 4</a><br />
  </div>
</div>
</body>
</html>