Transition et onclick invision

[durgrim l'ancien]

Bonjour,

J'ai un petit problème, j'aimerai mettre une transition douce pour l'ouverture et la fermeture de mes catégories invision mais mon css "transition" ne fonctionne pas du tout sur le div onclick sous invision.

Que faut-il faire pour résoudre ce souci ?

En vous remerciant,
au revoir.

[durgrim l'ancien]

Je relance.

[durgrim l'ancien]

Remonte !

[Invité]

Bonjour,

Quel est le code inséré svp ?


Cordialement.

[durgrim l'ancien]

Quel est le code inséré svp ?

Que voulez-vous dire ?

[Invité]

Re,

mais mon css "transition" ne fonctionne pas du tout

Quel est ce CSS ? (Affichage => couleurs => feuille de style CSS - vous pouvez le poster par MP ou en hide si vous voulez préserver sa confidentialité)

Cordialement.

[durgrim l'ancien]

Le voici, le voila :

Code:

-moz-transition: .8s all .3s;
   -webkit-transition: .8s all .3s;
   transition: .8s all .3s;

[Invité]

C'est tout ce qui a été inséré ?

Cordialement.

[durgrim l'ancien]

Non, il est entre deux balises après quelques soient la class ou l'ID, cela ne fonctionne pas.

[Invité]

Bonjour à tous !

Ce sujet m'intéresse. La fonction pour réduire les catégories sous Invision est super mais j'aurais aimé y ajouter une petite transition sympa.

De mon point de vue, je pense que via CSS s'est totalement impossible car cette fonction est générée par ce bout de code dans le template index_box :

Code:

onclick="toggleCategory('{catrow.tablehead.ID}');"

C'est donc du javascript et s'il y a un moyen de rajouter une transition, il me semble que ça ne peut se faire que par javascript. Malheureusement, je n'ai pas la solution... J'ai pensé à remplacer ce code par un autre créé maison avec la fonction slideToggle() mais je n'ai pas réussi et de toute façon, comme j'ai presque aucune connaissance en JS, à chaque actualisation de la page, la catégorie sera à nouveau affichée contrairement au script par défaut de Invision...

Donc si quelqu'un a une solution, ce serait vraiment super. ^^

[durgrim l'ancien]

Je relance le sujet.

[[Nihil]]

J'ai essayé rapidement un code en javascript, quelqu'un sous invision peut il me dire si cela fonctionne (il n'y a pas encore la fonction sauvegardant si les catégories étaient ouvertes).

EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

[durgrim l'ancien]

Alors sur les forums déjà ouvert, cela fonctionne (mais ne sauvegarde effectivement pas l'état du forum). Sur les forums qui était fermé, cela ne les ouvre tout simplement pas.

En tout cas merci pour ce début de code.

[[Nihil]]

Alors sur les forums déjà ouvert, cela fonctionne (mais ne sauvegarde effectivement pas l'état du forum). Sur les forums qui était fermé, cela ne les ouvre tout simplement pas.

On va tester avec une petite variante :
EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

[durgrim l'ancien]

Cela ne mémorise toujours pas et surtout comme dit plus haut si la personne place le code sur son forum alors que certains utilisateurs ont déjà fermé certains forums, ils ne pourront plus du tout y accéder.

De plus, les icones apparaissent/disparaissent comme si l'effet ne fonctionnait pas.

Je vous laisse voir ce que ça donne sur mon forum test

[[Nihil]]

Pour la fonction de sauvegarde, je l'ai déjà précisé en haut, cela ne fonctionne pas encore... Ca ne sert à rien de le faire si le code pour ouvrir / fermer ne fonctionne pas...

(il n'y a pas encore la fonction sauvegardant si les catégories étaient ouvertes)

Alors sur les forums déjà ouvert, cela fonctionne (mais ne sauvegarde effectivement pas l'état du forum). Sur les forums qui était fermé, cela ne les ouvre tout simplement pas.

On va tester avec une petite variante :
EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

Mon précédent message vous demandait simplement si cela réglait le problème de "non ouverture". Après avoir fait des test je comprends maintenant un peu mieux d'où cela provient.

Pour les icones, le problème provient de ceci dans le CSS :

Code:

table.ipbtable span.status {
    position: absolute;
}

Cela provient peut être du CSS de base d'invision.

Essayez en remplaçant par ceci (ou bien si ce n'est pas dans le CSS, en l'ajoutant) :
EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

Voici un autre test (et la fonction de sauvegarde ne fonctionne toujours pas ):
EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

Allez, au point ou j'en suis, encore une version un peu différente :
EDIT : Le code ne fonctionnant pas je le retire pour simplifier la future lecture, la solution a été apportée dans un message plus bas

[Invité]

Bonjour !

Le premier code ne fonctionne pas bien chez moi, il faut appuyer deux fois pour qu'il rouvre la catégorie.

Et le code en spoiler, fonctionne bien mais si la catégorie était déjà fermée, elle s'ouvre puis se referme. Mais ensuite, tout fonctionne normalement. A mon avis c'est la sauvegarde des catégories du script par défaut qui pose problème avec le nouveau code. ^^

Merci pour ton aide en tout cas !

[[Nihil]]

Merci pour le retour Sycophante

Voici un petite modification, le code est pas encore "nettoyé", j'essaye encore de connaitre un peu le fonctionnement, je ne code jamais sur invision x) :
EDIT : La version du code définitive se trouve plus bas.

[Invité]

Il n'y a plus de bug quand une catégorie avait été enregistrée comme fermée, ça a l'air de fonctionner normalement. ^^

Par contre, le QEEL a aussi cette option de rétractation mais comme son code HTML est légèrement différent des catégories, cela n'affiche plus les statistiques mais juste les liens "Sujets actifs du jour" et compagnie. Si on s'y connait un peu en HTML, on peut corriger facilement ce pb sans javascript. Je l'ai fais vite fait d'ailleurs, il suffisait de placer

Code:

 id="s0"

dans la table plutôt que dans le tbody où il est placé par défaut. Certes cela empêche les liens de rester affichés quand le QEEL est rétracté mais, tout fonctionne normalement comme ça.

Voici le code par défaut du QEEL :

Code:

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>
         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>
         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>

<!-- END disable_viewonline -->

[durgrim l'ancien]

Le problème d'ouverture/fermeture est résolu.

Pour les icônes même avec le Css, le problème persiste.

[[Nihil]]

Pour les icônes même avec le Css, le problème persiste.

En effet, j'ai précisé de remplacer l'ancien code

Code:

table.ipbtable span.status {
    position: absolute;
}

Par

Code:

table.ipbtable span.status {
    float: left;
}

Mais comme il s'agit d'un code de base d'invision, il fallait en fait mettre ceci :

Code:

table.ipbtable span.status {
    float: left;
    position: static; /* on annule le position absolute */
}

Une fois que cette partie là fonctionne sans souci, je passe à la partie avec la sauvegarde de l'état ouvert / fermé

[Invité]

J'avais pas vu le pb des icônes, comme j'avais changé le code de base, c'est la class status qui embête le monde. xD En la virant, ça règle aussi le pb mais il faut changer un peu le html après pour repositionner comme il faut l'icône avec le reste. Avec le css que tu as donné, le problème est résolu sans avoir à bidouiller le HTML. J'ai testé sur mon forum test et ça roule !

[durgrim l'ancien]

Idem le problème des icônes est résolu.

[[Nihil]]

Allez, peut être la dernière étape

Ce code fait fonctionner la sauvegarde normalement :

Code:

$(function() {
    $contract = $('.contract').removeAttr('onclick');

    $contract.each(function() {
        var id = this.id.substr(1);
        $(this).parent().next().wrap('<div class="animation_wrapper" id="w_' + id + '">');
    });

    $contract.on('click', function() {
        var id = this.id.substr(1),
            $aWrapper = $('#w_' + id);
       
        if ($(this).hasClass('expand') && $aWrapper.children().css('display') == 'none') {
            $aWrapper.hide().children().removeAttr('style');
        }
       
        var toggle = $aWrapper.css('display') == 'none';
        my_setcookie('_' + id, toggle ? '' : '1', true);

        $aWrapper.slideToggle();
        $(this).toggleClass('contract').toggleClass('expand');
    });
});

EDIT :
J'en profite pour poster une version avec des commentaires, comme ça si un jour le code pose problème on pourra avoir un petit rappel de ce que je cherchais à faire

Spoiler:

[durgrim l'ancien]

Sur mon forum, cela marche nickel.

Je vous laisse constater => par ici !

Je vous remercie beaucoup pour le boulot effectuer.

[Invité]

Tout à l'air de fonctionner aussi pour moi !

Merci à l'auteur d'avoir ouvert ce sujet et merci beaucoup [Nihil] pour ton aide. Bonne soirée à vous deux !

[[Nihil]]

Parfait, heureuse d'avoir pu aider, et j'ai eu l'occasion de voir un peu Invision du coup ☺
Plus qu'à mettre le sujet en Résolu et espérer que le code fonctionne bien sans soucis