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

Yop,

Whaaaaa ! ça m'prend la tête è_é.
J'commence sérieusement à péter un cable ^^

Bref exposition du soucis : J'ai mis le code suivant :

Code:

<script type="text/javascript" src="http://dl.toofiles.com/vaaoje/documents/xo7gwn-at73lt-9xxv96.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
   'boxPosition'    : 'fixed',
   'boxPosTop'    : '750',
   'boxPosLeft'    : '0',
   'boxWidth'    : '700px',
   'boxHeight'    : '350px',
   'boxPadding'    : '0px',
   'boxBg'      : 'transparent url(http://host.image.files.free.fr/host/4c013a7b30d63transp.png) repeat',
   'boxBorder'    : '2px solid #000000',
   'boxBorderRadius'    : '0',
   'boxShadow'       : '0',
  });
});
</script>

Bien placé etc. Mais ça marche pas !
Quand je laisse la code de base donc juste

Code:

<script type="text/javascript" src="http://dl.toofiles.com/vaaoje/documents/xo7gwn-at73lt-9xxv96.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
  });
});
</script>

ça marche parfaitement, aucun soucis.
Malheureusement au niveau de l'esthétique c'est vraiment immonde, la box est coupé avant la fin etc etc..

Donc j'aimerais savoir quand j'rajoute un p'tit bordel pour la rendre plus belle la box disparait complètement du forum, pourquoi ? Et comment la faire ré-apparaitre ( jolie ). Pour le système d'enjolivement j'ai pris le système de personnalisation dispo' sur le site.

Thanks !

Hello,

Essayes avec ce code :

Code:

<script type="text/javascript" src="http://dl.toofiles.com/vaaoje/documents/xo7gwn-at73lt-9xxv96.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
  'boxPosition'    : 'fixed',
  'boxPosTop'    : '750px',
  'boxPosLeft'    : '0',
  'boxWidth'    : '700px',
  'boxHeight'    : '350px',
  'boxPadding'    : '0px',
  'boxBg'      : 'transparent url(http://host.image.files.free.fr/host/4c013a7b30d63transp.png) repeat',
  'boxBorder'    : '2px solid #000000',
  'boxBorderRadius'    : '0',
  'boxShadow'      : '0 0 0'
  });
});
</script>

J'explique les modifications :
- rajout de "px" sur la valeur boxPosTop, en effet les valeurs sont communes aux CSS. Ainsi lorsque tu mets 0, tu n'es pas obligé d'utilisé l'unité px. Lorsque tu mets un chiffre ou un nombre il te faut préciser l'unité.
- les trois "0" sur box Shadow car il faut lui préciser 0 pour le décalage en x, 0 pour le décalage en y, et 0 pour l'étendue de l'ombre.
- une virgule retirée : la dernière de la liste (pour être sûr que ça fonctionne sur tous les navigateurs)

En espérant que cela fonctionne
Tiens moi au courant, merci.

Hello, merci d'avoir répondu assez rapidement :)

Alors, toujours le même soucis, j'ai d'abord copier/coller le code qui tu m'as donné, pas de box. J'ai testé sans personnalisation & elle est apparue.

Oui en fait je viens de me rendre compte que ce sont tes valeurs qui ne sont pas bonnes :

Code:

<script type="text/javascript" src="http://dl.toofiles.com/vaaoje/documents/xo7gwn-at73lt-9xxv96.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
   boxPosTop    : '400px',
   boxWidth    : '750px',
   boxHeight    : '350px',
   boxPadding    : '0px',
   boxBorder    : '2px solid #000000',
   boxBorderRadius    : '0',
   boxShadow       : '0'
  });
});
</script>

Comment placer une box à 750px du haut de ta page si celle-ci fait 600px de haut ?... (un des problèmes possible.
Avec ce code ça devrait le faire.
Normalement j'ai retiré les valeurs que tu as reprécisé alors que ce sont celles par défaut, mais tu peux les remettre si tu veux les modifier par la suite, en fait le seul problème semblait venir de boxPosTop.

Au plaisir

Parfait ( enfin y reste deux trois soucis esthétique mais ça devrait pas poser de soucis ^^ )... J'ai presque envi de te dire " Je t'aime " ! Merciiiii beaucoup.

lol
Je t'en prie, amuses-toi bien

Pim pom ... x)
Alurs alurs, j'ai un dernier petit problème, après c'est promis j'en parle plus !

Spoiler:

Comme tu peux le voir la slidebox n'a plus de problème :) ( le noir c'est pour cacher le reste de mon forum ^^' )

Donc le problème est ce qui est dans l'encadré rouge. Ce qui à dedans est l'emplacement de base de la chatbox, mais vu qu'elle à été transféré dans la slidebox elle n'y est plus ... Donc ma question est : comment supprimé ce cadre tout moche ?

Hello,

Soit il te faut cibler plus large et faire rentrer tout le bloc dans la slidebox, soit il va te falloir jouer avec du CSS.
Dans les deux cas il me faudrait le lien vers ton site, ça serait plus facile

Merci

Je t'ai envoyé le lien par mp, encore merci de ton aide :)

Ok bien reçu, je réponds là, j'ai fermé la boite de messagerie, la flemme :p
Pourrais-tu afficher la box au public temporairement, sinon je ne peux pas la voir.

Merci

J'ai cherché .. Cherché, et rien trouvé è_é. Si tu pouvais me dire comment faire ? ^^' ( Sinon je te file directement mon compte )

PS : Désolé de la longueur, avec la reprise des cours j'avais pas vu le message ..

Up ~ J'attends toujours ton aide :p

PA > Modules > Portail&Widget | Chatbox...

Ah ben non j'ai rien dit.. j'étais persuadé qu'il y avait une option d'affichage par niveau d'utilisateur.

Je suis preneur de ton compte admin, je t'invite à changer le mot de passe avant, l'idée serait éventuellement de voir directement dans les templates aussi (du coup...).

Tu n'es pas obligé d'accepter, mais si tu acceptes il faudra passer par MP pour éviter de rendre publiques ces informations.

Tu me préviendras sur ce topic quand tu m'auras envoyé le MP (ouais j'ai désactivé le suivi MP mais activé le suivi sur ce topic ;p)

Merci

Plop, merci de la réponse :p

Donc c'est pour ça que je trouvais pas, ça existe pas xD.

Mp envoyé avec le nom de compte / mdp. Par contre j'ai oublié de mettre le lien, dit moi si tu a supprimé l'mp avec ^^'

Hello,

Merci pour ta confiance, c'est corrigé.

Dans overall_header_new j'ai rajouté ceci avant l'appel de la slideBox :

Code:

var chatbox = $("#chatbox_top").closest("table.forumline");
$(chatbox).next("table").hide();

ça veut dire que je sélectionne le parent de #chatbox_top le plus proche (closest) étant un table de classe "forumline" (c'est ce qui restait et faisait le ligne vide dans ton forum).
J'enregistre tout ça dans la variable chatbox.
Puis je planque le table juste après (next) ce que j'ai sélectionné (c'est ce qui contient la poignet de redimensionnement) et je la cache (hide).

Ensuite j'appelle la fonction slideBox sur l'ensemble de la table sélectionnée dans la variable "chatbox".

Cela peut sembler complexe mais c'est la base de la navigation dans le dom proposé par jQuery.

Si ça t'intéresse :
http://jquery.developpeur-web2.com/documentation/manipulation.php

Au plaisir

Merci beaucouuuuuuuuuuuuuuuuuuup <3 ( J'ai l'impression qu'en plus de ça, ça à reglé le petit bug de bordure )

Je penserais à m'intéresser au JQuery etc, mais ça me parait un peu complexe pour mon niveau actuel x)

Oui le problème de bordure venait d'une case qui restait vide dans un tableau.
En prenant le tableau complet dans la box ça règle le souci

Au plaisir

B'jour!

Est-il possible de personalisé le SlideBox avec du texte? Je m'explique: j'aimerais mettre les mots techniques dans un forum RPG avec leurs définitions dans une slidebox pour qu'elle soit a tout moment consultable. Mais je ne sais pas trop ce que je dois modifié :/

Alors, oui, c'est possible.
Pour réaliser une slidebox avec la chatbox, Riku entoure cette dernière d'une div qu'il nomme "aside".
Il te suffit donc d'installer le script, et d'entourer le texte que tu veux d'une div #aside.

Je ne m'y connais pas en FA, mais Riku conseille de mettre le texte dans overall_footer et de placer le code avant la balise de fin de body (< / body >).

Pyrrha a très bien répondu ^^
L'idée serait que tu places le contenu que tu veux mettre dans la slidebox directement en clair dans le template overall_footer, tu peux le mettre tout en bas du tableau composant ton forum, ce contenu aurait cette forme :

Code:

<div id="glossaire">
<!-- Le contenu de mon glossaire (une liste en DL/DD/DT au passage) -->
</div>

Le code JS à placer juste avant /body serait donc le même que pour la chatbox, sauf que tu aurais cette ligne :

Code:

$("#glossaire").juizSlideBox(); 

au lieu de celle-ci :

Code:

$("#aside").juizSlideBox(); 

J'espère que cette aide te suffira

++

Bonjour,

Juste pour dire merci pour ce tutoriel.

J'ai le même problème que vous avez expliquez. Je n'arrive pas à enlever la barre en bas.
Vous parlez de mettre :

Code:

var chatbox = $("#chatbox_top").closest("table.forumline");
$(chatbox).next("table").hide();

Mais je ne sais pas du tout ou le mettre dans mon code ^^'. Je suis un peu perdu.

Merci d'avance et au pire, ce n'est pas si grave...

Hello,

ce code est à mettre avant ou après le code fourni.

Code:

<script type="text/javascript">
   $(document).ready(function() {
      $("#aside").juizSlideBox();
   });
var chatbox = $("#chatbox_top").closest("table.forumline");
$(chatbox).next("table").hide();
</script>

Bonne soirée.

Re,

Alors, cela ne fonctionne pas totalement chez moi x). J'ai toujours la barre en plus.

Spoiler:

Mais ce n'est pas pour ça que je viens.

Je me demandais s'il était possible de mettre la chatbox sur toutes les pages ou non ^^'.

Merci :)

Merci

Bonjour, puis-je savoir pourquoi chez moi, sa ne fonctionne plus ?

Voici mon code :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.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>

Merci ^^