<div> déroulant hors de la page.

Version imprimable

11/06/2008, 23h11
doncho23

<div> déroulant hors de la page.

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.

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:

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>

Bon comme j'avais dix minutes à perdre :

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

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

12/06/2008, 20h34
doncho23

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

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.
12/06/2008, 20h44
SpaceFrog

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

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

faut pas jouer sur le top mais sur le bottom

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

12/06/2008, 21h16
doncho23

Lol. 8O
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
13/06/2008, 13h29
SpaceFrog

sur le onresize de la page tu refixes le bottom à 0 ...
13/06/2008, 13h41
doncho23

En effet cela marche.
Parfait, je te remercie pour ton aide.
C'est top maintenant.
Ben voilà sujet résolu.
:D
13/06/2008, 14h02
SpaceFrog

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