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.


    Problème avec le système de succès

    Likau
    Likau
    MasculinAge : 25Messages : 345

    le Ven 23 Aoû - 17:20

    Ma demande



    Bonjour !
    Je poste une petite demande parce que, malgré tous les tutoriels présents sur le fofo, c'est impossible pour moi d'afficher le système de badges/succès, que ce soit en profil de base ou avancé, et c'est quelque peu frustrant D:
    Si vous pouviez m'aider avec ça j'en serai ravi !
    Merci beaucoup Very Happy


    Schéma(s) et Eléments


    Schémas :
    (oui il y a encore le champ de mon avant-dernière tentative *va se planquer*)
    Tailles des éléments : Liste de la largeur du profil
    Effets voulus : Badges non obtenus grisés
    Version de votre forum : PHPBB2


    Ressources


    Nope Very Happy


    Autres précisions ?


    Non plus ^^



    Dernière édition par Likau le Dim 1 Sep - 10:12, édité 2 fois
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5120

    le Sam 24 Aoû - 3:00

    Hello Likau o/

    Pour qu'on puisse t'aider est ce que pourrais essayer de le re-mettre en place, nous donner le lien de ton forum, le lien du sujet que tu as suivi ainsi que nous copier / coller les codes que tu as mis.

    C'est surement un tout petit truc qui bug, mais ça sera peut-être plus simple pour nous de régler ce petit truc qui fait que ça bug sur ton forum que de repartir de 0 :)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Likau
    Likau
    MasculinAge : 25Messages : 345

    le Sam 24 Aoû - 4:37

    Bonjour Nihil et merci pour ta réponse rapide ! Very Happy

    Je te donne ça tout de suite :)

    Lien du forum; http://2birdsfree.forumactif.com/

    Lien du sujet suivi; http://www.never-utopia.com/t60799-nihil-profil-messages-systeme-de-succes?highlight=succ%C3%A8s
    (j'ai aussi essayé avec celui-ci pour le profil avancé; http://www.never-utopia.com/t57920-nihil-systeme-de-badge?highlight=Nihil )

    HTML ; (qui est, du coup, celui du sujet d'au-dessus mais que je changerai plus tard pour que ça corresponde au fofo ^^') // ✓ Utiliser le haut et le bas du forum
    Code:
    <div class="badges-profil">
        <div class="p-badge rose01">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description ROSE 01</div>
        </div>
        <div class="p-badge rose02">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description ROSE02</div>
        </div>
        <div class="p-badge rose03">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description ROSE03</div>
        </div>
        <div class="p-badge prim01">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description prim01</div>
        </div>
        <div class="p-badge prim02">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description prim02</div>
        </div>
        <div class="p-badge harpe04">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description harpe04</div>
        </div>
        <div class="p-badge viola05">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description viola05</div>
        </div>
        <div class="p-badge beat06">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description beat06</div>
        </div>
    </div>

    JS; ✓ Sur toutes les pages
    Code:
    /*
     * SYSTEME DE BADGE
     * LIBRE SERVICE NEVER UTOPIA
     */

    /* on vérifie si on est bien sur la page de profil */
    if (/^\/u\d+$/.test(document.location.pathname)) {
        var idPage = "4"; /* numéro de la page HTML */
        var idChamp = "field_id1"; /* ID du champ à modifier */


        $.get("/h" + idPage + "-", function (data) {
            /* on récupère le block des badges */
            var $badges = $(data).find(".badges-profil");

            /* on attend que notre page HTML soit prête */
            $(function () {
                /* on récupère la zone badge */
                var $profilBadges = $("#"+idChamp);

                if ($profilBadges.length > 0) {
                    /* selection des badges du membre */
                    var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                    /* pour chaque badge, on ajoute la classe si besoin */
                    for (var i = 0, l = badgesUser.length; i < l; i++) {
                        if (badgesUser[i].length > 0) {
                            $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                        }
                    }

                    /* si la personne ne peut pas éditer le champ,
                    * on le retire la zone */
                    if ($profilBadges.find(".field_editable").length < 1) {
                        $profilBadges.next().andSelf().remove();
                    }
                }

                /* on ajoute le block dans le profil */
                $(".badges-page-profil").append($badges);
            });

        })
    }

    CSS; (juste la partie concernée)
    Code:
    /* BADGES DANS LES PROFILS */
    .p-badge {
      position: relative;
      width: 32px;
      height: 32px;
      display:inline-block;
      vertical-align: middle;
    }

    /* style de la boite de description */
    .p-badge-description {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 5;
     
      background: #4aa3df;
      color: white;
      padding: 5px 10px;
      width: 200px;
      border-radius: 3px;
     
      /* effet survol */
      transition: all 300ms;
      opacity: 0;
      visibility: hidden;
    }

    /* on fait apparaitre la description au survol */
    .p-badge:hover .p-badge-description {
      opacity: 1;
      visibility: visible;
    }

    /* bloc qui contient tous les badges */
    .badges-profil {
      background: #2f2b2b;
      padding: 10px;
      margin: 20px auto;
    }

    /* Par défaut on masque les badges dans le profil */
    .badges-page-profil .p-badge {
      display: none;
    }

    /* on affiche seulement les badges actifs */
    .badges-page-profil .p-badge.badge-actif {
      display: inline-block;
    }
    /* FIN DANS LES PROFILS */

    ► Le champ du profil est encore bien en place, je viens de le changer pour que les invités puissent le voir aussi :)
    Likau
    Likau
    MasculinAge : 25Messages : 345

    le Mar 27 Aoû - 4:21

    J'ai oublié le délai des UP donc désolé si c'est encore trop tôt :ange:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5120

    le Mar 27 Aoû - 15:46

    Hello :)

    J'étais en vacances donc je ne suivais plus trop ce qui se passait ici Very Happy

    Petit problème 1:
    Première petite chose, tu as un petit bug de Javascript. Je crois que tu as l'un de tes JS avec un code qui ressemble à ça :
    Code:
    $(window).load(function () {
        typeof _userdata == "undefined" ? console.log("L'objet \"_userdata\" de forumactif n'a pas été trouvé. Le script de sauvegarde des messages en cours d'écriture ne peut pas fonctionner.") : messageSaver.init()
    })

    Il manque un point virgule à la fin, du coup ça fait casser certains autre codes Sad
    Code:
    $(window).load(function () {
        typeof _userdata == "undefined" ? console.log("L'objet \"_userdata\" de forumactif n'a pas été trouvé. Le script de sauvegarde des messages en cours d'écriture ne peut pas fonctionner.") : messageSaver.init()
    });

    Petit problème 2:
    Dans le profil http://2birdsfree.forumactif.com/u1 tu as actuellement "p-badge rose01", il faudrait les séparer par un point virgule. Sinon le système croit que c'est un badge, qui s'appelle "p-badge rose01"
    Donc mettre "prim02 ; rose01" par exemple plutôt (sans les guillemets autour)

    Petit problème 3:
    Quelque part dans ton template de profil (profile_view_body), est ce que tu peux rajouter ceci ?
    Code:
    <div class="badges-page-profil"></div>
    C'est le bloc qui contiendra les badges du profil



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Likau
    Likau
    MasculinAge : 25Messages : 345

    le Mer 28 Aoû - 6:27

    Coucou Nihil, j'espère que tes vacances se sont bien passées ! ^^

    Alors c'est donc ce point virgule qui faisait tout sauter ? Le sacripan. J'ai apporté les modifications demandées et les badges s'affichent sans souci maintenant (du moins ceux obtenus) cheers

    Du coup pour afficher ceux qui ne sont pas obtenus et les griser, je pourrais faire comment ? :o

    [EDIT] • J'ai réussi en utilisant un filtre, mais maintenant je suis un peu embêté parce que les descriptions passent carrément sous les images :oO:
    Spoiler:

    Du coup voilà les nouveaux HTML;
    Code:
    <style>
    .pas_obtenu {
            width:auto;
            height: auto;
            padding: 7px;
            border-radius: 8px;
            margin: 5px;
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            background:#FFD700;
            border:1px #FF9933 solid;
        }

        .obtenu {
            width:auto;
            height: auto;
            padding: 7px;
            border-radius: 5px;
            margin: 5px;
            background:#FFD700;
            border:1px #FF9933 solid;
        }
    </style>

    <div class="badges-profil">
        <div class="p-badge rose01 pas_obtenu">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Début de la Richesse !" /></div>
            <div class="p-badge-description">>> Début de la Richesse !<br>Obtenir 50 Dovlas</div>
        </div>
        <div class="p-badge rose02 pas_obtenu">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description ROSE02</div>
        </div>
        <div class="p-badge rose03 pas_obtenu">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description ROSE03</div>
        </div>
        <div class="p-badge prim01 pas_obtenu">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description prim01</div>
        </div>
        <div class="p-badge prim02 pas_obtenu">
            <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
            <div class="p-badge-description">Description description prim02</div>
        </div>
    </div>


    CSS;
    Code:
    /* BADGES DANS LES PROFILS */
    .p-badge {
      position: relative;
      width: 32px;
      height: 32px;
      display:inline-block;
      vertical-align: middle;
    }


    /* style de la boite de description */
    .p-badge-description {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 1;
     
      background: #4aa3df;
      color: white;
      padding: 5px 10px;
      width: 200px;
      border-radius: 3px;
     
      /* effet survol */
      transition: all 300ms;
      opacity: 0;
      visibility: hidden;
    }

    /* on fait apparaitre la description au survol */
    .p-badge:hover .p-badge-description {
      opacity: 1;
      visibility: visible;
    }

    /* bloc qui contient tous les badges */
    .badges-profil {
      background:#1A1A1A;
      padding: 10px;
      margin: 20px auto;
    }

    /* Par défaut on masque les badges dans le profil */
    .badges-page-profil .p-badge {
      display: none;
    }

    /* on affiche seulement les badges actifs */
    .badges-page-profil .p-badge.badge-actif {
      display: inline-block;
    }


    /* FIN DANS LES PROFILS */

    Et Template;
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <div class="PFIL"><div class="namePFIL">{USERNAME}</div>
    <div class="avPFIL"><div id="adminPFIL"><!-- BEGIN switch_auth_user --><div><span>{L_ADMINISTRATE_USER} :</span><br/>{ADMINISTRATE_USER}{BAN_USER}</div><!-- END switch_auth_user --><div><!-- BEGIN switch_dhow_mp --><span>{L_PRIVATE_MSG} :</span> {PRIVATE_MSG}<!-- END switch_dhow_mp --></div></div>{AVATAR_IMG}</div><div class="boxPFIL"><a rel="nofollow" class="sbjPFIL" href="/sta/{PUSERNAME}">{L_TOPICS}</a><a rel="nofollow" class="msgPFIL" href="/spa/{PUSERNAME}">{L_POSTS}</a><div class="lstPFIL"><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div><br/><div class="abtPFIL"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div><!-- END profile_field --></div><div id="ktactPFIL"><!-- BEGIN contact_field --><div class="ktactPFIL">{contact_field.CONTENT}</div><!-- END contact_field --></div></div>
    <!-- BEGIN switch_rpg -->
    <div class="boxRPG"><div style="float:left; margin:0 10px 10px 0;">{RPG_IMAGE}</div>
     <!-- BEGIN rpg_fields -->
     <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>
     <!-- END rpg_fields -->
     {U_ADMIN_RPG}
     </div>
     <!-- END switch_rpg -->
      <br><br><center><div style="font-variant:small-caps;color:white;text-shadow:1px 1px 1px white;font-family:Yanone Kaffeesatz;font-size:50px;margin-bottom:-30px;letter-spacing:3px;">Mes Exploits</div>
        <div style="background-color:rgba(255,255,255,0.5);width:800px;padding-top:10px;">
        <div class="badges-page-profil"></div>
        </div></center>
    <!-- BEGIN switch_admin_user_comment_active --><span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT}<!-- END switch_admin_user_comment_active -->
    </div>
    </table>
    <br />
    <script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
     $(document).ready(function(){
     $('[id^=field_id]').each(function(){
     if ( $(this).find('.field_editable').is('span, div') )
     {
     $(this).hover(function()
     {
     if( $(this).find('.field_editable.invisible').is('span, div') )
     {
     $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
     $(this).find('.ajax-profil_edit').attr({
     alt: "{L_FIELD_EDIT_VALUE}",
     title: "{L_FIELD_EDIT_VALUE}"
     }).click(function(){
     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
     $(this).prev().find('.ajax-profil_valid').attr({
     alt: "{L_VALIDATE}",
     title: "{L_VALIDATE}"
     }).click(function(){
     var content = new Array();
     $(this).parent().find('[name]').each(function(){
     var type_special = $(this).is('input[type=radio],input[type=checkbox]');
     if ( (type_special && $(this).is(':checked')) || !type_special )
     {
     content.push(new Array($(this).attr('name'), $(this).attr('value')));
     }
     });
     var id_name = $(this).parents('[id^=field_id]').attr('id');
     var id = id_name.substring(8, id_name.length);
     $.post(
     "{U_AJAX_PROFILE}",
     {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
     function(data){
     $.each(data, function(i, item){
     $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
     });
     },
     "json"
     );
     });
     $(this).remove();
     });
     }
     },function()
     {
     if( $(this).find('.field_editable.invisible').is('span, div') )
     {
     $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
     $(this).find('.ajax-profil_edit').remove();
     }
     });
     }
     });
     });
    //]]>
    </script>
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5120

    le Sam 31 Aoû - 8:26

    Coucou o/

    C'est tout à fait possible, car contre pense à bien à enlever l'effet filtre sur les badges obtenus, avec par exemple:
    Code:
    .badge-actif {
        filter: none;
    }

    Ensuite, pour que la description passe au dessus, tu peux ajouter un CSS comme ça :
    Code:
    .badges-page-profil .p-badge:hover {
        z-index: 1;
    }

    Quand tu survoles un badge, ça lui donne un "z-index" plus élevé (un peu comme s'il était sur un calque au dessus sur Photoshop)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Likau
    Likau
    MasculinAge : 25Messages : 345

    le Sam 31 Aoû - 8:46

    Spoiler:

    Sublime, tout fonctionne parfaitement :omg:
    Merci beaucoup pour ton aide, Nihil (et l'explication furtive sur le z-index) ! Ne me reste qu'à mettre les petites vignettes correspondantes (ce qui devrait être à ma portée) :bwaha:

    Le sujet peut être passé en résolu ♥
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5120

    le Mar 3 Sep - 16:11

    Contente d'avoir pu t'aider, j'archive le sujet :hudada:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov - 0:42