C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 19:52 par Sakira

» [RPG] Fiche personnage avec bannière latérale
Hier à 19:46 par #Brook

» Système d'onglets simple et personnalisable
Hier à 19:45 par #Brook

» [RPG] Fiche personnage et présentation
Hier à 09:44 par Invité

» [RPG] Fiche de présentation
Lun 26 Juin 2017, 18:26 par Invité

» Modifier l'apparence du titre des topics
Mer 21 Juin 2017, 10:21 par Invité

» Zoomer progressivement sur une image
Mar 20 Juin 2017, 12:38 par Lutèce

» Décoration avant ou après un lien
Mar 20 Juin 2017, 12:05 par nuanciel


Poster un nouveau sujet   Répondre au sujetPartagez | 
 

Chatbox latérale coulissante (avec template)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://generation.geek.chez.com
avatar
{ Membre actif }
{ Membre actif }

Masculin Messages : 866



ChatBox latérale (avec template)


Informations générales

Description :
Ce tutoriel vous permettra d'installer la ChatBox de votre forum dans un panneau coulissant sur le côté de votre forum, en éditant vos templates ou simplement en ajoutant le code fourni dans votre message d'accueil.

RAPPEL : Vous devez être le fondateur du forum pour pouvoir modifier les templates

Démo :
Chatbox fermée
Chatbox ouverte

Testé sur :
(Compatible tous navigateurs)

Crédits :
Proposé par B•øw le 16/04/2010 | validé par B•øw

Mise(s) à jour :
Mise à jour le 23/09/2012 par Doare

Le tutoriel


Prérequis


Dans ce tutoriel, j'ai utilisé deux boutons. Un bouton "ouvrir" et un bouton "fermer". Par défaut, vous n'aurez besoin que de ces deux éléments graphiques, pensez à créer les vôtres.

Pour simplifier la notation, dans la suite le lien de l'image "ouvrir" sera noté URL_IMG_OUVRIR et celui de l'image "fermer" sera noté URL_IMG_FERMER. Pensez à remplacer ces deux valeurs par les liens de vos images !


Structure HTML


Pour commencer, rendez-vous dans votre panneau d'administration et allez dans l'onglet Affichage, puis dans Templates » Général. Editez le template index_body en cliquant sur son nom dans la liste.

Tout à la fin du code, trouvez cette ligne :
Code:
<!-- END switch_legend -->
Juste APRÈS cette ligne de code, ajoutez le tableau suivant :
Code:
<table class="ChatboxLaterale" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <iframe id="chatboxpop" src="#" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
      </td>
      <td class="BoutonChatbox">
         <img id="btn_cb" src="#" alt="Ouvrir/Fermer la ChatBox" />
      </td>
   </tr>
</table>
Note : Vous pouvez également mettre ce code dans votre message d'accueil, le fonctionnement sera identique. Wink


Mise en forme CSS


Rendez-vous dans le menu Images et couleurs » Couleurs et dans l'onglet Feuille de style CSS. Ajoutez le code suivant :
Code:
/* conteneur de la chatbox et du bouton */
.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 0px du bord gauche */
  width : 100px; /* dimension 100px */
}
/* chatbox seule */
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
/* bouton ouvrir/fermer */
.BoutonChatbox {
  vertical-align: bottom; /* alignement vertical du bouton */
}
.BoutonChatbox img {
  cursor: pointer; /* on ajoute un pointeur pour indiquer que notre image est cliquable */
}
Vous pouvez modifier certains éléments du CSS. Par exemple :
    bottom: ?px; La distance entre le bas de la page et votre ChatBox (en pixels ou %).
    left: ?px; La distance entre la gauche de votre page et votre ChatBox.
    width: ?px; La largeur de votre ChatBox quand elle est ouverte.
    height: ?px; La hauteur de votre ChatBox quand elle est ouverte.
    vertical-align: bottom/middle/top; La position du bouton ouvrir/fermer par rapport à la hauteur de la ChatBox. Vous pouvez mettre une de ces trois valeurs : bottom (bas), middle (milieu), bottom (haut).


Fonction Javascript


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 = 'URL_IMG_OUVRIR';
  var imgOuvrirSurvol = 'URL_IMG_OUVRIR';
  var imgFermer = 'URL_IMG_FERMER';
  var imgFermerSurvol = 'URL_IMG_FERMER';
  $('#chatboxpop').attr('src', urlChatBox);
  $('#btn_cb').attr('src', imgOuvrir);
  $('#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.


Mais comment ça marche ?


Dans notre tableau, nous avons placé d'une part une iframe qui appelle la ChatBox du forum, d'autre part l'image "Ouvrir". Cette image est dotée de l'identifiant #btn_cb, auquel se rattache une instruction javascript. Les URLs de la ChatBox et de l'image sont complétées directement par le Javascript. Par conséquent, vous n'avez rien à éditer dans le tableau.

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.

  • Deux instructions, qui déclarent les URLs de la ChatBox et du bouton Ouvrir.

  • Une instruction plus élaborée, 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.




Dernière édition par B•øw le Mer 02 Mar 2011, 14:17, édité 2 fois
MessageSujet: Chatbox latérale coulissante (avec template)   Ven 16 Avr 2010, 07:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


IMPORTANT : Pour changer l'apparence ou autre de la chatbox, il suffit de se rendre dans ce Topic


Q
Une petite question, comment faire pour avoir la box sur toutes les pages du forum ?

R
Il faut placer le code dans le template overall_footer_end, juste avant la balise </body>.


Q
Est-ce que je peux faire exactement la même chose avec une chatbox extérieure ?

R
Oui, il suffit de modifier la variable urlChatBox dans le code Javascript.
Code:
var urlChatBox = 'url_chatbox_exterieure';


Q
Est-ce possible que ma Chatbox s’affiche à droite au lieu d’à gauche ?

R
Oui. Dans le CSS, il suffit de changer left par right.


Q
J’ai appliqué le code du coup… j’ai deux chatbox sur mon forum, l’une sur le côté et l’autre en bas du forum, comment j’enlève celle-ci ?

R
Il faut tout simplement aller dans Modules (dans votre panneau d’administration) ensuite : » ChatBox » Configuration » Affichage de la chatbox » Ne pas afficher.


Q
Comment on modifie les boutons?

R
Pour modifier les boutons, il faut créer vos propres images, puis les héberger, puis remplacer les liens des images proposées dans le tuto par vos propres liens.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Chatbox latérale coulissante (avec template)   Ven 22 Juil 2011, 08:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



23-09-2012 - Tutoriel revu et mis à jour


MessageSujet: Re: Chatbox latérale coulissante (avec template)   Dim 23 Sep 2012, 12:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://accrosgraphandco.forumactif.com
{ Membre }
{ Membre }

Féminin Messages : 30



merci
MessageSujet: Re: Chatbox latérale coulissante (avec template)   Dim 16 Juin 2013, 14:29
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Chatbox latérale coulissante (avec template)   
Revenir en haut Aller en bas
 

Chatbox latérale coulissante (avec template)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Chatbox latérale coulissante (avec template)
» Chatbox latérale coulissante (sans template)
» Chatbox latérale coulissante
» Chatbox latérale
» ChatBox latérale/coulissante/sur le côté qui n'en fait qu'à sa tête !

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Reste-
Poster un nouveau sujet   Répondre au sujet

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit