Shoutbox dans un volet latéral rétractable

Last edited by **Aswell** on 27 Aug 2010, 12:03, edited 1 time in total.

Bonsoir,

En recherchant un mod shoutbox pour mon forum j'ai découvert Breizh Shoutbox que j'ai adopté. L'installation s'est déroulée sans problème et je vous remercie pour votre travail : grâce à lui j'ai maintenant une shoutbox compacte et pleinement fonctionnelle sur mon forum

Pour rendre la navigation sur mon forum plus ergonomique, je souhaiterais savoir s'il était possible d'intégrer Breizh Shoutbox dans un volet latéral rétractable qui apparaîtrait sur toutes les pages du forum. Ca permettrait de consulter les sujets postés tout en ayant la shoutbox visible dans le coin en bas à gauche de la page. Je sais que c'est possible sur les forums clés-en-main comme Forumactif en suivant la procédure suivante (j'ai adapté avec la page de la pop-up) :

On insère ce script dans une page HTML...

Code: Select all

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="http://megamanplanet.free.fr/shout_popup.php" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

...que l'on doit appeler, pour qu'elle apparaisse sur toutes les pages, grâce à cette ligne placée dans la description du forum :

Code: Select all

<script type=text/javascript src="http://megamanplanet.free.fr/sideshoutbox.html"></script>

Comme sur phpBB la description du forum ne tient pas compte des balises HTML j'ai pensé mettre ce code dans le template overall_header.html mais ça n'a rien fait. Auriez-vous une solution à me proposer pour que Breizh Shoutbox puisse être intégrée dans ce volet latéral ?

Pour avoir un exemple concret du script, comme je ne sais pas si je peux poster des liens de sites extérieurs ici, vous pouvez aller rechercher "chatbox latérale" sur Google, il y est sur le forum qui apparaît en premier dans la liste.

Merci d'avance pour vos réponses.

Bonjour Aswell,

Il est vrai que ce système pourrais être intéressant mais il manque certaines choses dans le code ainsi que dans certaines pages pour y parvenir.

Par contre, pour une aide dans ce sens, ne pas oublier de relire les règles présentes ci-dessus et appliquer...

by **Aswell** » 27 Aug 2010, 01:55 » Firefox 3.6.8 Windows Seven 1920 x 1200

Bonsoir Sylver35,

Désolé, j'ai effectivement oublié de mentionner l'URL du forum : http://megamanplanet.free.fr
J'ai lu les règles avant de commencer à rédiger et ça m'est sorti de la tête ensuite. J'espère que c'était mon seul oubli ^^

Bien, donc il y a des choses à modifier...
Par contre, je suis allé voir dans le code source de la page du forum que tu a indiqué, c'est Hiroshima!!
Je n'ai jamais vu pareil brouillon et ramassis de code! pas facile de se retrouver dans ce fouillis pour ressortir ce qu'il faut!

Dans un premier temps, n'essayer que dans une seule page pour voir si cela est faisable, sur l'index puisque le code php est présent (hé oui, pour faire venir la shoutbox, le code à insérer dans la page php est indispensable)

Puis, pour faire appel au jQuery, il faudrait bien sûr charger une bibliothèque jQuery avant, celle utilisée est là:
http://illiweb.com/fa/js_20/notutf8-fr.js
Tu l'enregistre dans un fichier nommé "notutf8-fr.js" et tu l'appelle ainsi (exemple):

Code: Select all

<script src="http://http://megamanplanet.free.fr/notutf8-fr.js" type="text/javascript"></script>

Ensuite, quand tu appelle la page: "shout_popup.php", il manque quelque chose, c'est "?t=2"
Donc mettre: "shout_popup.php?t=2" ainsi la shoutbox en popup pourra être appelée

Mais attention, bien voir si le bandeau de rétractation arrive déja, sans quoi, il est impossible de mettre la shoutbox dedans...
Et je pense que le contenu de la page html que tu appelle ne contient pas tout ce qu'il faut!! base toi sur le code donné sur le site que tu a donné précédement.
Essaye cela et redit moi!

Edit: par contre dans la page, j'ai trouvé ce bout de script:

Code: Select all

<script type=text/javascript src=/-h1.htm></script>

et en voici le contenu: http://ewilanrpg.forumactif.com/suggest ... f2/-h1.htm

Et aussi ce script dans <head> qui semble activer le tout:

Code: Select all

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){});
//]]>
</script>

Comme tu voit, la tâche est beaucoup plus ardue que tu ne le pense!

by **Aswell** » 27 Aug 2010, 11:48 » Firefox 3.6.8 Windows Seven 1920 x 1200

Merci pour ton aide !
J'ai essayé ce que tu m'as dit de faire et ça marche !! Détail de la procédure :

J'ai envoyé la bibliothèque jQuery sur le FTP, puis j'ai rajouté les lignes :

Code: Select all

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){});
//]]>
</script>
<script src="http://megamanplanet.free.fr/notutf8-fr.js" type="text/javascript"></script>

dans le template index_body.html (pour essayer uniquement sur l'index). Ensuite j'ai ajouté en-dessous :

Code: Select all

<script type=text/javascript src="http://megamanplanet.free.fr/sideshoutbox.html></script>

Dans le fichier sideshoutbox.html qui contient le script, j'ai vérifié qu'il était bien identique à celui de la page -h1.htm du forum d'exemple, puis j'ai rajouté "?t=2" à la fin de l'URL de la pop-up. J'obtiens ceci :

Code: Select all

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="http://megamanplanet.free.fr/shout_popup.php?t=2" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

J'ai ensuite rajouté les mêmes lignes supplémentaires de index_body.html dans overall_header.html et ça fonctionne sur toutes les pages après rafraîchissement du template et actualisation Ctrl+F5 sous Firefox.

Maintenant il reste encore un petit problème : quand on ouvre la shoutbox latérale, l'image "Ouvrir" ne disparaît pas une fois la shoutbox déroulée. Du coup j'ai les deux boutons "Ouvrir" et "Fermer" simultanément. Connaitrais-tu une solution ?
Au pire ce n'est pas très grave mais bon si jamais y a un truc je suis preneur.
En tout cas merci beaucoup pour ton aide claire et efficace

!
(J'ai pas mis le sujet en "résolu" encore au cas où tu as une solution pour le problème avec les boutons "Ouvrir" et "Fermer".)

EDIT : en fait c'est parce que j'avais oublié de retirer les lignes de script de index_body.html. Je les ai enlevées et il n'y a plus de problème. Je mets le sujet en "résolu", merci encore pour tout !

Je revient sur ce sujet car j'ai réussi à faire quelque chose de bien plus simple...

Pour commencer, tout ceci n'est absolument pas valide xhtml et surcharge le forum pour rien!!!

Pour bien faire les choses, il faut supprimer toutes les modifications précédentes et supprimer tous les fichiers ajoutés.

Afin de montrer le rendu, je l'ai mis en application ici...

Ouvrir le fichier overall_header.html
Rechercher:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

et ajouter après dans une nouvelle ligne:

Code: Select all

<!-- IF not S_IS_BOT -->
<div style="position: fixed;bottom: 50px;left: 0px;background-color: transparent;z-index:10000;">
        <ul class="linklist rightside" style="margin-top: 0px;">
                <a href="javascript:;" onClick="document.getElementById('box').style.display='block';document.getElementById('dtbox2').style.display='block';document.getElementById('dtbox1').style.display='none';" title="{L_SHOUT_POP}">
                <li class="rightside" style="display: block;margin-left: 0px;" id="dtbox1">
                        <img src="{T_IMAGES_PATH}shoutbox/ouvrir.png" alt="{L_SHOUT_POP}" title="{L_SHOUT_POP}" />
                </li>
                </a>
                <li class="rightside" style="display: none;margin-left: 0px;padding-top: 400px;" id="dtbox2">
                        <a href="javascript:;" onClick="document.getElementById('box').style.display='none';document.getElementById('dtbox2').style.display='none';document.getElementById('dtbox1').style.display='block';"><img src="{T_IMAGES_PATH}shoutbox/fermer.png" alt="{L_CLOSE_WINDOW}" title="{L_CLOSE_WINDOW}" /></a>
                </li>
                <li class="rightside" style="margin-left: 0;valign: bottom;">
                        <iframe src="./shout_popup.php?t=2" id="box" style="width: 800px;height: 500px;display: none;background: transparent;background-attachment: none;background-clip: none;border: 0 none;" frameborder="0px" scrolling="no"/></iframe>
                </li>
        </ul>
</div>
<!-- ENDIF -->

Attention, la balise "code" fait perdre une instruction!!!
Dans ce code, répérez la source de l'iframe:
<iframe src="./shout_popup.php?t=2"
le lien commence par "./' or il faut remplacer par "{"ROOT_PATH"}" en enlevant les guillemets
Ceci est un bug de phpbb3!!

Ensuite, enregistrer les deux images suivantes dans le dossier images/shoutbox/

Et voilà, c'est tout!!
Pas de code ou de fichier supplémentaire, ceci suffit!!!

Ne pas oublier de rafraichir les templates du style...

by **Aswell** » 27 Aug 2010, 23:44 » Firefox 3.6.8 Windows Seven 1920 x 1200

Ta nouvelle solution est bien plus simple ! J'ai effectué les changements et ça marche très bien, ça paraît même un peu plus rapide. Merci pour les images, je te les emprunte pendant quelques temps même si je risque de les remplacer quand le design sera installé ^^
Je trouve que le volet latéral rend bien aussi ici

Merci beaucoup, encore une fois !