Panneau coulissant progressif

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Panneau coulissant progressif

Message par MortuusFR Ven 18 Aoû 2017 - 18:07

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

MortuusFR
Nouveau membre

Messages : 8
Inscrit(e) le : 01/06/2017

http://chez-mortuus.forumactif.org/
MortuusFR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant progressif

Message par Invité Dim 20 Aoû 2017 - 8:06

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 Panneau coulissant progressif 3060548200


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;


Wink
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant progressif

Message par MortuusFR Mar 22 Aoû 2017 - 17:50

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

MortuusFR
Nouveau membre

Messages : 8
Inscrit(e) le : 01/06/2017

http://chez-mortuus.forumactif.org/
MortuusFR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant progressif

Message par Invité Mar 22 Aoû 2017 - 19:03

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





Wink


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau coulissant progressif

Message par MortuusFR Mer 23 Aoû 2017 - 11:24

Parfait, un grand merci à toi Wink
MortuusFR

MortuusFR
Nouveau membre

Messages : 8
Inscrit(e) le : 01/06/2017

http://chez-mortuus.forumactif.org/
MortuusFR a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum