Panneau coulissant progressif

[MortuusFR]

Salut à tous !
J'ai effectué quelques recherches mais j'ai rien trouvé qui ne fonctionne assez bien, je me tourne vers vous.
J'ai besoin de créer une chatbox ou panneau coulissant mais qui s'ouvre lentement et se referme aussi lentement, si quelqu'un à une idée de comment faire cela je veux bien.

Merci à vous.

PS: Je me suis aider du ysteme de panneau mais l'ouverture est brusque.

[Invité]

Hello MortuusFR,

on peut via ce script et ce bout de c.s.s afficher la progression plus ou moins longue...


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches sur toutes les pages.

Déposes ceci:

Code:


jQuery(document).ready(function()
{
jQuery('body').append('
<div class="M14_ChAtBoX">
<img class="M14_Open"style="position:absolute;"title="Afficher la chatbox"src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png"/>
<img class="M14_Close"style="position:absolute;"title="Fermer la chatbox"src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png"/>
</div><div id="M14_ChAtBoX" scrolling="no" style="width: 800px; height: 400px;" marginwidth="0" marginheight="0" frameborder="0">
<iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" >
</iframe></div>');
                     
$('.M14_Open').click(function(){ 
 $(this).fadeOut();
$('.M14_Close').fadeIn();
 $('#M14_ChAtBoX').css('right','50px');
});
  $('.M14_Close').click(function(){ 
 $(this).fadeOut();$('.M14_Open').fadeIn();
 $('#M14_ChAtBoX').css('right','-850px');
  });
});




Penses à cliquer sur le bouton VALIDER


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/*Le conteneur des images*/
.M14_ChAtBoX{background-color:#ffffff;height:100px;width:30px;position: fixed; bottom: 50px; right: 0px;z-index: 999;}
/*On cache l image de fermeture*/
img.M14_Close{display:none;}
/*Le conteneur de la chatbox*/
#M14_ChAtBoX
{
z-index: 9999;
position:fixed;
right:-850px;
bottom:10px;
-webkit-transition: right 2s ease-in-out;
-moz-transition: right 2s ease-in-out;
-o-transition:right 2s ease-in-out;
transition: right 2s ease-in-out;
}


Penses à cliquer sur le bouton


Tu auras un transition de 2s , si tu désires modifier à 1 seconde,
il faudra modifier les 4 valeurs comme ceci:

Code:


-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-o-transition:right 1s ease-in-out;
transition: right 1s ease-in-out;


[MortuusFR]

Salut, merci pour ta réponse.
Comment mettre le bouton d'ouverture à gauche, qui suit le bloc de la chatbox peu importe qu'il soit ouvert ou non. Mh ?
Merci.

[Invité]

Hello MortuusFR,

on va changer le script par celui-ci:

Code:


jQuery(document).ready(function()
{
jQuery('body').append('
<div id="M14_ChAtBoX" scrolling="no" style="width: 800px; height: 400px;" marginwidth="0" marginheight="0" frameborder="0">
                      <div class="M14_ChAtBoX">
<img class="M14_Open"style="position:absolute;"title="Afficher la chatbox"src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png"/>
<img class="M14_Close"style="position:absolute;"title="Fermer la chatbox"src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png"/>
</div>
<iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" >
</iframe></div>');
                     
$('.M14_Open').click(function(){ 
$(this).fadeOut();
$('.M14_Close').fadeIn();
$('#M14_ChAtBoX').css('right','20px');
});
$('.M14_Close').click(function(){ 
$(this).fadeOut();
$('.M14_Open').fadeIn();
 $('#M14_ChAtBoX').css('right','-800px');
  });
});



Puis remplaces toutes la c.s.s donnée:

Code:


/*Le conteneur des images*/
.M14_ChAtBoX{background-color:#ffffff;height:100px;width:30px;position:absolute; bottom: 50px;margin-left: -30px;z-index: 999;}
/*On cache l image de fermeture*/
img.M14_Close{display:none;}
/*Le conteneur de la chatbox*/
#M14_ChAtBoX
{
position:fixed;
z-index: 999;
right:-800px;
bottom:10px;
-webkit-transition: right 2s ease-in-out;
-moz-transition: right 2s ease-in-out;
-o-transition:right 2s ease-in-out;
transition: right 2s ease-in-out;
}





a++

[MortuusFR]

Parfait, un grand merci à toi