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 vois l'appel à la bibliothèque jquery récupérée sur Google, mais pas celui au plugin.
Dans l'ordre tu dois avoir :
- appel jQuery (Google ou celui par défaut de F-A)
- appel au plugin
- mise en place des variables (comme tu l'as déjà fait)

Il te manque l'étape entre deux.

Bonne journée

Bon, je pense avoir fait une petite erreur. Si j'ai bien compris, je dois rajouté le lien du plugin. Mais voici mon code actuel :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<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({
  'boxPosition'    : 'fixed',
  'boxPosTop'    : '0',
  'boxPosLeft'    : '0',
  'boxWidth'    : '500px',
  'boxHeight'    : '350px',
  'boxPadding'    : '20px',
  'boxBg'      : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) repeat',
  'boxBorder'    : '2px solid #b9cf4a',
  'boxBorderRadius'    : '0',
  'boxShadow'      : '0',

  'buttonPosRight'    : '-40px',
  'buttonPosBottom' : '0',
  'buttonWidth'    : '40px',
  'buttonHeight'    : '85px',
  'buttonBgInit'  : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) no-repeat bottom right',
  'buttonBgOpen'    : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) no-repeat bottom right',
  'buttonOpenHover' : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) no-repeat top right',
  'buttonBgClose'    : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) no-repeat bottom left',
  'buttoncloseHover' : 'transparent url(http://nsa25.casimages.com/img/2011/03/21/110321061124907766.png) no-repeat top left',

  'markOpacity'    : '0.0',
  'speed'      : '500'
  });
});
</script>

Et il ne fonctionne toujours pas...

Bonsoir,


Dans ce cas il va falloir que tu me dises à quel endroit tu as placé ce code.
Ensuite essaye simplement de retirer le premier appel, celui vers Google. Normalement F-A a le sien, donc pas besoin d'en charger une autre version.

Ton code me parait correct, donc je ne vois pas trop en dehors d'un mauvais placement du code.

Merci, bon courage

Je l'ai mis après la balise < /head> . J'ai essayé en enlevant :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

mais cela ne fonctionne pas plus...

Bonjour,

Pourrais-tu me donner le lien du forum ou du site sur lequel tu essayes d'intégrer ce script ?

Merci

Merci beaucoup pour ce code que je cherche depuis longtemps. Même si j'ai eu du mal à l'installé j'ai un peu près réussi. J'y travaille. ^^
Dylan, ton problème est très simple, il suffit que tu déplaces ton code avant la balise < /head> et pas après.

Voilà, en espérant de t'avoir aidé. ^^

Merci Saiketsu.

Pour le problème de Dylan, le souci (ou pas) de Javascript c'est que tu peux le mettre dans HEAD ou dans BODY, c'est censé fonctionner...

Bon par contre si tu le mets entre les deux, tu remets son bon fonctionnement au hasard :p

Bonne soirée

Je me demandais si on pouvait mettrela chatbox sur toute les pages du forum. J'me demandais aussi si on pouvait faire un petit icone d'alerte quand il y a un nouveau message. Se serait pas mal.. ^^'

Hello,


Pour placer la chatbox sur toutes les pages il faut que le script soit placé dans overall_header ou overall_footer (les templates).
Ensuite il faut aller dans les paramètres de la chatbox pour lui demander de s'afficher sur toute les pages. (si le procédé n'a pas changé depuis).


Concernant l'alerte c'est délicat, il faudrait créer un pont entre la page de la chatbox (qui est utilisée en iframe sur le forum), et, sauf si F-A utilise du XLM pour stocker les derniers envois, ce ne sera pas possible sur ces forums.

Je cherche vite fait, je te dis si je trouve

Edit : ça serait peut-être possible si F-A autorise l'AJAX avec jQuery... à voir

Merci =)

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