Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Intégrer le QEEL dans une page HTML ?

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

Résolu Intégrer le QEEL dans une page HTML ?

Message par foxies le Sam 13 Oct 2018 - 15:52

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous Smile Je ne suis pas parvenue à trouver une solution à un problème qui concerne le QEEL de mon forum.

Pour différentes raisons, j'ai fait le choix de créer une page HTML qui utilise le haut et le bas de mon forum et cette page est utilisée en tant que page d'accueil. Le soucis c'est que le QEEL ne s'affiche plus... En l’occurrence, j'ai auparavant effectué des changements au niveau du template index_body afin que seule la variable suivante s'affiche :

Code:
{LOGGED_IN_USER_LIST}

Il s'agit donc d'afficher uniquement la liste des membres connectés.

Voici mon template :

Code:
{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
         <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->

      <!-- BEGIN message_admin_txt -->
         <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div class="user-list">
  <div id="logged-in" class="masterTooltip" title="En ligne">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">
    document.getElementById('logged-in').innerHTML=document.getElementById('logged-in').innerHTML.replace(/Utilisateurs enregistrés :/,"");
</script>
</div>
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

Ma question est celle-ci : existe-t-il une solution pour que cette variable s'affiche au sein de ma page HTML (j'avais prévu de la placer tout à la fin) ?

Merci d'avance I love you
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par *Splash* le Sam 13 Oct 2018 - 16:31

Je post pour le lien du fofo
avatar

*Splash*
Membre habitué(e)

Masculin
Messages : 1059
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Lun 15 Oct 2018 - 7:24

Des idées ? Smile
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Garionix le Lun 15 Oct 2018 - 22:46

Bonsoooir ! Les variables pour êtres utilisées dans une Page Html c'est... Complexe, rien que pour la variable qui affiche le nom d'utilisateur de celui qui visionne la page c'était spéciale. Heureusement que l'équipe de ForumActif en avait proposé un tutoriel...

Par contre, pour celles qui affiches diverses éléments de la page, tel que les utilisateurs en ligne... Là je sèche, après bien entendu. Je suis arrivé avec une solution alternative, hé !

Met ce petit bout de code à l'endroit dont tu souhaite voir ceux qui sont connectés apparaître :

Code:
<script>
$.get( '/viewonline', function( data ) {
  var ViewQeel = $('.forumbg', data ).html();
  $('#Qeel').html(ViewQeel);
});
</script>

<div id="Qeel">
 
</div>


C'est encore archaïque, mais c'est une petite solution que je propose qui pourrai peut-être t'aider, voir non. C'est comme tu vois !

Heureusement, ForumActif dispose d'une page spéciale pour afficher le Qeel, il m'a suffit de récupérer un élément ciblé de cette fameuse page, puis de la rentrer dans la div portant l'id "Qeel".
Je l'ai testé sur mon Forum de test après l'avoir fait passer sous version ModernBB, s'il y a un problème hésite pas !

Et en espérant avoir pu aider !
avatar

Garionix
***

Messages : 120
Inscrit(e) le : 06/06/2016

http://www.pensionnat-ereno.com/
Garionix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Mar 16 Oct 2018 - 7:33

Bonjour @Garionix et merci pour cette proposition qui est intéressante (je ne savais même pas qu'une page /viewonline existait) ! J'ai essayé le script et il marche très bien.

Néanmoins, dans la mesure où les données générées concernent uniquement les membres connectés durant les cinq dernières minutes et non à l'instant donné, je vais patienter encore sur ce topic, voir si quelqu'un n'aurait pas une autre chose à proposer Smile

Merci encore et bonne journée I love you
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Mer 17 Oct 2018 - 10:30

UP Smile
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Ea le Mer 17 Oct 2018 - 14:34

Bonjour,


À ma connaissance un utilisateur/visiteur en ligne est quelqu'un qui a ouvert une page dans les X dernières minutes.

Si on veut savoir qui a un onglet du forum ouvert à un instant donné, on ne peut pas le savoir vu que qu'un aurait pu ouvrir une page il y a 30 secondes et la fermer depuis, ou quelqu'un pourrait avoir ouvert une page il y a deux heures et toujours être dessus.

Cordialement.
avatar

Ea
Aidactif
Aidactif

Messages : 23537
Inscrit(e) le : 04/04/2008

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

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Mer 17 Oct 2018 - 16:17

Bonjour @Ea, je vois Smile Je n'y avais pas pensé, c'est vrai.

Malgré tout, je ne suis pas sûre que même en utilisant la technique proposée plus haut, je puisse "isoler" les pseudos des membres connectés car le reste ne m'intéresse pas pour le rendu que j'aimerais avoir :/ A moins peut-être d'utiliser un certain script, mais mes compétences là-dedans sont bien trop limitées...
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Garionix le Mer 17 Oct 2018 - 23:37

Yoplaaa ! Désolé, j'étais pris dans un travaux compliqué >.>

Et en effet, afficher un utilisateur dans l'immédiat tant qu'il n'a pas ouvert de page c'est compliqué...

Après, comme on charge les données par Jquery, on peut faire que les modifications s'effectuent sans que vous mêmes ayez besoin de recharger la page... Mais à savoir c'est un code qui se lance toutes les x secondes.

Ah si c'est possible, il suffit d'affiner la sélection de Jquery ou bien pour un résultat sûr on peut modifier quelques peu le template. Car la page /viewonline est liée à un template de ForumActif.

avatar

Garionix
***

Messages : 120
Inscrit(e) le : 06/06/2016

http://www.pensionnat-ereno.com/
Garionix a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Ea le Jeu 18 Oct 2018 - 4:18

Pour l'exemple en affinant plus avec jquery, cela pourrait donner ceci en partant du script de garionix:

Code:
<div></div>
<script>
$.get( '/viewonline', function( data ) {
  debugger;
  var users = $('.forumbg td:first-child > a[href^="/u"]', data).map(function () {
    return $(this).prop('outerHTML');
  }).toArray();
  if (users.length == 0) {
    this.text("Il n'y a aucun utilisateur connecté");
    return;
  }
  this.html("Utilisateurs connectés : "+users.join(', '));
}.bind($('script:last').prev()));
</script>
avatar

Ea
Aidactif
Aidactif

Messages : 23537
Inscrit(e) le : 04/04/2008

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

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Jeu 18 Oct 2018 - 7:48

Wow, super top ! Merci à vous deux, c'est exactement ce que je voulais I love you

Si je peux me permettre, j'ai une autre question tongue Grâce à la méthode de Garionix j'ai également récupéré la liste des membres et elle s'affiche maintenant sur la page HTML en plus de la liste des membres connectés à présent :

Code:
<script>
$.get( '/memberlist', function( data ) {
  var ViewMl = $('.memberlist-wrapper', data ).html();
  $('#MemberList').html(ViewMl);
});
</script>
<div id="MemberList"></div>

Dans le template correspondant (memberlist_body), j'ai ceci afin qu'au survol des avatars, le pseudo du membre concerné s'affiche :

Code:
<a href="{memberrow.U_VIEWPROFILE}"><div class="member-avatar masterTooltip" title="{memberrow.USERNAME}">{memberrow.AVATAR_IMG}</div></a>

Le JS suivant est installé sur mon forum :

Code:
$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});

Malheureusement, la class masterTooltip ne s'affiche pas. Elle fonctionne pourtant sur une autre partie de la page HTML : en passant le curseur sur les pseudos des membres connectés avec comme titre "En ligne" (je viens tout juste de le mettre en place). Sauriez-vous comment la faire marcher ? ::fleur::
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Garionix le Jeu 18 Oct 2018 - 16:27

Pour moi cela fonctionne bien pourtant... Lorsque je passe le pointeur de ma souris sur les avatar se situant dans la div member-avatar masterTooltip, j'ai bien le pseudo qui s'affiche et qui suit le pointeur de ma souris tant que je survole l'avatar.
avatar

Garionix
***

Messages : 120
Inscrit(e) le : 06/06/2016

http://www.pensionnat-ereno.com/
Garionix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par Ea le Jeu 18 Oct 2018 - 17:40

Bonjour,


Je n'ai pas testé, mais les deux scripts devraient pouvoir être combiné comme ceci:

Code:
<div id="MemberList"></div>
<script>
$.get( '/memberlist', function( data ) {
    var ViewMl = $('.memberlist-wrapper', data ).html();
    $('#MemberList').html(ViewMl);
    // Tooltip only Text
    $('#MemberList').find('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});
</script>

Ce qu'il pourrait se passer avec le code précédent, c'est que le code au survol soit exécuté après que la liste des membres soient inclue dans la page.

Sinon il me semble que la liste des membres est paginée, donc si il y a plus de deux pages il est possible qu'on ne voit que la première.

Cordialement.
avatar

Ea
Aidactif
Aidactif

Messages : 23537
Inscrit(e) le : 04/04/2008

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

Résolu Re: Intégrer le QEEL dans une page HTML ?

Message par foxies le Ven 19 Oct 2018 - 7:35

Un grand merci pour votre aide ! Le code de @Ea fait marcher la tooltip convenablement.

Très bonne journée à vous deux I love you
avatar

foxies
*****

Féminin
Messages : 550
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies 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