Profil scrollable si plus long que le message

Explication de l'utilité du tutoriel + Prérequis s'il y a lieu



Rendu :

Spoiler:

Le code est assez simple et est proposé sous deux versions. Globalement, il est utile pour les forums avec une partie profils de 10 pieds de long, qui en ont marre d'avoir plus d'infos sur le personnage que de messages sur les zones HRP. Il va comparer les hauteurs de la zone profil et de la zone message, et ajouter une scrollbar sur la zone profil si jamais elle est plus longue que la zone message. Si la zone de message est plus longue, tout le profil sera visible.
Il y a assez peu de variations entre les deux formes du code, la première ajoutera une hauteur définie à la zone scrollable (genre 350px tout le temps), la seconde rendra la hauteur de la zone scrollable égale à celle des messages (cf les images de rendu).


NOTE 1 : Il n'y a pas besoin de toucher au CSS, le JS s'occupe d'ajouter un overflow : auto. En revanche, si vous voulez changer l'affichage de la scrollbar c'est par le CSS que ça se fait.
NOTE 2 : Le script est à ajouter dans les modules JS (Panneau d'Admin -> Modules -> Gestion des codes JavaScript -> Créer un nouveau JavaScript -> Donnez-lui le nom que vous voulez et cochez "Sur les sujets").

On va d'abord voir la version avec hauteur fixe :

Code:

$(function () {
    // Ajoute une scrollbar si profil > msg
    var infos = {};
    var msg_h = 0;
    var profil_h = 0;

    $(".post").each(function () {
        infos = $(".postprofile-info", this);
        msg_h = $(".postbody", this)[0].clientHeight;
        profil_h = $(".postprofile", this)[0].clientHeight;

        // Si le profil est plus grand que le msg ça scroll
        if (profil_h > msg_h && infos[0].clientHeight >= 350) {
            infos[0].style.height = "350px";
            infos[0].style.overflow = "auto";
        };
    });
});

La première partie est assez peu remarquable. On déclare nos variables, on leur attribue des valeurs de base. Rien à toucher.

Code:


    // Ajoute une scrollbar si profil > msg
    var infos = {};
    var msg_h = 0;
    var profil_h = 0;


Par la suite, on entre dans ce qu'on appelle une boucle. Ca signifie que pour chaque élément ".post" de notre page, il va effectuer les mêmes ordres. On va voir un peu plus en détail, si vous avez modifié les classes de votre template de base c'est ici que vous aurez des modifications à faire. (D'autant que ce code est fait sur une base modernBB.) Alors on ouvre l'inspecteur d'élément, et on vérifie nos balises !

Code:


    $(".post").each(function () {
        infos = $(".postprofile-info", this);
        msg_h = $(".postbody", this)[0].clientHeight;
        profil_h = $(".postprofile", this)[0].clientHeight;


Tout d'abord ".post". Ca correspond... Eh beh, à votre message en entier. Zone profil + zone message, le package entier. Ca veut dire que pour chaque élément div de la classe "post" sur notre page on va exécuter le script.
Ensuite ".postprofile-info" c'est la zone des INFORMATIONS du profil. Attention, PAS le profil entier ! Juste là où on va avoir le nombre de posts, la date d'inscription etcetc... C'est ici que, le cas échéant, la scrollbar sera ajoutée.
".postbody" est notre zone de message. Faites bien attention à ce que ce soit la balise qui englobe le message ET la signature, surtout si (comme chez moi) vous avez une hauteur minimum pour la zone de messages ! Si vous ne sélectionnez que la zone messages, la hauteur de la signature ne sera pas prise en compte pour la comparaison.
Et enfin, ".postprofile" correspond à la zone ENTIÈRE du profil ; avatar, rang, informations, champs de contact... C'est cette hauteur qui sera utilisée pour comparer le profil & le message.


Maintenant qu'on a tous les bons sélecteurs, place à la comparaison !

Code:


        // Si le profil est plus grand que le msg ça scroll
        if (profil_h > msg_h && infos[0].clientHeight >= 350) {
            infos[0].style.height = "350px";
            infos[0].style.overflow = "auto";
        };


Ici, on a d'abord une condition if. Elle veut simplement dire que, si la hauteur du profil est strictement supérieure à celle du message ET que la hauteur de la zone infos est elle aussi supérieure ou égale à 350(px), il exécute le code qui suit.
A savoir, ajouter une hauteur de 350px et un overflow: auto; à ladite zone infos.

Dans ce cas de figure, dès que le profil est plus grand que la zone message la hauteur de la zone info sera TOUJOURS à 350px. Si vous souhaitez en modifier la valeur, il vous suffit juste de changer les deux "350" (pensez-bien à laisser le px sur sa 2e apparition).

Et voilà, le tour est joué !



Maintenant, nous allons voir la seconde variante : La hauteur de la zone infos est égale à la hauteur de la zone messages (cf images de rendu ci-dessus).
Le code entier est le suivant :

Code:

$(function () {
    // Ajoute une scrollbar si profil > msg
    var infos = {};
    var msg_h = 0;
    var profil_h = 0;

    $(".post").each(function () {
        infos = $(".postprofile-info", this);
        msg_h = $(".postbody", this)[0].clientHeight;
        profil_h = $(".postprofile", this)[0].clientHeight - 100;

        // Si le profil est plus grand que le msg ça scroll
        if (profil_h > msg_h) {
            new_h = msg_h - 232;
            infos[0].style.height = new_h + "px";
            infos[0].style.overflow = "auto";
        };
    });
});

Le début du script étant identique à l'autre variante, je ne vais pas le re-détailler. On s'occupe d'abord de changer nos sélecteurs, si besoin, et ensuite on va se munir de son inspecteur d'éléments, d'un logiciel type photoshop et faire... du calcul omg. (Vous inquiétez pas, rien de trop méchant promis.) Mais par chez nous on aime la précision, alors il faut bien de ça meheh.
Et la raison est très simple : La hauteur du profil & la hauteur des messages ne commencent pas au même endroit. Le profil débute au... début de notre div, alors que la zone de message a d'abord un bandeau et les boutons "Citer, éditer...". (Encore une fois, ça correspond au cas de figure de mon forum, mais ça reste une majorité. À adapter selon votre cas.) Pour comprendre ça un peu plus facilement, voici des screens des différents éléments qu'il va falloir prendre en compte :
(Appréciez la beauté de ces montages.)

Spoiler:

On va retrouver tout ça dans le script :

Code:

profil_h = $(".postprofile", this)[0].clientHeight - 100;

Ici, on retire 100(px) à la hauteur de notre profil, puisque ça correspond à l'écart observé entre le début de mon profil et le début de mon message. Cela va permettre que notre comparaison (le if) soit plus précise, pour tomber sur un écart plus juste entre le profil et le message.

Code:

new_h = msg_h - 232;

Cette ligne calcule la nouvelle taille que fera notre zone informations. On soustrait donc la hauteur totale de notre message (contenue dans la variable msg_h) à 232(px), soit la zone où commence vraiment notre liste d'informations. Les 232px en trop correspondent donc à la hauteur de notre avatar et du rang. (Ouioui mes avatars sortent de la div.)

Maintenant qu'on a la hauteur précise que devra faire notre zone scrollable, on l'ajoute à son CSS avec les deux dernières lignes du script et le tour est joué ! On a une zone de profil exactement égale à la zone de message, signature ou pas /o