Code javascript - Popup montante / descendante

**seb0634** · 10/12/2008, 14h02

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.

**SpaceFrog** · 10/12/2008, 14h21

code déja fourni => recherche

un truc de ce style là:

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

**seb0634** · 10/12/2008, 15h21

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+

**SpaceFrog** · 10/12/2008, 15h28

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 ?

**Balafatch** · 08/06/2009, 12h47

Bonjour,
J'ai essayé le code tel quel.
Avec Mozilla 3 0 10 la fermeture ne fonctionne pas.

Avec IE 7 aprés avoir autorisé le script la fermeture ne s'effectue pas et cela tremble de partout !!!

Avec Chrome cela fonctionne une fois (ouverture/fermeture) et après... plus rien !

...
Je n'ai pas pris le temps d'essayer les autres...

@+

**SpaceFrog** · 08/06/2009, 15h26

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

**bigboomshakala** · 09/06/2009, 08h37

pour moi aucun des 2 scripts ne marchent correctement

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

**SpaceFrog** · 09/06/2009, 08h40

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

**bigboomshakala** · 13/06/2009, 01h49

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

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

Code javascript - Popup montante / descendante

JavaScript

Discussions similaires

Partager

Partager