Problème affichage js-useravatar

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

Résolu Problème affichage js-useravatar

Message par Lilynufare le Dim 3 Juil 2016 - 4:52

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 02/07/16
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour ! ça va ?

Alors j'ai un petit problème concernant le script (Je crois que c'est un script. Je suis nul en javascript...) js-useravatar. Avec la capture d'écran que j'ai fournis, on peut voir que le cercle est vide où il devrait y avoir l'avatar du membre. C'est la première fois que j'essaie d'utiliser ce code et je ne comprend pas pourquoi cela ne fonctionne pas...

Voici à quoi ressemble mon template concernant l'avatar
Code:
 <!-- BEGIN switch_user_logged_in -->
        <div class="js-useravatar"></div>
    <!-- END switch_user_logged_in -->

...voici mon CSS
Code:
    /* rond avec l.avatar */
    .js-useravatar {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 50%;
        top: 7px;
        left: 135px;
        z-index: 999;
        border: 2px solid #25262b;
        box-shadow: 0 0 5px black;
        overflow: hidden;
    }

... Et finalement voici mon javascript
Code:
/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
   
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
       
        /* on remplace le contenu de .js-avatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
       
    }
});

Merci beaucoup d'avance à qui pourra m'aider !
Le forum forum est mon forum de test Smile


Dernière édition par Lilynufare le Dim 3 Juil 2016 - 8:39, édité 1 fois

Lilynufare
***

Messages : 180
Inscrit(e) le : 22/08/2012

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

Résolu Re: Problème affichage js-useravatar

Message par Milouze14 le Dim 3 Juil 2016 - 7:38

Salut Lilynufare,

supprimes le script que tu mentionnes Wink .

remplaces cette partie:
Code:

    <!-- BEGIN switch_user_logged_in -->
            <div class="js-useravatar"></div>
        <!-- END switch_user_logged_in -->


Par:
Code:

<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">                         
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})});
</script>
        <div class="js-avatar"></div>
    <!-- END switch_user_logged_in -->

Penses a enregistrer les modifications en cliquant respectivement sur et


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Supprimes ceci:
Code:

        /* rond avec l.avatar */
        .js-useravatar {
            width: 50px;
            height: 50px;
            position: fixed;
            border-radius: 50%;
            top: 7px;
            left: 135px;
            z-index: 999;
            border: 2px solid #25262b;
            box-shadow: 0 0 5px black;
            overflow: hidden;
        }








Ajoutes ceci:
Code:

        /* rond avec l.avatar */
        .js-avatar {
            width: 50px;
            height: 50px;
            position: fixed;
            border-radius: 50%;
            top: 7px;
            left: 135px;
            z-index: 999;
            border: 2px solid #25262b;
            box-shadow: 0 0 5px black;
            overflow: hidden;
        }
.js-avatar  img
{
width: 48px;
height: 48px;
  border-radius: 50%;
}





Et voilà Very Happy .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage js-useravatar

Message par Lilynufare le Dim 3 Juil 2016 - 8:16

Oh mais c'est un miracle ! Ça fonctionne ! Merci beaucoup ! Very Happy

J'ai une autre petite question... Nos avatars sont 200*320 et non 100*100. Est-ce qu'il y a quand même une façon que je puisse les recadrer à 100*100 pour faire le rond mais sans que ça stretch nos avatars ?

Merci d'avance!

Lilynufare
***

Messages : 180
Inscrit(e) le : 22/08/2012

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

Résolu Re: Problème affichage js-useravatar

Message par Milouze14 le Dim 3 Juil 2016 - 8:25

Re,

tu as définie une largeur et une hauteur sur le bloc contenant les avatars ici:

Code:

.js-avatar {
width: 50px;
height: 50px;


Il faut donc mettre une dimension inférieure aux avatars afin que ces derniers
soient positionnés correctement....

Ensuite pour éviter toutes déformations, il faudrait peut-être modifier cette partie comme ceci:

Code:

.js-avatar  img
{
max-width: 48px;
max-height: 48px;
border-radius: 50%;
}



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage js-useravatar

Message par Lilynufare le Dim 3 Juil 2016 - 8:38

Ça n'a pas vraiment aidé le problème...
mais en fait, j'ai décidé une différente approche en faisant un ovale avec un cadre plutôt qu'un cercle donc la hauteur et la largeur fonctionne.
Merci quand même !

Merci beaucoup pour avoir répondu à ma question principale &hearts;

Lilynufare
***

Messages : 180
Inscrit(e) le : 22/08/2012

Lilynufare 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