[AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
[AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Détails techniques
Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://www.gemurama.com
Description du problème
Bonjour à tousJ'ai suivi votre tutoriel : https://forum.forumactif.com/t391323-integrer-la-chatbox-a-la-toolbar
Et malgré ce que le tableau indique, il ne semble pas compatible avec AwesomeBB. Est-il possible d'adapter le CSS et script ?
Merci d'avance pour votre aide
Invité- Invité
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Bonjour @Zlork,
En effet, il y a une erreur dans la tableau des astuces. Elle n'est pas compatible avec la version AwesomeBB car elle ne présente pas la même ToolBar. J'ai donc décoché AwesomeBB du tableau et j'en ai profité pour mettre à jour certaines informations contenues dans ladite astuce.
Concernant votre demande, j'ai une solution (qui n'est pas des plus élégantes mais qui semble fonctionnelle dans l'atelier du Père Noël).
Dans un premier temps, vous allez installer le script JS de l'astuce ainsi que le code CSS.
Dans un second temps, vous allez suivre les instructions ci-dessous :
Ainsi, vous devez obtenir :
Après validation du template, vous devez obtenir ceci :
Il faut maintenant compléter le code CSS donné par l'astuce :
Il faut ajouter ce code pour gérer convenablement l'affichage des notifications :
N'oubliez pas de valider la modification. Ainsi, les notifications devraient s'afficher :
Passez de bonnes fêtes de fin d'année
Zlork a écrit:J'ai suivi votre tutoriel : https://forum.forumactif.com/t391323-integrer-la-chatbox-a-la-toolbar
Et malgré ce que le tableau indique, il ne semble pas compatible avec AwesomeBB. Est-il possible d'adapter le CSS et script ?
En effet, il y a une erreur dans la tableau des astuces. Elle n'est pas compatible avec la version AwesomeBB car elle ne présente pas la même ToolBar. J'ai donc décoché AwesomeBB du tableau et j'en ai profité pour mettre à jour certaines informations contenues dans ladite astuce.
Concernant votre demande, j'ai une solution (qui n'est pas des plus élégantes mais qui semble fonctionnelle dans l'atelier du Père Noël).
Dans un premier temps, vous allez installer le script JS de l'astuce ainsi que le code CSS.
Dans un second temps, vous allez suivre les instructions ci-dessous :
Panneau d'administration Affichage Templates Général, overall_header
- Rechercher la balise <!-- BEGIN switch_user_logged_out --> et placer, juste avant, l'élément HTML <div id="fa_right">
- Rechercher l'élément HTML <ul id="header-navigation"> et placer, juste avant, l'élément HTML </div>
Ainsi, vous devez obtenir :
Après validation du template, vous devez obtenir ceci :
Il faut maintenant compléter le code CSS donné par l'astuce :
Panneau d'administration Affichage Images et Couleurs - Couleurs & CSS, onglet Feuille de style CSS
Il faut ajouter ce code pour gérer convenablement l'affichage des notifications :
- Code:
#live_notif .content{
height:60px !important;
}
N'oubliez pas de valider la modification. Ainsi, les notifications devraient s'afficher :
Passez de bonnes fêtes de fin d'année
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Cela semble fonctionner. Merci beaucoup !
Par contre, esthétiquement, c'est moche (désolé de le dire)
Est-il possible de mettre à la place de "Chatbox", l'image :
Et mettre tout ça à côté de la cloche ?
Par contre, esthétiquement, c'est moche (désolé de le dire)
Est-il possible de mettre à la place de "Chatbox", l'image :
- Code:
<i class="material-icons">chat_bubble</i>
Et mettre tout ça à côté de la cloche ?
Invité- Invité
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Re @Zlork,
C'est possible !
Vous allez déplacer l'élément HTML </div> et le mettre juste après <!-- END switch_user_logged_in -->
Ainsi, vous devez obtenir :
Ensuite, il va falloir remplacer le script JS par celui-ci :
Si tout est fait correctement, vous devez obtenir :
Lutins
C'est possible !
Panneau d'administration Affichage Templates Général, overall_header
Vous allez déplacer l'élément HTML </div> et le mettre juste après <!-- END switch_user_logged_in -->
Ainsi, vous devez obtenir :
Ensuite, il va falloir remplacer le script JS par celui-ci :
Panneau d'administration Modules HTML & JAVASCRIPT - Gestion des codes Javascript
- Code:
(function() {
if (!window.FA) window.FA = {};
if (FA.Chat) {
if (window.console) console.warn('FA.Chat has already been initialized');
return;
}
FA.Chat = {
// chatbox settings
config: {
height: '60%',
width: '70%',
live_notif: true,
sound_notif: {
enabled: true,
file: 'https://illiweb.com/fa/fdf/zelda.mono.mp3'
},
notifRate: 10000
},
// language settings
lang: {
chatbox: '<i class="material-icons">chat_bubble</i>',
new_msg: 'Un nouveau message a été posté sur la <a href="javascript:FA.Chat.toggle();">chatbox</a>.'
},
// technical data below
node: {}, // node cache
users: 0, // users in chat
messages: 'initial', // total chat messages
actif: false, // tells us if the chatbox is opened
notifActif: false, // tells us if the notifications are active
// initial setup of the chatbox
init: function() {
var right = document.getElementById('fa_right'),
container = document.createElement('DIV'),
button = document.createElement('A'),
audio;
button.id = 'fa_chat_button';
button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
button.onclick = FA.Chat.toggle;
FA.Chat.node.button = button;
container.id = 'fa_chat_container';
container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
container.style.width = FA.Chat.config.width;
container.style.height = FA.Chat.config.height;
container.style.bottom = '-' + FA.Chat.config.height;
container.style.visibility = 'hidden';
if (right) {
right.insertBefore(button, right.parent); // add the chat button to the right side of the toolbar
document.body.appendChild(container);
// create the notification audio element
if (FA.Chat.config.sound_notif.enabled) {
audio = document.createElement('AUDIO');
audio.src = FA.Chat.config.sound_notif.file;
if (audio.canPlayType) {
FA.Chat.node.audio = audio;
document.body.appendChild(audio);
}
}
FA.Chat.node.container = document.getElementById('fa_chat_container');
FA.Chat.node.chatters = document.getElementById('fa_chatters');
FA.Chat.node.frame = document.getElementById('fa_chat');
FA.Chat.node.frame.onload = FA.Chat.getFrame;
}
delete FA.Chat.init;
},
// get the frame window, document, and elements
getFrame: function() {
if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
if (this.contentDocument || this.contentWindow) {
FA.Chat.window = this.contentWindow;
FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;
FA.Chat.node.message = FA.Chat.document.getElementById('message');
FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');
FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // listen for changes every 0.3 seconds
}
},
// listen for changes in the chatbox
listen: function() {
var users = FA.Chat.node.members.getElementsByTagName('LI').length,
messages = FA.Chat.window.chatbox.messages.length;
// update user count
if (users > FA.Chat.users || users < FA.Chat.users) {
FA.Chat.users = users;
FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
}
// initial / active updates
if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;
// notify new messages while connected and the chatbox is closed
if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
FA.Chat.messages = messages; // update message count
FA.Chat.notifActif = true;
if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); // play sound notification
// wait before notifying the user again
window.setTimeout(function() {
FA.Chat.notifActif = false;
}, FA.Chat.config.notifRate);
}
},
// create a custom notification
notify: function(msg) {
var notif = document.createElement('DIV'),
live = document.getElementById(Toolbar.LIVE_NOTIF);
notif.className = 'fa_notification';
notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
notif.style.display = 'none';
$(notif).mouseover(function() {
$(this).stop(true, true)
});
$(notif).mouseleave(function() {
$(this).delay(5000).fadeOut()
});
live.insertBefore(notif, live.firstChild);
$(notif.firstChild).dotdotdot();
$(notif).fadeIn(100, function() {
$(this).delay(10000).fadeOut()
});
},
// toggle the display state of the chatbox
toggle: function() {
var container = FA.Chat.node.container.style;
if (/hidden/i.test(container.visibility)) {
FA.Chat.node.button.className = 'fa_chat_active';
FA.Chat.actif = true;
container.visibility = 'visible';
container.bottom = '3px';
// auto focus the message field
window.setTimeout(function() {
FA.Chat.node.message.focus();
}, 350); // some browsers ( firefox ) need a delay
} else {
FA.Chat.node.button.className = '';
FA.Chat.actif = false;
container.visibility = 'hidden';
container.bottom = '-' + FA.Chat.config.height;
}
}
};
$(function() {
// initialize the chat when the document is ready and the user is logged in
if (_userdata.session_logged_in) $(FA.Chat.init);
});
})();
Si tout est fait correctement, vous devez obtenir :
Lutins
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Lutins a écrit:Re @Zlork,
C'est possible !
---
Lutins
Impeccable !
Juste une question, si on va sur mobile, le script marche très bien mais la chatbox n'est pas responsive, ne s'adapte pas à l'écran automatiquement.
C'est normal ?
Invité- Invité
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Petite relance par rapport à ma question
Invité- Invité
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Bonjour @Zlork,
Lutins
Il faut remplacer le code concernant #fa_chat_container par :Panneau d'administration Affichage Images et Couleurs - Couleurs & CSS, onglet Feuille de style CSS
- Code:
#fa_chat_container {
background:#FFF;
border:1px solid #556682;
border-radius:3px;
position:fixed;
right:3px;
z-index:999;
overflow:hidden;
max-width:100%!important;
min-height:250px;
transition:300ms;
}
Lutins
Re: [AwesomeBB] Intégrer la ChatBox dans la barre de navigation
Merci beaucoup, ça fonctionne !
Je passe le sujet en résolu
Je passe le sujet en résolu
Invité- Invité
Sujets similaires
» Intégrer la barre de navigation dans la toolbar
» barre de recherche réclacitrante dans la barre de navigation
» Intégrer l'image d'un logo ou icones svg dans le header - Awesomebb
» [AwesomeBB] En format mobile, la barre de navigation ne suit pas le défilement
» Chatbox sur barre de navigation.
» barre de recherche réclacitrante dans la barre de navigation
» Intégrer l'image d'un logo ou icones svg dans le header - Awesomebb
» [AwesomeBB] En format mobile, la barre de navigation ne suit pas le défilement
» Chatbox sur barre de navigation.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum