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

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

» Système d'onglets simple et personnalisable
Dim 18 Juin 2017, 20:17 par VankaAD

» Quelques codes utiles pour la Chatbox
Dim 18 Juin 2017, 11:43 par Invité

» Signature codée avec onglets
Mer 14 Juin 2017, 05:35 par PolardK

» [phpBB2] Sauvegarde des posts en cours d'écriture
Mer 14 Juin 2017, 05:15 par PolardK


Poster un nouveau sujet   Répondre au sujetPartagez | 
 

Chatbox latérale coulissante (sans template)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 68



Chatbox latérale (sans template)


Informations générales

Description :
Ce tutoriel vous permettra de placer la chatbox de votre forum dans une boîte latérale qui s'ouvre et se referme au clic sur un bouton. C'est une autre version du Tutoriel de B•øw qui permet de ne pas avoir besoin de passer par les templates ! Vous n'avez donc pas besoin d'être fondateur du forum pour le mettre en pratique.

Démo :
Chatbox fermée
Chatbox ouverte

Testé sur :
Navigateurs récents (javascript activé)

Crédits :
Proposé par Kaktus le 03/03/2011 | Tutoriel approuvé par Hiro

Mise à jour :
Mis à jour le 13/09/2012 par Doare

Le tutoriel


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.




Dernière édition par Kaktus le Dim 22 Avr 2012, 04:57, édité 2 fois
MessageSujet: Chatbox latérale coulissante (sans template)   Jeu 03 Mar 2011, 02:34
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


Q
//

R
//


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 (sans template)   Ven 22 Juil 2011, 08:19
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://happy-school.keuf.net/
avatar
{ Membre }
{ Membre }

Masculin Messages : 64



Merci ♥ ça va m'être utile.
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mer 11 Avr 2012, 13:34
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://efialtest.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 16



Merci Very Happy


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Sam 21 Avr 2012, 17:41
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 68



Ravie que cela vous serve ! Je me suis permise de faire une édition du tutoriel. Wink


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 22 Avr 2012, 04:58
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Et j'en ai fait une juste après pour corriger le petit bug du chatbox.forum?page=front&, et pour utiliser la nouvelle mise en page Wink



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 22 Avr 2012, 09:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 68



Ah oui, en effet ! J'avais oublié ce détail avec la mise à jour de forumactif. Merci 'Christa ! Wink


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 22 Avr 2012, 19:25
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://falonasynae.forumactif.com
{ Membre }
{ Membre }

Féminin Messages : 65



Merci beaucoup ! C'est super pratique ^^
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mar 24 Avr 2012, 11:35
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daggerhorn.bbactif.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 51



Merci beaucoup beaucoup ! Smack Smack
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 10 Juin 2012, 17:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://saigonokitai.forumactif.com
avatar
{ Membre }
{ Membre }

Masculin Messages : 13



Merci, c'est en plein ce que je cherchais!
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 22 Juil 2012, 18:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ephemeraleternity.forumactif.fr
avatar
{ Membre }
{ Membre }

Masculin Messages : 7



Merci beaucoup. Ca marche parfaitement. Mon seul soucis c'est qu'en changeant le bouton, je me suis rendu compte qu'il y avait un petit escape entre la chatbox et le bouton. Je vais donc crée un sujet dans la section adaptée.


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Jeu 09 Aoû 2012, 14:11
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



13/09/2012 - Tutoriel revu et mis à jour


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Jeu 13 Sep 2012, 19:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://...
avatar
{ Membre }
{ Membre }

Féminin Messages : 74



Merci pour le tuto c'est super !

Par contre la Chatbox reste fixe en bas de forum. Est-il possible quel défile en même temps qu'on descend sur le forum ?
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Ven 19 Oct 2012, 11:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



Hello Leelewine !
Les tutoriels sont ouverts aux commentaires et aux suggestions seulement. En cas de problème ou de question, comme indiqué sur cette page, merci d'ouvrir un sujet dans la section Aide CSS & xHTML, en donnant le lien vers ce tutoriel.

Merci de ta compréhension. Smile


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Sam 20 Oct 2012, 06:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://art-of-cats.forums-actifs.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 55



    Vraiment très intéressant comme alternative quand on est pas admin, merci beaucoup Very Happy !

MessageSujet: Re: Chatbox latérale coulissante (sans template)   Sam 20 Oct 2012, 07:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fairy-tail.forumgratuit.be/
avatar
{ Membre }
{ Membre }

Féminin Messages : 16



Pratique et utile merci pour le code :3

Par contre dans mon css il dise :

"Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code."


Est-ce normal ou bien c'est mon forum?
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mer 24 Oct 2012, 03:19
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



Hello Cassou !
Ce tutoriel a été remis à jour très récemment et je viens de vérifier à nouveau : pas de problème avec le CSS.
L'erreur que tu indiques provient donc très probablement de ton forum.
Rendez-vous donc dans la section suivante :
http://www.css-actif.com/f17-aide-css-xhtml pour résoudre ton problème, en indiquant un lien vers ce tutoriel.
Merci d'avance Wink


MessageSujet: Re: Chatbox latérale coulissante (sans template)   Ven 26 Oct 2012, 07:16
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.edspeleersaddicts.com
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



Merci pour le tuto, il est vraiment super^^


Edward : "You are the person I dremt to have as a fan!"
Me : "And you are the person I dremt to have as a friend!"
Edward : "God bless you!"
Me : "And you, because you are the most beautiful heart I never met!"
Edward : "And I return words to you because you are the same as I am, right?"
Me : "I think so... We were naturally made to meet though!"
Edward : "Destiny..."
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Dim 16 Déc 2012, 14:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://la-classe-de-lassomp.forumactif.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 23



Merci pour ces codes Wink
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mar 19 Fév 2013, 07:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://darknessmansion23.forum-canada.com
{ Membre }
{ Membre }

Féminin Messages : 26



Merci pour le code ^^
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Sam 23 Fév 2013, 18:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://google.fr
avatar
{ Membre }
{ Membre }

Masculin Messages : 28



Gros merci !
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Lun 08 Avr 2013, 10:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 42



Merci, le tutoriel est simple et facile à appliquer.
J'adore!


pwët
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mer 22 Mai 2013, 05:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://testfatomsc.forumactif.org/
{ Membre }
{ Membre }

Féminin Messages : 26



Marche parfaitement que demander de plus !
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Jeu 06 Juin 2013, 11:16
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Féminin Messages : 4



Merci beaucoup pour le tuto !
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Sam 23 Nov 2013, 10:22
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://inazumaeleven.forumactif.pro/
{ Membre }
{ Membre }

Masculin Messages : 11



Merci beaucoup mais la chatbox est toujours en bas quand elle est quand meme fermer
MessageSujet: Re: Chatbox latérale coulissante (sans template)   Mer 25 Déc 2013, 16:25
Revenir en haut Aller en bas
Contenu sponsorisé




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

Chatbox latérale coulissante (sans template)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

-
» Chatbox latérale coulissante (sans template)
» Chatbox latérale coulissante (avec 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