Slidebox

[Invité]

Bonsoir, tous le monde

J'ai un gros problème avec un script. J'ai vu sur un site Never-Utopia.com, que l'on savais faire Une chatbox évoluer, une version avec animation fluide en jquery, une "Slidebox". Mais ils nous donne pas d'explication pour la mettre sur forumactif. Ils nous donnent juste ce lien: ICI. Sur Never-Utopia, ils disent que la slidebox est entièrement compatible avec le système Forum-actif. Mais je suis vraiment nul en script etc alors je voudrai savoir comment mettre la Slidebox sur forumactif. Étape par étape. En claire comment mettre la Slidebox sur forumactif, Étape par étape ?

Merci d'avance

[Riku Asakura]

Hello,

Je suis le concepteur de ce script.
Effectivement le système est compatible avec forum-actif, mais il nécessite un petit tripotage de code.

Tu n'as déjà pas besoin de rappeler le lien de jQuery (cf. étape 1 de cette page http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/ ), puisque je crois que forum actif utilise déjà jQuery par défaut. Reste à voir si la bibliothèque est de version suffisante.

Tu dois compléter le template de ton forum nommé overall_header_new (s'il n'a pas changé de nom depuis) et coller 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() {
   $("#aside").juizSlideBox();   
});
</script>

juste avant ce code :

Code:

</head>

#aside étant l'élément que tu souhaites mettre dans la slidebox

Afin d'éviter les problèmes si jamais le fichier JS devait bouger je vous conseille de le réhéberger (si vous en avez la possibilite).

Je conseille d'habitude de le mettre en pied de page HTML, mais pour les FA c'est un peu différent. Mais si vous souhaitez le faire il s'agit de modifier le template overall_footer si ma mémoire est bonne, et placez le code avant la balise de fin de body (< / body >)

Ensuite si tu veux personnaliser l'aspect de ta box il va falloir suivre les étapes de Personnalisation.

J'espère que c'est assez clair ainsi.
Si jamais tu rencontres des problèmes n'hésites pas à les préciser.

Au plaisir, et bon courage

[Invité]

Bonjour, merci de m'aider. Comme je l'ai dit je suis vraiment nul en script etc. Donc je ne comprend vraiment rien désolé vous pouvez m'expliquer encore plus en détaille ?

[Riku Asakura]

Hello,

Pas de souci, navré d'avoir été si peu clair.

Sais-tu déjà où se trouve les templates de forum-actif.
Là ce n'est pas du code, juste une connaissance du panneau d'administration.
Normalement dans Affichage > templates | Général > overall_header_new
Tu fais "modifier" ou tu cliques simplement sur le nom du template.
A un peu plus du milieu de la hauteur de ce code tu devrais trouver une balise : < / head >
Juste avant tu codes le code que je t'ai donné dans le message précédent.

à la place de #aside tu mets #chatbox_top qui semble correspondre à l'identifiant de ta chatbox si tu souhaites la mettre dans la slidebox.

Essaye déjà d'en arriver là, nous verrons la suite après.

Bon courage

[Invité]

Bonsoir, merci beaucoup d'avoir été aussi claire. Je savais ou se trouvais les template et

navré d'avoir été si peu clair.

Non, navré à moi de ne pas avoir compris. Voilà j'ai tous fais, que dois-je faire ensuite ?

[Riku Asakura]

As-tu activé la chatbox sur ton forum ?
Il te faut l'activer et l'afficher en haut de ton forum.
Le plugin que tu as installé est censé récupérer cette chatbox et la placer dans la slidebox (ça en fait des box :p).

Tu me diras si ça fonctionne ainsi, sinon nous procèderons autrement.

Bonne soirée.

[Invité]

Bonsoir, merci ça fonctionne ^^ . Mais, j'aimerais savoir comment la personnaliser parce que:

Spoiler:

Ce n'es pas très esthétique xD ^^ merci

[Riku Asakura]

Pour personnaliser le bouton par exemple, il te faudra une image qui ressemble à celle-ci :
http://host.image.files.free.fr/host/4c012c01de9a8bouton.png
Je t'invite à en prendre le gabarit pour faire ton image aux couleurs/formes de ton site.
Il te suffira de placer le lien de ton image ainsi :
A la place de

Code:

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

il te faut:

Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
        'buttonBgInit'    : 'transparent url(http://host.image.files.free.fr/host/4c012c01de9a8bouton.png) no-repeat bottom right',
   'buttonBgOpen'    : 'transparent url(http://host.image.files.free.fr/host/4c012c01de9a8bouton.png) no-repeat bottom right',
   'buttonOpenHover' : 'transparent url(http://host.image.files.free.fr/host/4c012c01de9a8bouton.png) no-repeat top right',
   'buttonBgClose'    : 'transparent url(http://host.image.files.free.fr/host/4c012c01de9a8bouton.png) no-repeat bottom left',
   'buttoncloseHover' : 'transparent url(http://host.image.files.free.fr/host/4c012c01de9a8bouton.png) no-repeat top left'
  }); 
});
</script>

Il te faudra remplacer 5 fois le lien de l'image par la tienne. Respecte bien l'ordre des différents états de bouton lorsque tu conçois l'image :
- haut gauche : lorsque la slide est ouverte et le bouton survolé
- haut droite : lorsque la slide est fermée et le bouton survolé
- bas gauche : lorsque la slide est ouverte
- haut gauche : lorsque la slide est fermée

Je dois avouer que le code est un peu redondant, je vais faire en sorte de le simplifier dans une prochaine version.

Pour les couleurs de fond et de bordure c'est pareil sur le principe, tu as les info des différentes variables sur mon site :
http://www.creativejuiz.fr/juiz/plugins/juiz-slide-box/
BoxBorder et BoxBg étant les deux variables qui vont t'intéresser à mon avis. (à utiliser comme les variables précédentes, il faut séparer les occurrences des variables par des virgules, sauf pour la dernière)

Cela peut sembler du chinois à première vue, mais il ne s'agit que d'une liste en fait...

Bonne soirée

[Invité]

Je vais essayer dès demain et je vous en dirais des nouvelles merci beaucoup! Et bonne nuit

[bavarde]

A SUPPRIMÉ SVP
Je regardais le topic, je me suis absenté et ma soeur a écrit n'importe quoi :S

merci

[Invité]

Voila j'ai essayer, mais en faite il a plus de Slidebox quand on rajoute une chose. Exemple:

Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
        buttonPosRight    : '-40px',
   buttonPosBottom : '0',
   buttonWidth    : '40px',
   buttonHeight    : '85px',
  });
});
</script>

et il n'y a plus de ouvrir la Slidebox. Je dois bien modifier les templates ?

[Riku Asakura]

Hello,

Les informations que tu rajoutes doivent se trouver entre guillemets :

Code:

'buttonPosRight' : '-40px'

Simple >> 'mot'
Double >> "mot"
Peu importe, les deux fonctionnent, mais il te faut des guillemets

Une fois que tu as tous les éléments à modifier qui sont listés dans la fonction, il te faudra supprimer la virgule en fin de dernière ligne.

Bonne journée

[Invité]

Ca revien au même, si je met:

Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
        'buttonPosRight'    : '-40px',
  'buttonPosBottom' : '0',
  'buttonWidth'    : '40px',
  'buttonHeight'    : '85px'
  });
});
</script>

ou

Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#chatbox_top").juizSlideBox({
        'buttonPosRight'    : '-40px',
  'buttonPosBottom' : "0",
  'buttonWidth'    : "40px",
  'buttonHeight'    : "85px"
  });
});
</script>

à la place de

Code:

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

dans le template je vois plus le ouvrir. Je vois:

Spoiler:

[Riku Asakura]

Bonjour,

Pourrais-je avoir le lien de ton forum s'il te plait ?
Il y a des fois des bogues dus à la position du code.

Comme là je ne vois pas d'erreur de syntaxe...

Merci.

[bryan-de-vitry]

Bonjour je me permet de demander une question ici c'est possible aussi de mettre un bouton spécial quand y a un nouveau message ?

[Riku Asakura]

Hum... cela serait possible oui.
A chaque nouveau message une ligne vient s'ajouter dans la liste des messages (structurellement parlant). Si on compte avec javascript combien il y a de ligne avant un envoi de son propre message et après, on peut comparer la différence. Si elle est supérieure à 0 c'est qu'il y a un nouveau message.

En fonction de ça tu exécutes une fonction qui te fait apparaitre le bouton nouveau message (et logiquement par extension on pourrait aussi afficher le nombre).

Cela demande quelques heures de développement que je ne peux pas assurer en ce moment. Navré, mais l'idée est là si tu t'y connais un peu en javascript

[Invité]

Bonjour,

Pourrais-je avoir le lien de ton forum s'il te plait ?
Il y a des fois des bogues dus à la position du code.

Comme là je ne vois pas d'erreur de syntaxe...

Merci.

Bien sûr ^^ mais, c'est mon forum de test ^^ Forum Of Tests Merci

[Riku Asakura]

Merci bien, pourrais-tu autoriser l'inscription ou faire apparaitre la chatbox pour les invités.
Je ne peux rien sinon.

Je ne vois pas dans tes codes la partie correspondant aux scripts, je vois un "$(document).ready" mais vide.. je ne sais pas si c'est lié...

En tout cas je ne peux rien dire de plus sans avoir accès à la "vue membre".

Merci

[Invité]

Comme j'ai changer mon forum en une autre version pour essayez quelque chose, le template est partit, je vais le re mettre et accepter les inscriptions.

[Invité]

Voilà

[Invité]

UP

[Riku Asakura]

Hello,
Il te manque simplement cette première partie du code :

Code:

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

Il y a bien deux ensembles de script.

Tiens moi au courant

PS : je crois que c'est un up toutes les 48h non ?

[Invité]

Merciiiii beaucoup je ne pourrai jamais assez vous remerciez. Parfait, désolé d'êtres aussi bette. J'ai tellement modifié les templates que j'ai oubliés ce script. Sujet résolu mais, avant je voudrais vous demander, vous avez vu le script grâce au "code source" ?

Ps: Non, non, c'est bien tous les 24 heures ^^.

[rcsfoot67]

Tu dois compléter le template de ton forum nommé overall_header_new (s'il n'a pas changé de nom depuis) et coller ce code :

J'utilise la version phpbb3, je ne peux donc pas utiliser slidebox ?

[Invité]

Bonjour, je me permet de répondre a sa place parce que les phpbb3 on pas de templates donc non c'est pas possible. Soite je met le sujet en résolu encore merci Riku ^^