Chatbox latérale coulissante

Rappel du premier message :

Bonjour,

Comme précisé dans ce topic : Chatbox Latérale, je vous offre une version avec animation fluide en jquery. Elle n'est pas beaucoup plus complexe d'utilisation.

Je vous invite suivre ce lien pour en savoir plus et tester la slide box :
http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/

Si vous avez des remarques ou des problèmes n'hésitez pas à me le faire savoir.
Merci.

PS : pour l'implémentation sous Forum-actif, voici un sujet qui en parle et qui pourrait vous intéresser
http://forum.forumactif.com/probleme-avec-un-script-un-code-f74/slidebox-t282413.htm

On en parle aussi à la suite de ce topic.

Problèmes résolus :
- Compatibilité navigateurs
- La chatbox semble disparaître
- Une ligne vide et/ou une poignet de redimensionnement restent sur mon forum
- Erreur 404 (fichier introuvable) sur le script javascript

Bonjour, Je mets le code dans overall_header, juste avant mais la slide n'apparait pas... Je précise que je n'ai pas encore fait de personnification.
Merci d'avance :)

Bonjour,

Il me faudrait plus d'informations pour pouvoir vous aider :
- morceau de code renseigné
- étapes suivies
- etc.

Merci

Dans mon templates overall_header j'ai copier coller ce code:

Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox();
});
</script>

Juste avant j'ai validé le templates et ensuite rien n'apparait...

Hello,

Il faut également faire un appel au fichier javascript du plugin qui permet de créer la fonction juizSlideBox().
Cet appel est à placer juste avant ce tronçon de code que tu as déjà inscrit.

http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/#part2

Tu me dis si un truc t'échappes

Bonne soirée

La partie avec ce code:

Code:

<script type="text/javascript" src="/scripts/jquery-juizSB.min.js"></script>

m'échappe. Puisque c'est pas un site mais un fofo je fais quoi?

Tu peux utiliser ce code à la place :

Code:

<script type="text/javascript" src="http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/scripts/jquery-juizSB.min.js"></script>

Cependant cette technique consiste à utiliser le fichier directement hébergé sur mon serveur.
Donc à utiliser ma bande passante.

Deux solutions, soit tu héberges toi-même ce fichier :
http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/scripts/jquery-juizSB.min.js
(ctrl+s une fois affiché sur ton navigateur, puis tu l'héberges sur http://www.toofiles.com/fr/ et tu remplaces l'URL)

soit tu utilises le morceau de code tel qu'il est et tu prends le risque que le jour en j'en ai marre qu'on pompe ma bande passante, je déplace le fichier et tu n'auras plus rien d'activé sur ton forum... (pour cette fonctionnalité en tout cas).

J'espère que mon explication aura suffit.
Bonne soirée

Merci ^^

Je t'en prie, bonne continuation

Bon alors... J'ai un léger souci avec le code.

Voilà comment il se présente dans mon template overall_header :

Code:


<script type="text/javascript" src="http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/scripts/jquery-juizSB.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox();
});
</script>
</head>


Je valide, je publie, et là... Rien. Mais vraiment rien du tout, c'est assez étonnant.

Donc j'aimerais qu'on me guide un petit peu, que je réussisse enfin à l'installer.
Ensuite, j'ai remarqué autre chose, c'est que ces liens pour le site de Riku, c'est peut être de moi que ça vient, mais quand je clique ou que je copie le lien dans ma barre, j'ai le droit, soit à une error 404, soit à un message d'erreur de Chrome pour me dire que le lien s'est brisé en cours de route. Voilà.

Et en guise de renseignements connexes, je suis sous Forumactif.

Merci d'avance.

Hello,

Oui exactement, le problème vient de l'erreur 404.
En fait le site a subit une refonte il y a peu de temps, et le script a changé de place.

http://jq.creativejuiz.fr/plugins-jquery/slidebox.php

Le script JS se trouve ici :
http://jq.creativejuiz.fr/plugins-jquery/slidebox/demo/js/juizSlideBox.min.js

Je t'invite cependant à le réhéberger sur un hébergeur gratuit de fichier pour éviter d'être dépendant des va-et-vient de mes fichiers.
N'oublie pas de bien lire la page d'insertion du script, les variables ont changée

Merci et bon courage !

Super, merci. Forumactif a enfin eu le bon sens de créer un module de gestion des codes Javascript, ça fait plaisir.

Ensuite, je viens de tester, voilà mon code :

Code:


<script type="text/javascript" src="http://derniere-prophetie.forumgratuit.org/10917.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox();
});
</script>
</head>

J'ai ça, et le code Javascript hébergé. Mais ça ne fonctionne pas, donc... Je me pose des questions. Le bout de code est toujours dans la partie overall_header, et j'ai pu héberger le fichier .js sans souci.

> Je n'ai cependant aucun code CSS relatif à la slide box, déjà parce que je sais pas où l'insérer, comment mettre les images de fermeture et d'ouverture... etc.

Edit : Bon, après avoir regardé un petit moment, je me suis rendu compte que ça venait très certainement de l'absence totale de CSS relatif à la slidebox. Ceci étant dit, je ne sais toujours pas où l'insérer, ni quoi mettre, ne serait-ce que pour que ça apparaisse.

Bonsoir,


Il te faut ajouter les CSS que tu as certainement déjà téléchargés :

Code:

#juiz_box {
   position : fixed;
   min-height : 90px;
   z-index : 1000;
}
.juiz_box_left { top : 0; left : 0; }
.juiz_box_right { top : 0; right : 0; }
.juiz_box_content {
   display : none;
   position : relative;
   width : 500px;
   height : 350px;
   padding : 20px;
   background : #f2f2f2;
   border : 2px solid #fff;
   -moz-border-radius : 6px;
   -webkit-border-radius : 6px;
   border-radius : 6px;
   -moz-box-shadow : 1px 1px 5px #999;
   -webkit-box-shadow : 1px 1px 5px #999;
   box-shadow : 1px 1px 5px #999;
}
.juiz_action {
   position : absolute;
   bottom : 0;
   width : 40px;
   height : 85px;
   background : transparent url(../img/bouton.png) no-repeat bottom right;
   text-indent: -9999px;
   outline : none;
   text-decoration : none;
}
.juiz_box_left .juiz_action { right : -40px; }
.juiz_box_right .juiz_action { left : -40px; }
.juiz_mark {
   position : absolute;
   bottom : 0px;
   left : 10px;
   font-size : 10px;
}
.juiz_open:hover {
   background-position: top right;
}
.juiz_close {
   background-position: bottom left;
}
.juiz_close:hover {
   background-position: top left;
}

A la suite de ta feuille de style sur ton forum que tu trouveras dans Affichage du panneau d'admin de mémoire. Je n'ai plus d'accès à un vrai backoffice de forum alors je ne sais plus précisément. PA > Affichage > Couleurs > Feuille de style CSS je crois.

L'image il te faut l'héberger sur un serveur (hébergeur d'image de ton choix).
Tu prends le lien direct de l'image, et tu le mets à la ligne :

Code:

background : transparent url(../img/bouton.png) no-repeat bottom right;

en remplaçant ../img/bouton.png par le lien direct.

Normalement ça devrait fonctionner :)
Sinon je veux bien le lien de ton forum.

Bonne soirée,
Riku.

EDIT : je suis bête, je pensais ne pas avoir accès à la feuille de style sur N-U, mais si, je confirme donc l'emplacement. Ce sont les scripts que je ne peux pas toucher, ça c'est ok :p

Bon bon, doit vraiment y avoir un souci.

Alors... Déjà, voici l'adresse du script disponible sur ton site :

http://derniere-prophetie.forumgratuit.org/10549.js


Ensuite, voilà le code présent dans mon template :

Code:



<script type="text/javascript" src="http://derniere-prophetie.forumgratuit.org/10254.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox(); 
});
</script>


Et enfin, voilà le code CSS :

Code:


#juiz_box {
  position : fixed;
  min-height : 90px;
  z-index: 999;
}
.juiz_box_left { top : 0; left : 0; }
.juiz_box_right { top : 0; right : 0; }
.juiz_box_content {
  display : none;
  position : relative;
  width : 500px;
  height : 350px;
  padding : 20px;
  background : #f2f2f2;
  border : 2px solid #fff;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
  -moz-box-shadow : 1px 1px 5px #999;
  -webkit-box-shadow : 1px 1px 5px #999;
  box-shadow : 1px 1px 5px #999;
}
.juiz_action {
  position : absolute;
  bottom : 0;
  width : 40px;
  height : 85px;
  background : transparent url('http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png') no-repeat bottom right;
  text-indent: -9999px;
  outline : none;
  text-decoration : none;
}
.juiz_box_left .juiz_action { right : -40px; }
.juiz_box_right .juiz_action { left : -40px; }
.juiz_mark {
  position : absolute;
  bottom : 0px;
  left : 10px;
  font-size : 10px;
}
.juiz_open:hover {
  background-position: top right;
}
.juiz_close {
  background-position: bottom left;
}
.juiz_close:hover {
  background-position: top left;
}

Si vous regardez l'image, effectivement j'ai utilisé l'une de celles présentes dans ce tuto, et je m'engage tout de suite à en changer une fois que ce foutu script fonctionnera. En attendant je m'en sers de base de test. Mes excuses si ça dérange, faites le savoir.


Et pour en revenir à ce que nous disions... on peut pas vraiment dire que je ne suis pas tes instructions. Et pourtant, y'a un petit truc, un machin, qui fait que ça ne fonctionne pas, et c'est frustrant.

Et le lien du forum, pour toi : http://derniere-prophetie.forumgratuit.org/

Voilà, j'ai essayé de réfléchir à ce que j'aurais pu ne pas faire, ou mal faire, et là je sèche, sérieusement.

Bon, et au passage j'ajoute une question (et désolé du double post) :

Je cherchais un moyen de mettre la Slidebox sur toutes les pages. Parce qu'apparemment elle a décidé de fonctionner, comme ça, paf. Ca fait presque peur. Bref.

Voilà un code permettant de faire apparaître la chatbox latérale (et non la slidebox, hein) :

Code:


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="/chatbox/chatbox.forum?page=front&" 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>'); } )


Il faut intégrer ce morceau à une page html de forumactif, en choper l'adresse puis rajouter quelque chose comme :

Code:


<script type=text/javacript src=adresse_de_la_page></script>

Dans la description du forum. J'ai personnellement essayé de faire le même genre de choses, mais avec le code de Riku qui se met normalement dans le template overall_header/footer. Et comme je l'imaginais, ça n'a pas fonctionné.

Ah, et maintenant que la slidebox marche, je constate aussi qu'il reste un petit cadre tout moche au dessus de mon forum, vestige de l'ancienne chatbox.

Hello,

Apparemment ta chatbox coulissante fonctionne désormais.
Tu souhaites maintenant la faire passer sur toutes les pages ?
Dans ce cas je t'invite à tester en :
1 - désactivant la chatbox dans l'admin
2 - rajoutant le code suivant dans overall_header_new juste après

Code:

<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe>

3 - modifier dans le code JS :

Code:

<script type="text/javascript" src="http://derniere-prophetie.forumgratuit.org/10254.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox();
});
</script>

par

Code:

<script type="text/javascript" src="http://derniere-prophetie.forumgratuit.org/10254.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatboxpop").juizSlideBox();
});
</script>

Tu auras peut-être des dimensions à modifier (sur iframe ou en CSS), à toi de voir.

L'image du bouton est libre de droit et d'utilisation, modification, etc. Tu peux le garder, l'arranger, en faire ce que tu veux quoi :)

Bon courage

Donc j'ai fait ce que tu m'as dit. Effectivement, la base du script est présente dans toutes les pages. J'ai le bouton, il est activé, mais quand il s'ouvre... aha, le néant. Ce qui en soi n'est pas mon but.

Donc je me demande ce que j'ai mal fait. N'ayant pas de renseignement sur le placement de l'iframe, je l'ai mise après le code JS, mais ça n'a pas marché. Et j'ai quand même pensé à remplacer le code que tu m'as passé. Donc il doit y avoir un souci autre part, je pense.

Edit : Je précise tout de même, j'ai essayé avec la chatbox désactivée, et activée, en ayant choisi de ne pas l'afficher. Le résultat reste le même, la slidebox s'ouvre sur une forme assez intéressante de néant :p

merci

Hello,

Il ne restait pas grand chose :

En plus dans le CSS

Code:

.juiz_box_content {
    height: 400px;
}

Ton bloc conteneur n'ayant pas de hauteur ça peut poser problème.

Dans le JS (juste après l'appel de la fonction juizSlideBox) :

Code:

$(".juiz_slide_content iframe").css("display","block");

ça doit donc ressembler à ça :

Code:

$(document).ready(function() {
  $("#chatboxpop").juizSlideBox();
  $(".juiz_box_content iframe").css("display","block");
});

Je ne sais pas pourquoi, l'iframe était en display:none. Donc pas visible.

Voilà, ça devrait être bon maintenant.
C'est marrant comme c'est plus complexe quand on doit s'adapter à un système (F-A) existant :p

Bonne soirée.

Le lien il est mort

Effectivement, ça fonctionne nickel.

En revanche, la connexion ne fonctionne pas. J'ai beau cliquer comme le dernier des bourrins, ça marche pas. Après j'ai vu ce problème sur un autre forum, donc ça vient peut être de forumactif en général... Si tu as un moyen de faire marcher la connexion à tous les coups, je t'en serai reconnaissant.

Et enfin, je te remercie vraiment pour le temps que tu as pris et les solutions que tu m'as donné. Merci beaucoup ^^

Problème résolu : En fait le lien dans l'iframe n'était pas le bon. L'iframe correcte était celle-ci :

Code:


<iframe src="http://derniere-prophetie.forumgratuit.org/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe>


Tout simplement parce que tu as du adapter ton iframe au code du tuto que j'avais posté précédemment. Or, la personne ayant fait ce tuto s'est elle même plantée. Donc tu avais bon, et elle non. Donc je te remercie une nouvelle fois =)