bigfoot

Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript.

Le constat de l’auteur du script :

Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de cliquer sur un tout petit nombre qui te renvoie quelque part vers le bas de la page, tu lis la note que tu cherchais, puis tu cliques de nouveau sur un petit nombre pour remonter là où tu étais dans la page.

La solution proposée par bigfoot :

  • le bloc des notes en bas de page est masqué ;
  • les liens vers les notes de bas de page sont remplacés par des boutons afin de les rendre plus facile à cliquer ;
  • au clic, le contenu de la note apparaît dans une infobulle directement à côté du bouton, ce qui évite le défilement vers le bas de la page ;
  • l’infobulle est redimensionnée et positionnée automatiquement pour assurer une lecture confortable de son contenu (même sur petit écran).

De plus, les notes de bas de page sont bien visibles lors de l’impression.

Voici un aperçu du rendu d’une note ouverte dans une infobulle :

Copie d'écran montrant l'apparence d'une bulle d'aide affichant une note de base de page avec bigfoot

Le plugin agit automatiquement sur les notes des pages de votre site, aucune configuration ou adaptation n’est nécessaire. Simple et efficace :)

Discussion

16 discussions

  • Hello,
    Je voulais avoir le joli bouton bigfoot mais en même temps garder les notes visibles en bas des articles (oui je fais ma compliquée mais je trouve que c’est plus facile pour le lecteur)

    Pour info (et pour référence pour y penser lors d’une future mise à jour du plugin) j’ai réussi en modifiant :

    bigfoot_pipelines.php / commenter la ligne
    /*jQuery('div.notes').hide();*/
    pour voir le titre h2 des notes

    bigfoot.js / commenter la ligne
    //  $relevantFootnote.addClass("footnote-print-only");

    perso.css / ajout de :
    .notes { max-width: initial;}

    dd

    Répondre à ce message

  • 3

    bonjour

    j’ai mis ce plugin ce matin (spip 3.2 squelette escal

    on ne voit pas le bouton, quelle que soit la couleur du fond de page pour article

    plus noir ou color xx serait bien

    merci

    • Salut, tu peux très bien personnaliser la couleur pour tes besoins depuis un fichier perso.css ou autres. Quelle est l’url de la page où on peut voir le plugin en action ?

    • pour l’instant je fais mes essais en local
      je vais faire un article dans un site en ligne..
      j’enverrai le lien ensuite

    • je vais faire un article en ligne

    Répondre à ce message

  • Pour info après changement des bornes

    compatibilite=« [3.0.0 ;3.2.*] »

    RAS

    Répondre à ce message

  • 7

    Bonjour,

    Je viens de m’apercevoir d’un souci à partir du 10e renvoi en bas de page, sur un article. Je n’avais pas vu ça avant.

    En gros, que ce soit en partie publique ou privée, est affiché un [10] au lieu du petit bouton rond à cliquer, et le clic ne donne rien. Même chose pour les suivants (11, 12...).

    Testé sur plusieurs articles, plusieurs navigateurs, mises à jour faites, etc.

    Je suis en SPIPr / Sarkaspip reloaded.

    Merci
    Christophe

    • Salut, comme toujours, pas facile de t’aider sans lien vers la page qui pose problème...

    • Oups, désolé.

      Voir cet article.

      Descendre sur octobre.

      Merci.

    • Ha oui, étrange, peux-tu partager le texte source de ton article pour que je tente de reproduire le bug de mon côté ? (en pièce jointe directement ici)

    • Pas de souci.

      Voici les liens vers l’article en question (article1) et vers un deuxième, ancien, sur lequel j’ai ajouté vite fait plein de renvois, plus court, pour vérifier.

      Je suis limité à l’ajout de documents gif/jpg et png apparemment, donc voici les liens pour les charger :

      article 1
      article 2

    • Salut, je viens de tester chez moi avec les deux textes que tu m’as filé, et ça fonctionne très bien... Amha, il va falloir que tu désactives tes plugins un par un pour trouver le fautif, puis que tu nous indique lequel est responsable.

    • Arf, je les ai tous testés un par un, et je n’ai aucun candidat :-(

    • Pour info, ce bug est corrigé dans la dernière version du plugin cf https://contrib.spip.net/bigfoot#forum491866

    Répondre à ce message

  • 8

    Il semblerait qu’il y ai un Bug.
    Le plugin ne foncitonne plus à partir de la note numéros 10. :/
    C’est embêtant car je fait un site avec des article comportant beaucoup de note à chaque fois.

    • Il semblerait qu’il manque une info dans ton message... Comme toujours, il est bien de donner l’url de la page affichant le bug afin qu’on puisse le confirmer et t’aider :)

      chez moi ça marche © https://labo.eliaz.fr/article135.html

    • Oups
      http://casalonga-test.ovh/spip.php?article2

      j’ai désactivé en travaux pour te montrer, car le site est en dev.
      Mais si tu me dis que chez toi cela marche. C’est étrange. Je vais essayer de reprendre à 0 et trouver d’ou viens mon problème, pour le moment le site ultra basique, donc si cela viens de moi, je devrais pouvoir trouver pourquoi sans trop de difficulté j’éspère.

    • Et rien à voir mais je le signale pour info , sur la page que tu m’as mis en exemple il y a un petit souci avec la taille des infobulles ; sur mac (chrome et firefox, elle est trop étroite et ne devient lisible que si on redimensionne la fenetre du navigateur.)

    • Bon j’ai réinstallé un spip tout beau tout propre en local, avec juste bigfoot, et je constate quand même le problème. Au dela de la note 9 cela ne semble plus fonctionner.

    • Tu peux passer sur irc pour qu’on en discute en direct, ça sera plus simple : http://irc.spip.net/

    • Ok j’ai trouver d’ou viens le problème.

      dans le fichier bigfoot_pipeline.php
      Il faut remplacer la ligne 30 par :

      	anchorPattern: /(nb(\d)*|footnote|appendix)/gi,

      Et hop tout rentre dans l’ordre.
      Il ne reste plsu qu’à régler le Bug CSS dans chrome de la bare de défilment, mais ceci n’est pas lié au plugin SPIP ; mais bien à bigfoot.js lui même.

    • Après discution avec marcimat et cy_altern ;
      /(nb(\d)+(footnote|appendix))/gi

      Serait plus approprié

    • Super, merci à vous trois pour le signalement et le correctif qui est dispo dans la version 1.0.6 du plugin cf : https://zone.spip.org/trac/spip-zone/changeset/103828

      Je regarde pour réparer la lib bogfoot avec jQuery 3 dès que possible. en fait ça fonctionne très bien :p

    Répondre à ce message

  • 4

    Y a t’il moyen d’utiliser la syntaxe permettant de forcer le libellé de l’appel de note ?
    Il semblerait que cela ne fonctionne pas avec ce plugin ?

    • Salut, quelle syntaxe mentionnes-tu ?

    • La syntaxe permettant de forcé le libellé
      Par exemple :

      Lorem ipsum dolor sit amet[[<*>faux texte.]].
    • Non je ne pense pas, et risque de nécessiter pas mal de modifications à ajouter, mais tu peux tenter le coup et proposer un patch si tu es motivé.

    • Ok dommage. Je le ferai bien hélas, ce n’est pas dans mes compétences. A default je vais bidouiller le CSS (ça je maitrise) pour supprimer ce numéros et le remplacer par une icône ; au moins ce sera déjà un peu mieux.

    Répondre à ce message

  • Pour info après changement des bornes

    compatibilite=« [3.0.0 ;3.2.*] »

    RAS

    Répondre à ce message

  • 3

    Plugin intéressant.
    Je suis en spip 3.11. Il me semble que ce plugin n’est pas bien compatible avec Dictionnaire.
    Les 2 plugins peuvent être activés mais l’affichage de l’infobulle de bigfoot est bizarre et illisible.
    Tout rentre dans l’ordre si Dictionnaire est désactivé.
    Y a t-il une solution ? Merci

    • Salut, peux-tu nous donner l’url d’une page qui montre le problème afin qu’on puisse t’aider ?

    • Il s’agit d’un bug d’affichage, reproductible dans la partie privée (donc indépendant des squelettes).
      Il se produit uniquement lorsque l’on met dans la note un mot ou une abréviation définie dans le dictionnaire.
      Ci joint un exemple

    • Ha oui, sympa comme bug ^^ La version 1.0.3 devrait corriger cela, cf :

      http://zone.spip.org/trac/spip-zone/changeset/98836

      Merci pour le signalement :)

    Répondre à ce message

  • 4
    jeanluc

    Bonjour b_b

    Je me suis aperçu d’un petit bug : quand on active le plugin, l’aide en ligne n’apparait plus complètement... Dans la fenêtre qui s’ouvre en cliquant sur l’aide de l’espace privé, n’apparaissent plus que la colonne de gauche avec les titres des chapitres. Le texte de droite a disparu.
    Je pense que cela vient d’un conflit entre les css du plugin et celui de l’aide en ligne.

    Sans le plugin actif, la div avec le contenu de l’aide est ainsi :

    <div id="contenu-aide" class="contenu-aide" lang="fr" style="position:relative;margin-left:220px;">

    Avec le plugin actif, la div avec le contenu de l’aide devient :

    <div id="contenu-aide" class="contenu-aide footnote-processed footnote-print-only" lang="fr" style="position:relative;margin-left:220px;">

    avec donc la classe « footnote-print-only » définie ainsi dans le css :

    .footnote-print-only {
        display: none !important;
    }

    Je crois que c’est une classe définie dans le plugin...
    J’ai fais les tests avec et sans le plugin actif (après avoir vidé le cache) et cela semble lié...
    Avez vous le même pb que moi ?

    Merci d’avance pour votre réponse.

    • Salut Jean Luc, oui je confirme le bug, je règle ça au plus vite et je poste ici dès que c’est corrigé. Merci pour le signalement :)

    • Et voilà, la version 1.0.2 devrait régler le problème, cf :

      http://zone.spip.org/trac/spip-zone/changeset/96865

      La mise à jour sera devrait être dispo dans quelques heures.

    • jeanluc

      Merci b_b

      Cela règle bien le pb... Juste pour ma curiosité personnelle... tu peux expliquer ce qu’il se passait ?

      Merci d’avance

    • De rien, comme indiqué dans le log de commit que je pointais ci-dessus, la regex de détection des liens vers les notes était trop permissive, du coup elle « attrapait » par erreur un des liens situé dans la fenêtre d’aide, et patatra :p

    Répondre à ce message

  • Sébastien

    Bonjour et bravo pour cet instrument bien pratique.
    Pourtant, faute de pouvoir définir la couleur de la bulle ou plutôt, la couleur de l’appel de la bulle, ce que la bulle est censée expliquer risque bien de n’être jamais vu.
    Y aurait-il possibilité de définir ces éléments, appel et bulle ?
    Merci de vos informations,
    Sébastien, un peu mauvais voyant...

    oh, je voulais ajouter une capture d’écran mais je n’y arrive pas.
    mon serveur est souvent un peu faiblard en fin de w-e.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 11 novembre 2017