Isoler des champs du profil

[Phyliono]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com

Description du problème

Bonjour,

J'aimerais déplacer certains champs du profil dans un cadre à part mais je ne sais pas comment faire... J'ai vu plusieurs sujets mais je n'arrive pas à l'appliquer à mon forum, notamment celui-ci : https://forum.forumactif.com/t398576-isoler-des-champs-du-profil-dans-un-onglet-script

Par exemple, je souhaiterais déplacer la ligne "Inscription 04/06/2015" sur ce profil http://www.universiteuniverselle.com/u4 en dessous "Dernière visite : Aujourd'hui à 11:20" dans le cadre de droite.

Comment puis-je faire ?

Je vous remercie.

[Phyliono]

up

[Phyliono]

svp...

[Phyliono]

up

[Tite-May]

Bonjour,

Ton code est déjà modifié ou pas ? Tu peux nous donner le code du template ?

[Phyliono]

Merci de ta réponse.

Voici le template profile_view_body :

Code:

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <th style="width: 100%; white-space: nowrap;" class="secondarytitle">
        <h2>Profil de <span class="avatarImpose_nom">{USERNAME}</span></h2>
      </th>
  </tr>
  <tr style="height: 8px;">
      <td></td>
  </tr>
  <tr>
      <td align="center" valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="profile_row2" valign="top">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="profile_row5" align="center">
                    <!-- BEGIN profile_field -->
                    <tr id="field_id{profile_field.ID}" class="id_utilisateur_{USER_ID}">
                        <span class="profile_points">
                          <td width="142" align="right" valign="top" nowrap="nowrap">
                              <div style="margin-top:10px"><span class="profile_points"><span class="gen">{profile_field.LABEL}&nbsp;&nbsp;</span></span></div>
                          </td>
                          <td width="311">
                              <div class="gen" style="margin-top:15px;font-weight:bold">{profile_field.CONTENT}</div>
                              <br /><!-- BEGIN profil_type_user_posts --><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
                              <span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
                              &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                              &nbsp;&nbsp;- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts -->
                          </td>
                        </span>
                    </tr>
                    <!-- END profile_field -->
                  </table>
              </td>
              <td class="profile_row1" valign="top" style="text-align:center">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="profile_row3" align="center">
                    <tr align="center">
                        <td><b><span class="gen" style="font-size:16px">{USERNAME}</span></b></td>
                    </tr>
                    <tr align="center">
                        <td><b><span class="gen avatarImpose_image">{AVATAR_IMG}</span></b></td>
                    </tr>
                    <tr align="center">
                        <td><b><span class="gen">{POSTER_RANK}</span></b></td>
                    </tr>
                    <!-- BEGIN switch_show_status -->
                    <tr align="center">
                        <td><b><span class="gen">{USER_ONLINE}</span></b></td>
                    </tr>
                    <!-- END switch_show_status -->
                    <tr align="center">
                        <td><span class="gen">{L_LAST_VISITED}</span><span class="gen">&nbsp;:&nbsp;{LAST_VISIT_TIME}</span></td>
                    </tr>
                    <!-- BEGIN switch_auth_user -->
                    <tr>
                        <td valign="middle" nowrap="nowrap" align="center" style="word-wrap: break-word;white-space: normal"><br /><span class="gen">{L_ADMINISTRATE_USER}&nbsp;:<br />{ADMINISTRATE_USER}{BAN_USER}</span></td>
                    </tr>
                    <!-- END switch_auth_user -->
                  </table>
                  <!-- BEGIN contact_field -->
                  <table id="moyensContact" border="0" cellspacing="0" cellpadding="0" class="profile_row4" align="center" style="display:inline-block;width:35px;margin: 5px;">
                    <tr id="field_id{contact_field.ID}">
                          <td width="1%" valign="middle">
                              <div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div>
                          </td>
                    </tr>
                  <!-- END contact_field -->
                  </table>
                  <table width="100%" border="0" cellspacing="1" cellpadding="0" class="profile_row6" align="center" style="display:none">
                    <tr>
                        <td width="1%" align="center" valign="middle" nowrap="nowrap"><img src="http://compteur2visite.com/visiteur.php/?rvb=%23F8F8F8&texte=%23889CAA&hauteur=50&largeur=120&afficher=total" style="-webkit-mask-image: -webkit-gradient(
                          linear, top bottom, left right,
                          color-stop(0.00,  rgba(0,0,0,1)),
                          color-stop(0.35,  rgba(0,0,0,1)),
                          color-stop(0.50,  rgba(0,0,0,0)),
                          color-stop(0.65,  rgba(0,0,0,0)),
                          color-stop(1.00,  rgba(0,0,0,0)));" alt="Compteur de visite" border="0" /></td>
                    </tr>
                  </table>
                  <br />
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN switch_rpg -->
  <tr>
      <td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
  </tr>
  <tr>
      <td class="row1" align="center" valign="top" height="6">
        {RPG_IMAGE}<br /><br />
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields_left -->
            <tr>
              <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
              </td>
              <td width="100%" valign="middle" nowrap="nowrap">
                  <b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
              </td>
            </tr>
            <!-- END rpg_fields_left -->
        </table>
      </td>
      <td class="row1" align="center" valign="top" height="6">
        <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields -->
            <tr>
              <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
              </td>
              <td width="100%" valign="baseline">
                  <b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
              </td>
            </tr>
            <!-- END rpg_fields -->
        </table>
      </td>
  </tr>
  <tr>
      <td colspan="2" align="center" class="row1">{U_ADMIN_RPG}</td>
  </tr>
  <!-- END switch_rpg -->
</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>

[Tite-May]

Désolée je ne vais pas pouvoir t'aider rapidement. Je me suis penchée sur le template et la partie "date inscription" fait parti des champs qui sont mis dans le template en bloc, c'est à dire avec d'autres champs. Il n'est pas mis séparément. Donc si on le déplace on déplace tous les champs avec.

Je pense qu'il est possible de le faire en javascript, mais je n'en ai pas les capacités pour le moment, je ne suis plus du tout à jour en javascript.

Désolée

[Phyliono]

Si c'est le seul, c'est pas grave... Et pour les autres, comme "Etoiles" ?

[Tite-May]

Tous les champs qui sont à gauche ici :

sont liés les uns aux autres malheureusement.

[Phyliono]

Ok ça marche, si on peut pour les autres c'est bon.., comment faire ?

[Tite-May]

Quels autres ?
Tous les champs prédéfinis sont liés pour moi.

Dis moi lequel tu souhaites bouger, mais au vu du template, je pense qu'il faut que quelqu'un de doué en javascript se penche dessus

[Phyliono]

Par exemple, le champ "Etoiles" ou "Commerces" ou "Inventaire" ... visibles ici : http://www.universiteuniverselle.com/u22

[Phyliono]

up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

ho

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up...

[Phyliono]

Bon

[Miettes]

Hello hello

Je vais essayer de t'aider

Template : On va ouvrir le template "viewtopic_body" et on va entourer les champs du profil avec une balise ayant une classe spécifique. On va donc remplacer ça :

Code:

<!-- BEGIN profile_field -->
        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        <!-- END profile_field -->

par ça :

Code:

<!-- BEGIN profile_field -->
        <div class="infos-posteur">
          {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        </div>
        <!-- END profile_field -->

Ensuite, on va aller placer où on le veut le "réceptacle" des infos à bouger. Ce code se présentera sous cette forme :

Code:

<div class="infos-supp"></div>

Par exemple, moi je vais au dessous de la signature :

Code:

<!-- BEGIN switch_signature -->
              <div class="signature_div">
                {postrow.displayed.SIGNATURE}
              </div>
              <!-- END switch_signature -->
              <div class="infos-supp"></div>

On sauvegarde et on publie

Javascript : On va ensuite créer un js qui ne sera utilisé que sur les sujets. Je t'ai mis les commentaires explicatifs dans le code :

Code:

jQuery(function () {

    // on indique le chemin vers la balise qui contient les champs des profils
    // et l'élement html qui contient notre élement déclencheur
    var $chemin = ".post .postdetails.poster-profile .infos-posteur",
        $eltParent = '.post';

    // On parcourt chaque champs des profils
    $( $chemin ).each(function( index ) {
        // On récupére le contenu html de ces champs
        var champs ;
        if($(this).find('.label > span:first-child').length){
            champs = $(this).find('.label > span:first-child').html() ;
        }else{
            champs = $(this).find('.label').html() ;
        }
 
        // On teste si le champ correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Date d'inscription : "){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.infos-supp').append(this);
 
        }
 
    });
});

Je te laisse tester et revenir vers moi si besoin

[Phyliono]

Coucou, merci de ton aide mais je crois qu'il y a un souci.

Je ne parle pas sur les messages mais sur le profil de l'utilisateur (http://www.universiteuniverselle.com/u4). Ça pouvait très bien être le champ "Étoiles".

Vois-tu ?

[Phyliono]

up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »