• Annonce Accès rapide à l'écriture d'un commentaire.

    Liste des forums » Trucs et Astuces

    Mercredi 13 Septembre 2023 à 20:30
    stormalo

    Ce sujet fait suite à des demandes vues sur le forum d'entre-aide (dont une récemment).

    Il n'est pas toujours aisé d'accéder au formulaire de saisie des commentaires, surtout s'il y en a déjà beaucoup ou si les menu latéraux sont très long (!)

    Je propose d'installer un ou deux liens pour accéder directement au formulaire de saisie, uniquement lorsqu'il est disponible  (c.a.d. si c'est un Article ou un Livre d'or qui est à l'affichage). .

    Il faut pour cela un petit programme en langage JavaScript agissant sur un élément html du le bloc des commentaires <div>.


    ✅ Code pour accès direct à la saisie d'un commentaire
    Permettant d'afficher deux liens : un en tête du bloc message et un sur une image-bouton, fixe sur l'écran.

    ce code permet d'afficher les liens d'accès au formulaire à partir d'un nombre  de commentaires déjà déposés. (dans l'exemple: 3)
    Pour que le ou les liens s'affichent dans tous les cas, remplacer 3 par 0

    <style><!--  ...
    #saisie-comm { position: fixed;    right: 100px;    bottom: 150px;  }
    #comments-anchor a {font-size: 18px; }
     #comments-anchor {text-align: center;}
     .liencomm { border: 2px solid red;}
    --></style>

    <script>// <![CDATA[
    setTimeout("infocomm()",5000);     // ou setInterval("infocomm()",5000);
    var nb_element_de_class = 0;
    function compteurcomm() {
    nb_element_de_class = $$(".commentbody").length;
    if(nb_element_de_class >= 3) {
    $('comments-anchor').innerHTML =  "<p><a class=\"alert alert-warning liencomm\"  href=\"#commentform\">Lien  direct pour  \"AJOUTER UN COMMENTAIRE\"</a> <a href=\"#commentform\"></p><p><img id=\"saisie-comm\" src=\"http://ekladata.com/YeqHQ1DeFPTFp9CjRrdIBy8dXQ4/BTN2-commentaire.gif\" alt=\"\" width=\"100\" height=\"60\" /></a></p> <p>_</p>";
    }
    }
    // ]]></script>

    °

    Notes explicatives

    #saisie-comm { ..........  } Concerne la position de l'image bouton en bas de l'écran

    Ci-dessous, ce qui est surligné en jaune, c'est l'écriture JavaScript
    <script>// <![CDATA[
    setTimeout("infocomm()",5000);    
    function infocomm() {
    $('comments-anchor').innerHTML = "   ....html...  ";
    } 
    // ]]></script>

    setTimeout("infocomm()",5000);    lance l’exécution du code après  5 sec (5000ms)

    Dans le html, il faut remplacer les " par des \"  sinon ils seront considérés comme faisant partie du code Javascript.  Ci-dessous ce code html ( avec l'ajout des \ devant les " )
    <p><a class=\"alert alert-info\" href=\"#commentform\">Lien d'accés rapide pour  \"AJOUTER COMMENTAIRE\"</a> <a href=\"#commentform\"><img id=\"saisie-comm\" src=\"http://ekladata.com/YeqHQ1DeFPTFp9CjRrdIBy8dXQ4/BTN2-commentaire.gif\" alt=\"\" width=\"100\" height=\"60\" /></a></p>

    Surligné en bleu clair c'est pour le lien situé au début des commentaires.  Surligné en vert clair c'est pour l'image-lien en position fixe à l'écran.

    ⚡ Bien sûr il est possible de mettre dans le html qu'un des deux types de liens

     Variantes testées (celle de droite est simplifiée, il n'y a pas de condition de nombre de messages existant. ;  on peut encore la simplifier pour conserver un seul lien )

    Exemple1 code source module   Exemple2 code source module   Exemple3 code source module

    °°



    Vous devez être membre pour poster un message.