AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-30%
Le deal à ne pas rater :
PNY – SSD Interne – CS3030 – 500Go
58.99 € 83.81 €
Voir le deal

    Chatbox latérale coulissante

    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Jeu 25 Mar 2010 - 10:35

    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



    Dernière édition par Riku Asakura le Jeu 7 Juil 2011 - 15:25, édité 7 fois



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Lun 23 Aoû 2010 - 7:33

    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 !




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Mer 25 Aoû 2010 - 10:23

    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 Wink
    Tiens moi au courant, merci.



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Mer 25 Aoû 2010 - 12:44

    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.




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Mer 25 Aoû 2010 - 16:00

    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 Wink



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Mer 25 Aoû 2010 - 16:39

    Parfait Very Happy ( 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.




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Jeu 26 Aoû 2010 - 16:55

    lol
    Je t'en prie, amuses-toi bien Wink



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Sam 28 Aoû 2010 - 5:26

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

    Spoiler:
    Chatbox latérale coulissante - Page 2 Sans_titre-3557f9d331

    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 ?




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Sam 28 Aoû 2010 - 21:38

    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 Wink

    Merci



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Lun 30 Aoû 2010 - 17:11

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




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Lun 30 Aoû 2010 - 18:51

    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 Wink



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Ven 3 Sep 2010 - 21:18

    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 ..




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Mer 8 Sep 2010 - 20:37

    Up ~ J'attends toujours ton aide :p




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Jeu 9 Sep 2010 - 10:15

    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



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Jeu 9 Sep 2010 - 11:22

    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 ^^'




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Ven 10 Sep 2010 - 15:36

    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



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Ven 10 Sep 2010 - 15:52

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

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




    Chatbox latérale coulissante - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Mar 21 Sep 2010 - 14:06

    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 Wink

    Au plaisir



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Grif
    Grif
    MasculinAge : 26Messages : 37

    Sam 4 Déc 2010 - 14:16

    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é :/
    Pyrrha
    Pyrrha
    MasculinAge : 29Messages : 1985

    Sam 4 Déc 2010 - 15:19

    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 >).




    Chatbox latérale coulissante - Page 2 Noir
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Sam 4 Déc 2010 - 21:35

    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 Wink

    ++



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Alexiel
    Alexiel
    MasculinAge : 35Messages : 17

    Dim 9 Jan 2011 - 20:21

    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...
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    Lun 10 Jan 2011 - 19:57

    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.



    Chatbox latérale coulissante - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Alexiel
    Alexiel
    MasculinAge : 35Messages : 17

    Lun 31 Jan 2011 - 22:03

    Re,

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

    Spoiler:
    Chatbox latérale coulissante - Page 2 Zvqudh

    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 :)



    Chatbox latérale coulissante - Page 2 Inuchi10
    Je veux être comme Cheshire ♥. Comment ça, il est mieux ? x)
    Léandre
    Léandre
    MasculinAge : 33Messages : 18

    Lun 14 Fév 2011 - 17:04

    Merci
    Anonymous
    Invité

    Lun 21 Mar 2011 - 18:10

    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 ^^
    Contenu sponsorisé


      La date/heure actuelle est Mar 9 Mar 2021 - 2:28