<div> déroulant hors de la page.

**doncho23** · 11/06/2008, 23h11

Voilà après des heures de recherche sur Google je n'ai rien trouvé qui pourrais amener à un résultat que je recherche.

En fait j'aimerais placer un div avec un lien sur le dessus de celui-ci qui serais fixe et qui se placerais en bas de page, donc le div serais en dehors de la page on apercevrais que le lien au dessus.
On vois le liens cliqué le div apparaîtrais avec la possibilité de le refermé par aprés

Pour plus de précision je vais vous montrer une le résultat souhaité en image.
J'ai trouver un script qui faisait se dérouler un div mais bon je n'arrive pas à l'adapter étant assez nul en Javascript.

http://clarenne-gregory.heaj.be/aide/

Si vous avez un tuto ou autre je suis preneur.

Merci d'avance.

**SpaceFrog** · 12/06/2008, 08h40

Un bout de script que j'avais donné il y a quelques années pour un lecteur MP3 sur le coté de page ...
TU peux l'adapter pour le bas de pag et mettre éventuellement le repliage sur bouton dans le div ...

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

**SpaceFrog** · 12/06/2008, 09h44

Bon comme j'avais dix minutes à perdre :

ça donnerait un truc comme ça ...
à quelques pixels près ...

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=98
var running='no'
var moveup; 
var movedown;
 
function Moveup(){
window['banniere']=document.getElementById('mp3player')
 
if (running=='up'){return false;}
if(running=='down'){clearInterval(movedown)}
running='up';
moveup=setInterval(function(){   
                              if(pos==85){clearInterval(moveup);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos--;}
                               },1);   
} 
 
function Movedown (){
if (running=='down'){return false;}
if (running=='up'){clearInterval(moveup);}
running='down';
movedown=setInterval(function(){   
                              if(pos==98){clearInterval(movedown);
                                          running='no'}
                              else{banniere.style.top=pos+"%";
                                   pos++;}
                               },1);   
}
 
 
 
 
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;height:100%;">
<div id="mp3player" style="position:absolute; left:10px; top:97%; width:200px;background-color:yellow;color:white; font-size:12px;height:200px;">
<a href="javascript:Moveup()" style="font-size:20px;">Menu</a>
<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>
 
</body>
</html>

**doncho23** · 12/06/2008, 20h34

Merci BCP !!!!
Voilà j'ai appliqué le script à ma page et adapté à celle-ci, tout marche niquel,
Le seul problème que je rencontre c lorsque je réduit la taille de la page de mon navigateur en hauteur la partie du div qui est sur le bas de la page rétrécit.
Y aurais t-il une solution à ce problème?
Je vous fournis un lien pour vous montrer le résultat.
En tout cas mis a par ce petit problème le script est parfait.

Page
Script que tu m'as fourni.

Si il n'y a pas de solution ce n'est pas grave.
En tout je te remercie.

**SpaceFrog** · 12/06/2008, 20h44

sur le onresize de la page il faut repositonner le div top:97% ou avec bottom... je regarde demain

**SpaceFrog** · 12/06/2008, 20h52

BEn ça à été plus rapide que prévu ...

faut pas jouer sur le top mais sur le bottom

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
<script type="text/javascript">
var pos=-180
var running='no'
var moveup; 
var movedown;
 
function Moveup(){
window['banniere']=document.getElementById('mp3player')
 
if (running=='up'){return false;}
if(running=='down'){clearInterval(movedown)}
running='up';
moveup=setInterval(function(){   
                              if(pos>0){clearInterval(moveup);
                                          running='no'}
                              else{banniere.style.bottom=pos+"px";
                                   pos=pos+3;}
                               },1);   
} 
 
function Movedown (){
if (running=='down'){return false;}
if (running=='up'){clearInterval(moveup);}
running='down';
movedown=setInterval(function(){   
                              if(pos<-180){clearInterval(movedown);
                                          running='no'}
                              else{banniere.style.bottom=pos+"px";
                                   pos=pos-3;}
                               },1);   
}
 
 
 
 
</script>

**doncho23** · 12/06/2008, 21h16

Lol.

J'espère que je t'embête pas hin, demain sa aurais été bon aussi. XD

En tout cas voilà j'ai modifié comme tu me l'as dis et il ne se rétrécis plus au redimensionement de la page seulement je ne sais plus changer sa taille(par la CSS), sinon il disparaît de la page.

Il faut peut être le redimenssionner dans le code Javascript?

Désoler pour le dérangement à répétition.
Et merci pour ta réactivité.
/Kiss

**SpaceFrog** · 13/06/2008, 13h29

sur le onresize de la page tu refixes le bottom à 0 ...

**doncho23** · 13/06/2008, 13h41

En effet cela marche.
Parfait, je te remercie pour ton aide.
C'est top maintenant.
Ben voilà sujet résolu.

**SpaceFrog** · 13/06/2008, 14h02

heu juste un détail ... si le div est deroulé ...
il faut réattribuer non pas 0 mais la valeur qu'il avait...
suffit de la sauvegarder dans une variable globale ...

<div> déroulant hors de la page.

JavaScript

Discussions similaires

Partager

Partager