Introduction

Coucou ! Vous voici sur mon premier tutoriel que je propose pour CSSActif. J'espère donc que j'expliquerai bien, pour que vous puissiez comprendre. Ceci est une autre version du Tutoriel de B•øw. Pour ce tutoriel nous n'avons pas besoin des templates, vous n'êtes donc pas obligé d'être le fondateur du forum, de plus, la ChatBox sera sur toutes les pages de votre forum ! Partout où vous naviguerez, elle sera là (tant que êtes sur le forum en question hein x)). Je vous laisse les boutons Ouvrir/Fermer - qui sont de ma création - pour que vous puissiez tester.

Au préalable

Dans votre panneau d'administration, onglet Modules » ChatBox : Configuration, n'oubliez pas d'activer la ChatBox, mais sans l'afficher.

Un peu de CSS

Dans votre panneau d'administration, onglet Affichage » Images et couleurs : Couleurs » Feuille de style CSS, et collez le code suivant :

Code:

.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 10%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
.boutonChatbox {
vertical-align: bottom; /* on aligne le bouton en bas, le long de la chatbox */
}
.boutonChatbox img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}

C'est ce qui va déterminer le style et le placement de votre ChatBox. Fiez-vous aux commentaires pour modifier telle ou telle propriété.

Un peu de Javascript

Jusqu'à récemment vous deviez créer une page HTML, mais maintenant que ForumActif a mis à notre disposition la possibilité de créer des fichiers Javascript, c'est plus facile.

Dans votre panneau d'administration, onglet Modules » HTML & Javascript : Gestion des codes javascript, créez un nouveau code javascript et collez le code suivant :

Code:

$(function(){
   var urlChatBox = '/chatbox/index.forum?page=front&';
   var imgOuvrir = 'http://upload.cssactif.com/image/21ouvrirchat.png';
   var imgOuvrirSurvol = 'http://upload.cssactif.com/image/21ouvrirchat.png';
   var imgFermer = 'http://upload.cssactif.com/image/88fermerchat.png';
   var imgFermerSurvol = 'http://upload.cssactif.com/image/88fermerchat.png';
   $('body').append('
      <table class="ChatboxLaterale" cellspacing="0" cellpadding="0">
         <tr>
            <td>
               <iframe src="'+urlChatBox+'" id="chatboxpop" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
            </td>
            <td class="boutonChatbox">
               <img id="btn_cb" src="'+imgOuvrir+'" alt="ouvrir la chatbox" />
            </td>
         </tr>
      </table>
   ');
   $('#btn_cb').on({
      click: function(){
         $('#chatboxpop').toggle();
      },
      mouseenter: function(){
         if($('#chatboxpop').css('display') == 'none'){
            $(this).attr('src', imgOuvrirSurvol);
         } else {
            $(this).attr('src', imgFermerSurvol);
         }
      },
      mouseleave: function(){
         if($('#chatboxpop').css('display') == 'none'){
            $(this).attr('src', imgOuvrir);
         } else {
            $(this).attr('src', imgFermer);
         }
      }
   });
});

Cochez toutes les pages dans les options du fichier javascript puis enregistrez.
N'oubliez pas de cocher oui pour l'option Activer la gestion des codes Javascript qui s'affiche sur la page récapitulative des scripts.

Petites explications sur le Javascript

Le code Javascript utilisé se décompose de la manière suivante :

• 5 variables qui déclarent les URLs utilisées : urlChatBox, imgOuvrir, imgOuvrirSurvol, imgFermer, imgFermerSurvol. Les URLs définies dans ces variables sont les seules choses à modifier en fonction de vos besoins.
  
  
• La première instruction, qui génère le code HTML de la ChatBox.
  Dans ce code HTML, l'image est dotée de l'identifiant #btn_cb, auquel se rattache l'instruction suivante. Son URL est complétée directement par la variable imgOuvrir.
  
  
• La deuxième instruction, qui déclare trois événements liés à la souris : le clic (click), le survol (mouseenter)... et le "non-survol" (mouseleave).

Comme vous l'aurez deviné, ce code vous permet si vous le souhaitez de changer les boutons Ouvrir et Fermer au survol. Il suffit de modifier les URL des variables correspondantes, soit :
- imgOuvrirSurvol, qui correspond à la variable imgOuvrir
- imgFermerSurvol, qui correspond à la variable imgFermer

Si vous ne souhaitez pas utiliser l'option de survol, comme dans le code par défaut, renseignez la même URL pour imgOuvrir et imgOuvrirSurvol, et pour imgFermer et imgFermerSurvol.