AccueilDernières imagesRechercherS'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.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    (Onyx) Barres pour chaque statistique dans la Feuille de personnage

    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Mer 6 Sep 2017 - 23:05

    Ma demande



    Bonjour, bonsoir ! :friends: Alors d'abord, je tiens à m'excuser si le titre n'est peut-être pas très clair mais je ne peux malheureusement pas faire plus simple. ='D Ce que je souhaite faire, c'est transformer une partie de la Feuille de Personnage; Les statistiques, pour en faire des barres à stats et dont le remplissage de la jauge dépendrait de la valeur des PV, Attaque, Défense, Magie, Résistance. Je vous invite à regarder l'image que je vous ai insérée ci-dessous pour comprendre mieux ce que je veux dire. :xD:
    Merci d'avance en tout cas ! J'espère que ce ne sera pas trop compliqué pour le ou la codeur-se ! :heart:

    Lien du forum - inuyashalastbattle.forumactif.fr


    Schéma(s) et Eléments


    Schémas :
    Spoiler:

    Tailles des éléments : Pour ne pas déformer la page, essayez de faire en sorte que le tout ne dépasse pas 200px de hauteur et 250px de largeur.
    Effets voulus : Le remplissage de chaque barre doit avoir une couleur différente pour chaque statistique PV, Attaque, Défense, Magie, Résistance donnée (même s'ils sont tous en bleu sur mon schéma), que je pourrai modifier facilement selon mes envies.
    Version de votre forum : PHPBB2


    Ressources


    Aucune.


    Autres précisions ?


    • N'oubliez pas les valeurs chiffrées des statistiques, qui doivent apparaitre juste un peu avant leur barre respective.
    • N'hésitez pas à rendre les barres plus esthétiques que celles qui sont sur mon schéma. La partie non remplie/vide doit être de couleur foncée, et non transparente comme c'est le cas sur celui-ci.



    Dernière édition par shinoaah le Ven 13 Oct 2017 - 18:33, édité 2 fois
    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Sam 9 Sep 2017 - 21:50

    Up ! :siffle:
    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Lun 11 Sep 2017 - 10:42

    Up ! :artiste:

    EDIT : AAAH PARDON IL S'EST PAS ENCORE ÉCOULÉ 48H EXACTEMENT ! >< Pouvez-vous supprimer mon message s'il vous plaît ? :"D pardon encore pour cette erreur d'inattention !
    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Dim 17 Sep 2017 - 13:01

    Up !
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 19 Sep 2017 - 20:31

    Salut!

    Ce serait bien d'avoir le lien de ton forum svp ^^
    (Quitte à le mettre sous hide Wink)



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Sam 23 Sep 2017 - 19:22

    Salut ! ♥ C'est vrai tu as raison, j'avais complètement oublié :omg: Je l'ai ajouté ! (Et je UP au passage :joie:)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 23 Sep 2017 - 21:58

    Salut!

    Alors voilà le rendu : http://forum-test-onyx6.forumactif.com/u1

    C'est possible de savoir la valeur maximum de chaque statistique? Genre, 65 pv sur 100 ou 65 pv sur 500? Ça fait une différence ^^



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Sam 30 Sep 2017 - 13:09

    Salut !
    Woow, c'est superbe merci !! :aww: Merci de t'occuper de mon cas !
    Bien sûr, pas de problème ! D'après mes calculs j'ai pour valeurs maximales :

    PV - 367
    Attaque - 318
    Défense - 316
    Magie - 317
    Résistance - 314
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 30 Sep 2017 - 19:20

    Salut!

    Alors voilà les codes :



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Sam 7 Oct 2017 - 23:18

    Coucou ! ♥ Merci beaucoup, je pars tester ça tout de suite ! :hug2:
    Alors, je viens juste de le faire, et niveau statistiques tout est impecc' ! :bave: C'est exactement ce que je voulais ! *__* Par contre, il y a juste un petit problème, c'est que tout ne s'affiche plus comme il faut, et pourtant je suis certaine d'avoir tout fait correctement :'DD Je te laisse en juger par toi même (exemple), mais les avatars ne s'affichent plus, ni même les champs du profil comme le sexe, l'âge etc. Je ne sais pas si c'est du au codage utilisé pour le profil, mais si tu le souhaites, je peux te l'envoyer ? c'':
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 8 Oct 2017 - 0:23

    Mmhh...

    Tu me passe ton CSS et ce template plz?



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Dim 8 Oct 2017 - 12:09

    Pas de soucis, alors voilà le template profile_view_body :


    Et voilà la partie concernée du CSS :


    Si jamais le problème ne vient pas de là, je te donnerai accès au PA de mon forum en te passant le mdp sans problème ! :pompom:
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 8 Oct 2017 - 19:03

    Salut!

    Pour le template, tu as vraiment fais un copier/coller du template "profile_view_body" de la section "profil" des templates?
    Parce qu'il manque tout plein de choses et il y a mon nom dans le template, ce qui m'étonne beaucoup u_u



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Dim 8 Oct 2017 - 20:53

    Hein ? Ton nom ?? xDD
    Ah je vois le mien en début de code, effectivement ! 8'DD Je sais pas trop comment, mais j'ai dû copier au mauvais endroit :hum: ( c'est ça de faire trente six mille choses à la fois aussi. )

    Voilà le template, je pense que c'est bon cette fois !

    EDIT : J'étais certaine d'avoir copié-collé le bon template et ça m'a refait la même chose ! Mais tout est rentré dans l'ordre dès que j'ai retiré les balises hide ! *Pheww X___x*
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <div class="PFIL"><div class="topPFIL"><div class="colorPFIL" style="display:none;">{USERNAME}</div><a class="sbjPFIL" href="/sta/{PUSERNAME}">{L_TOPICS}</a><a class="msgPFIL" href="/spa/{PUSERNAME}">{L_POSTS}</a><div class="namePFIL">{USERNAME}<div class="lstPFIL"><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div></div></div>
    <div class="avPFIL"><div class="adminPFIL"><!-- BEGIN switch_auth_user --><div>{ADMINISTRATE_USER}{BAN_USER}</div><!-- END switch_auth_user --><!-- BEGIN switch_dhow_mp --><div>{L_PRIVATE_MSG} : {PRIVATE_MSG}</div><!-- END switch_dhow_mp --></div>{AVATAR_IMG}</div>
    <script type="text/javascript">//<![CDATA[
    $( document ).ready(function() {$('.colorPFIL').each(function(){var color = $(this).children().css("color");
    $(this).closest('.topPFIL').css("background-color", color);});});//]]></script>
    <div class="boxPFIL"><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"><span style="display:inline-block; vertical-align:middle; height:35px;"></span><!-- 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 -->
    <!-- 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>
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 8 Oct 2017 - 22:37

    Ah, c'est mieux XD

    Il y avait une petite contradiction entre mon javascript et le template, voilà le javascript corrigé :
    Code:
    $(function(){
     
      // Si on est sur la page profil
      if ( $('.boxRPG').length > 0 ) {
     
        // On supprime le titre stats
        $('.boxRPG:first').find('textarea:first').prev().remove();
     
        // On prend le textarea
        var texta = $('.boxRPG:first').find('textarea:first').val();
     
        // On sépare le textarea en parties
        var splita = texta.split('\n');
     
     
        // On sélectionne la partie PV
        var pv = splita[0];
        // On crée la ligne
        var valeurpv = pv.split(' - ');
        var truevaleurpv = Math.round(parseInt(valeurpv[1])*100/367);
        var truevaleurpvoff = 100 - truevaleurpv;
        var pvligne =
            "<span class='pvvaleuron' style='width: " + truevaleurpv + "%;'></span>" +
            "<span class='valeuroff' style='width: " + truevaleurpvoff + "%;'></span>";
        var pvbloc =
            "<div class='stattotal'><span class='stafirst gen'>PV</span><span class='stasecond gen'>" +
            valeurpv[1] +
            "</span><span class='barrevalue'>" +
            pvligne +
            "</span></div>";
        // On place PV
        $('.boxRPG:first').find('textarea:first').before(pvbloc);
     
     
        // On sélectionne la partie Attaque
        var attaque = splita[1];
        // On crée la ligne
        var valeurattaque = attaque.split(' - ');
        var truevaleurattaque = Math.round(parseInt(valeurattaque[1])*100/318);
        var truevaleurattaqueoff = 100 - truevaleurattaque;
        var attaqueligne =
            "<span class='attaquevaleuron' style='width: " + truevaleurattaque + "%;'></span>" +
            "<span class='valeuroff' style='width: " + truevaleurattaqueoff + "%;'></span>";
        var attaquebloc =
            "<div class='stattotal'><span class='stafirst gen'>Attaque</span><span class='stasecond gen'>" +
            valeurattaque[1] +
            "</span><span class='barrevalue'>" +
            attaqueligne +
            "</span></div>";
        // On place Attaque
        $('.boxRPG:first').find('textarea:first').before(attaquebloc);
     
     
        // On sélectionne la partie Défense
        var defense = splita[2];
        // On crée la ligne
        var valeurdefense = defense.split(' - ');
        var truevaleurdefense = Math.round(parseInt(valeurdefense[1])*100/316);
        var truevaleurdefenseoff = 100 - truevaleurdefense;
        var defenseligne =
            "<span class='defensevaleuron' style='width: " + truevaleurdefense + "%;'></span>" +
            "<span class='valeuroff' style='width: " + truevaleurdefenseoff + "%;'></span>";
        var defensebloc =
            "<div class='stattotal'><span class='stafirst gen'>Défense</span><span class='stasecond gen'>" +
            valeurdefense[1] +
            "</span><span class='barrevalue'>" +
            defenseligne +
            "</span></div>";
        // On place Défense
        $('.boxRPG:first').find('textarea:first').before(defensebloc);
     
     
        // On sélectionne la partie Magie
        var magie = splita[3];
        // On crée la ligne
        var valeurmagie = magie.split(' - ');
        var truevaleurmagie = Math.round(parseInt(valeurmagie[1])*100/317);
        var truevaleurmagieoff = 100 - truevaleurmagie;
        var magieligne =
            "<span class='magievaleuron' style='width: " + truevaleurmagie + "%;'></span>" +
            "<span class='valeuroff' style='width: " + truevaleurmagieoff + "%;'></span>";
        var magiebloc =
            "<div class='stattotal'><span class='stafirst gen'>Magie</span><span class='stasecond gen'>" +
            valeurmagie[1] +
            "</span><span class='barrevalue'>" +
            magieligne +
            "</span></div>";
        // On place Magie
        $('.boxRPG:first').find('textarea:first').before(magiebloc);
     
     
        // On sélectionne la partie Résistance
        var resistance = splita[4];
        // On crée la ligne
        var valeurresistance = resistance.split(' - ');
        var truevaleurresistance = Math.round(parseInt(valeurresistance[1])*100/314);
        var truevaleurresistanceoff = 100 - truevaleurresistance;
        var resistanceligne =
            "<span class='resistancevaleuron' style='width: " + truevaleurresistance + "%;'></span>" +
            "<span class='valeuroff' style='width: " + truevaleurresistanceoff + "%;'></span>";
        var resistancebloc =
            "<div class='stattotal'><span class='stafirst gen'>Résistance</span><span class='stasecond gen'>" +
            valeurresistance[1] +
            "</span><span class='barrevalue'>" +
            resistanceligne +
            "</span></div>";
        // On place Résistance
        $('.boxRPG:first').find('textarea:first').before(resistancebloc);
       
     
        // On enlève le textarea avec les stats
        $('.boxRPG:first').find('textarea:first').remove();
       
      }
    });



    • Revenir en haut
    shinoaah
    shinoaah
    FémininAge : 26Messages : 22

    Ven 13 Oct 2017 - 18:19

    Eeeeeet.... ça marche ! :yay:
    Merci beaucoup @Onyx, le résultat rend super bien ! Je suis très satisfaite, et c'était rapide !! :hug2: ( Pardonne-moi pour ma lenteur dans les réponses, je suis très prise depuis qu'on a repris les cours. XwX )

    Une bonne soirée et bon week-end à toi, et merci encore ! ♥♥


    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 22:42