Alignement de la liste des images pour le Profil

[Hirakyo152]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : http://kaminoakuma-elsword.forumactif.org/

Description du problème

Bonjour,

Est-ce qu'il est possible de faire en sorte que l'on puisse faire un alignement de la liste des images pour le Profil ? Voici un exemple de ce que je souhaite avoir :



Je ne sais pas du tout si vous allez pouvoir comprendre ça !

Merci en avance pour votre aide =)

[Hirakyo152]

Bonjour,

UP !

Est-ce que c'est possible de le faire ? Sachant que moi, j'ai beau chercher... mais j'ai trouvé aucune astuce pour ça... :'(

[Musara]

Salut Hirakyo !

J'ai codé une solution relativement simple en Javascript qui devrait fonctionner chez toi aussi.

Code:

$(function(){

   $('#profile_field_16_-7').after('<div class="musa-profile-field-list"></div>');
   
   $('.musa-profile-field-list').append($('#profile_field_16_-7 label'));
   
   $('#profile_field_16_-7').remove();

});

Cependant il faut remplacer l'identifiant "#profile_field_16_-7" (qui correspond à l'endroit où je testais le code chez moi) par ce que tu veux.

Pourrais-tu récupérer l'identifiant du champ du profil concerné chez toi ?

Pour ce faire : clic droit sur la première des images que tu veux aligner et clique sur "Inspecter" dans le menu déroulant (si tu utilises Chrome). Tu devrais voir apparaitre plein de code qui ressemble environ à ça :

Code:

<ul id="quelque_chose" class="profile_field_list">
    <li>
        <label></label>
    </li>
    <li></li>
    <li></li>
    ...

C'est le id="quelque_chose" qui nous intéresse ici !

Une fois que tu l'auras trouvé je pourrai t'expliquer comment ajouter le code mentionné plus haut.

Et si jamais tu ne trouves pas / si jamais ça ne ressemble pas à ce que j'ai dit, n'hésite pas !

[Hirakyo152]

Bonjour,

J'ai effectué ce que vous m'avez dit de faire... voici le code JavaScript que j'ai modifié :

Code:

$(function(){
 
   $('#profile_field_8_4').after('<div class="profile_field_list"></div>');
  
   $('.profile_field_list').append($('#profile_field_8_4 label'));
  
   $('#profile_field_8_4').remove();
 
});

Placement: Sur toutes les pages

Sauf que mon problème actuel, c'est ça :

Il y a un alignement qui se produit en double :/

(J'aimerai retirer ceux qui sont dans la partie : "Sexe" et "Navigateur internet")

PS : Je possède Comodo Dragon, comme navigateur qui est similaire à Google Chrome.

[Musara]

Salut Hirakyo !

Yes bien joué, c'est exactement ce qu'il fallait faire. Ton problème vient de la classe ".profile_field_list" que tu as utilisée dans le code Javascript. Donne lui un nom perso comme j'avais fait ".musa-profile-field-list" par exemple. Tu peux mettre ce que tu veux sauf une classe déjà utilisée comme ".profile_field_list".

En espérant que ça corrige le souci !

[Hirakyo152]

Ça fonctionne à merveille, merci beaucoup  
Désormais, j'aimerai faire quelque chose de plus représentant... 
comme par exemple, faire en sorte qu'il y a 3 images par ligne, c'est possible ? 

Par exemple: 

  

  

  

[Musara]

Ouais ça me parait tout à fait faisable.

Essaye ce code :

Code:

$(function(){

   $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
   
   $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
   
   $('#profile_field_8_4').remove();
   
   $('.profile-field-list-perso label:nth-child(3n+3)').after('<br />');

});

Je ne l'ai pas testé alors croisons les doigts x)

[Hirakyo152]

Merci bien, ça fonctionne parfaitement



Est-ce que c'est possible de faire en sorte que ma avant-dernière image rejoigne ma dernière image ? 
Histoire de faire en sorte qu'elle ne se retrouve pas toute seule en dernière ?

[Musara]

Ouais, un truc un peu moins joli dans ce genre là devrait faire l'affaire :

Code:

$(function(){

   $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
   
   $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
   
   $('#profile_field_8_4').remove();
   
   $('.profile-field-list-perso label:nth-child(29)').after('<br />');
   $('.profile-field-list-perso label:nth-child(27)').after('<br />');
   $('.profile-field-list-perso label:nth-child(24)').after('<br />');
   $('.profile-field-list-perso label:nth-child(21)').after('<br />');
   $('.profile-field-list-perso label:nth-child(18)').after('<br />');
   $('.profile-field-list-perso label:nth-child(15)').after('<br />');
   $('.profile-field-list-perso label:nth-child(12)').after('<br />');
   $('.profile-field-list-perso label:nth-child(9)').after('<br />');
   $('.profile-field-list-perso label:nth-child(6)').after('<br />');
   $('.profile-field-list-perso label:nth-child(3)').after('<br />');

});

[Hirakyo152]

J'ai juste ajouté quelques lignes... et ça me convient parfaitement

Code:

$(function(){
 
  $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
 
  $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
 
  $('#profile_field_8_4').remove();
 
  $('.profile-field-list-perso label:nth-child(29)').after('<br />');
  $('.profile-field-list-perso label:nth-child(30)').after('<br />');
  $('.profile-field-list-perso label:nth-child(27)').after('<br />');
  $('.profile-field-list-perso label:nth-child(24)').after('<br />');
  $('.profile-field-list-perso label:nth-child(21)').after('<br />');
  $('.profile-field-list-perso label:nth-child(18)').after('<br />');
  $('.profile-field-list-perso label:nth-child(15)').after('<br />');
  $('.profile-field-list-perso label:nth-child(12)').after('<br />');
  $('.profile-field-list-perso label:nth-child(9)').after('<br />');
  $('.profile-field-list-perso label:nth-child(6)').after('<br />');
  $('.profile-field-list-perso label:nth-child(3)').after('<br />');
 
});

Merci encore, Musara