Transition et onclick invision

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Transition et onclick invision

Message par durgrim l'ancien le Ven 22 Aoû 2014 - 13:19

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.


Dernière édition par durgrim l'ancien le Dim 31 Aoû 2014 - 22:05, édité 1 fois

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Lun 25 Aoû 2014 - 11:29

Je relance.

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Mer 27 Aoû 2014 - 11:31

Remonte !

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Kinotto le Mer 27 Aoû 2014 - 12:41

Bonjour,

Quel est le code inséré svp ?


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Mer 27 Aoû 2014 - 13:18

Quel est le code inséré svp ?
Que voulez-vous dire ?

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Kinotto le Mer 27 Aoû 2014 - 13:19

Re,

@durgrim l'ancien a écrit: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.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Mer 27 Aoû 2014 - 13:57

Le voici, le voila :
Code:
-moz-transition: .8s all .3s;
   -webkit-transition: .8s all .3s;
   transition: .8s all .3s;

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Kinotto le Mer 27 Aoû 2014 - 13:58

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

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Mer 27 Aoû 2014 - 14:00

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

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Invité le Ven 29 Aoû 2014 - 0:01

Bonjour à tous ! Smile

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 14:36

Je relance le sujet.

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 16:51

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


Dernière édition par [Nihil] le Dim 31 Aoû 2014 - 21:36, édité 2 fois

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 16:59

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.

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 17:09

@durgrim l'ancien a écrit: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


Dernière édition par [Nihil] le Dim 31 Aoû 2014 - 21:36, édité 1 fois

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 17:18

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

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 17:42

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...
@[Nihil] a écrit:(il n'y a pas encore la fonction sauvegardant si les catégories étaient ouvertes)

@[Nihil] a écrit:
@durgrim l'ancien a écrit: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 Mr. Green (et la fonction de sauvegarde ne fonctionne toujours pas What a Face ):
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


Dernière édition par [Nihil] le Dim 31 Aoû 2014 - 21:37, édité 1 fois

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Invité le Dim 31 Aoû 2014 - 18:18

Bonjour ! Smile

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 !

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 18:24

Merci pour le retour Sycophante Wink

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.


Dernière édition par [Nihil] le Dim 31 Aoû 2014 - 21:38, édité 2 fois (Raison : Modification du code)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Invité le Dim 31 Aoû 2014 - 18:40

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. What a Face

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 18:55

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

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

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 19:46

@durgrim l'ancien a écrit: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é Wink

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Invité le Dim 31 Aoû 2014 - 19:55

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 ! Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 20:05

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

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 21:26

Allez, peut être la dernière étape Very Happy

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:
Code:
$(function() {
    /* On annule la fonction par défaut */
    $contract = $('.contract').removeAttr('onclick');
 
    /* Les table ne s'animant pas bien avec
    * slideToggle en jQuery, on les entoure
    * avec une div.
    */
    $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);
     
        /* On détecte si la catégorie a été fermée par le script de base pour invision */
        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');
    });
});


Dernière édition par [Nihil] le Dim 31 Aoû 2014 - 21:51, édité 2 fois (Raison : Ajout d'une version avec quelques commentaires)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par durgrim l'ancien le Dim 31 Aoû 2014 - 21:32

Sur mon forum, cela marche nickel.

Je vous laisse constater => par ici !

Je vous remercie beaucoup pour le boulot effectuer.

durgrim l'ancien
**

Masculin
Messages : 98
Inscrit(e) le : 17/08/2006

http://www.la-guilde.net
durgrim l'ancien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par Invité le Dim 31 Aoû 2014 - 21:41

Tout à l'air de fonctionner aussi pour moi ! Smile

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition et onclick invision

Message par [Nihil] le Dim 31 Aoû 2014 - 21:47

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum