bigfoot

Published : 16 June 2015 – updated on 21 December 2021 – by b_b – 136 commentaires

1
2
3
4
5
15 Votes

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

5 years 1 year 3 months Without limit
par date
Filter

27 discussions

  • 6
    Essaillon

    Bsr,

    Suite au passage à SPIP 4.1.5, le plugin ajoute 2 bulles près du mot à anoter et rien en bas de page à côté de “Notes;”

    Et le tooltip est affiché en double, superposés et légèrement décalé.

    Dommage, c’était très élégant.

    • b_b

      > Suite au passage à SPIP 4.1.5, le plugin ajoute 2 bulles près du mot à anoter

      Je ne reproduis pas en 4.2, quelle est l’adresse de la page où on peut observer le bug pour t’aider plus ?

      > et rien en bas de page à côté de « Notes ; »

      Ça c’est le comportement normal du plugin :p

    • b_b

      Ta page comporte des erreurs javascript, possible que le problème vienne de là, il faudrait les corriger pour investiguer plus en détail :\

    • spipfactory

      Bonjour,

      j’ai donc essayer d’épurer au maximum

      j’ai monter un site test https://agha.spipfactory.fr/?test-numero-2

      et a force de chercher, il semblerais que c’est la maj du plugin saisise qui provoque le dedoublement

      test effectué sur la mutualisation avec Escal actif qui necessite
      agenda ; svpstats ; nospam ; saisies ; verifier

      me reste encore a tester bigfoot + saisies sur un spip seul ........ pour confirmer la chose

    • spipfactory

      Après qq tests, c’est le bloc du mini-calendrier qui provoque ce double affichage.

      Il doit donc y avoir un truc qui se monte dessus entre les 2 plugins.

      Mais quoi ?

      une idée ?

    • spipfactory.fr

      ok bon la seul solution trouvé et un pansement en faisant une régle css :

      /* Pas de double occurence pour le plugin bigfoot */
 
span.littlefoot-footnote__host:nth-child(2) > span:nth-child(1) > button:nth-child(1) {
display : none
}

    Reply to this message

  • 2
    pipol

    Bonjour,

    je constate que le plugin ne fonctionne pas bien sur un smartphone avec IoS.
    L’info bulle apparait en bas de page, puis repars immédiatement.

    Est ce que quelqun d’autre que moi à déjà constaté cela ? Cela ressemble être un souci de CSS ?

    Merci d’avance.

    • b_b

      Ha, je pensais que ça venait du fait que la version de la librairie littlefoot qu’on utilise dans le plugin est assez ancienne, mais ça ressemble à ce bug https://github.com/goblindegook/littlefoot/issues/57

      Quelle est l’adresse de la page qui expose le problème ?

      Dans tous les cas, je ferai une mise à jour de la librairie dans une prochaine version du plugin.

    • pipol

      Ok super, je suivrai l’actu du plugin alors.

      Mais j’en conclus que pour toi ce bug n’apparait pas forcement ? Si c’est le case c’est déjà une grosse information pour moi.
      Mon site comporte pas mal de JS bidouillé plus ou moins bien par mes soins, il est tout à fait possible dans ce cas, que ce soit lié à mon propre code.

      Tu peux voir le bug en action sur cette page:
      https://www.upc-casalonga.eu/ en cliquant sur la fleche orange dans le premier encart.

    Reply to this message

  • 3
    robomatix

    Merci pour ce plugin.

    Je vois que le texte du tooltip a perdu la mise en forme : les italiques etc. On peut récupérer ça ?

    Merci,

    Gilles L.

    • b_b

      Je ne reproduis pas, chez moi le contenu des tooltips affiche bien l’italique, les images, etc.

      Quelle est l’adresse de la page en question ? Quel est le squelette utilisé pour produire le bug ?

    • robomatix

      Merci pour ta réponse. C’est donc possible.
      Le site est actuellement en dev avec le plugin travaux activé, donc accessible seulement pour les admins !
      Comme tu me dis que c’est possible, je vais chercher un peu tout seul. Lorsque j’aurais des billes pour discuter, je reviendrais ;-)
      Encore merci !

    • robomatix

      Désolé pour le bruit, mais la personne qui m’a signalé le problème n’avait vérifié qu’un article dans lequel les notes n’ont pas de mise en forme.

      Encore désolé.

      Bonne journée à tous.

      Gilles L.

    Reply to this message

  • 1
    François Daniel Giezendanner

    Bonjour
    DD souhaite garder les notes visibles en bas des articles. Dans cette ligne de réflexion, l’auteur du plugin pourrait-il envisager une option qui ferait que bigfoot s’appliquerait à tous les article sauf à ceux que l’on marquerait et qui continuerait à fonctionner avec les notes de bas de page ?
    Salutations cordiales.
    FDG

    • b_b

      Salut, non, le plugin se veut simple et le restera j’espère. Il a été fait pour améliorer l’usage des notes de base de page, si le fonctionnement qu’il propose ne convient pas, autant ne pas l’utiliser du tout plutôt que sur certaines pages.

    Reply to this message

  • 7
    DD

    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

    • Maïeul

      pas hyperpropre de modifier directement le plugin, surtotu que que si c’est dans un pipeline tu peux modifier toi même après coup, en créant ton propre pipeline.

    • DD

      D’accord mais je ne sais pas de quel pipeline il s’agit.

      PS en parlant d’espace : est-ce possible de coller l’appel de note au texte qui le précède pour empêcher qu’il se retrouve à la ligne tout seul (en fonction de la largeur du texte)

    • Maïeul

      bah heu... insert_head, vu que ce c’est là qu’ai le code dans bigfoot_pipelines.php

      pour l’appel de note et les espaces, normalement si tu colle directement dans le texte, ca suit.

    • JeanLuc

      Bonjour Maieul
      Je ne comprend pas ce qu’il faut faire pour garder les notes visibles en bas de page...
      Il faut désactiver dans insert_head la ligne présente dans bigfoot_pipelines.php :

      jQuery('div.notes').hide();

      Tu peux nous dire dans quel fichier faut-il ajouter quoi?
      Merci d’avance pour ton aide...

    • DD

      Bonjour,
      Je n’arrive plus à rien non plus avec les dernières versions de bigfoot. Par défaut lorsque je survole un numéro de note j’ai “voir la note x” et lorsque je clique dessus je vois juste rien (capture jointe).
      et les notes ne sont affichées nulle part sur la page..
      Donc je reste avec bigfoot 3.06 qui fonctionne comme je veux.
      dd... perdue dans le progrès

    • b_b

      Tu veux de l’aide ou juste signaler que tu vas rester sur l’ancienne version ?

      Si tu veux de l’aide, aide nous en nous donnant un lien vers la page qui expose le problème stp.

      b_b... perdu dans le SAD sans lien

    • DD

      Hello,
      j’ai pas de site de test accessible pour l’instant. Je reviendrai ici quand ce sera possible... en 2020 ?
      merci

    Reply to this message

  • 9
    Abel

    Bonjour, et merci pour cet excellent plugin!

    Quand je l’installe sur mon site le texte dans la bulle est précédé d’un paragraphe vide <p></p> ce qui crée un espace disgracieux en début de bulle (en bas aussi).

    Sauriez-vous comment me débarrasser de ces balises génantes?

    Merci,
    Abel

    Reply to this message

  • 1
    Maïeul

    Depuis le passage à littlefoot, les notes de bas de page ne sont pas detectés si on est en url arbo....

    Reply to this message

  • 7
    DD

    Le passage à la version 1.3.0 SVN [117561] fait disparaître les notes, la fenêtre est vide :

    Site sous SPIP 3.2.4 [24285] avec SPIPr-dist

    • Maïeul

      heu... “chez moi ca marche”. tu pourrais m’envoyer par mail le contenu de ton article?

    • Maïeul

      question pratique : quelle version de bigfoot avait tu avant?

    • DD

      En investiguant cela semble du à la règle inline :
      .littlefoot-footnote__content {max-height:0};

    • Maïeul

      Je vois pas ce que la version 1.3.0, qui n’a pas changé cela, viendrait faire.

    • DD

      Alors je viens de faire un test en passant un autre site de la version 1.1.1 à 1.3 de ce plugin.
      Et bien avec la version 1.3 j’ai l’erreur sur Firefox mais avec Chromium cela fonctionne
      (avec la 1.1.1 cela fonctionnait pour les 2 navigateurs).
      Je continue mes tests car c’est peut-être un problème chez moi.
      La page testée : https://www.admrduhautleon.com/aide-aux-seniors

    • Maïeul

      chez moi, avec firefox, cette page marche. cache navigateur?

    • DD

      Non j’ai tout vidé, possiblement un conflit avec un plugin Firefox.

    Reply to this message

  • 4
    JeanLuc

    Bonjour
    Je viens de passer mon site en 3.2. Tout fonctionne bien.
    Juste un petit bug étrange, dites-moi si vous arrivez à le reproduire :

    Créez un article avec une note dans le texte de l’article.
    Enregistrez le. Pas de souci, la note apparait correctement dans la page de visualisation de l’article de l’espace privé.

    Cliquez sur “modifier l’article”. Enregistrez le à nouveau sans rien changer.
    Et là, la note que vous avez créée apparait plusieurs fois....
    Si on crée plusieurs notes, le phénomène se répète (voir la photo jointe).
    Si vous rafraichissez la page, le bug disparait.

    Ce bug n’apparait que dans l’espace privé.

    Etrange non ?

    • b_b

      Salut et merci pour le signalement, la version 1.1.1 devrait corriger ça, cf https://zone.spip.org/trac/spip-zone/changeset/115983

    • JeanLuc

      C’est bon. C’est corrigé avec la nouvelle version 1.1.1.
      Merci ;-)

    • JeanLuc

      Bonjour b_b
      Le texte apparaissant au survol d’une note est “See Footnote X”.
      Ce texte est défini en “dur” dans la fonction insert_head du pipeline.

      A part surcharger le fichier “bigfoot_pipelines.php” (en en faisant une copie dans le dossier “squelettes”), y aurait-il un moyen plus simple de modifier ce texte une bonne fois pour toutes sans avoir à vérifier la compatibilité de la surcharge à chaque amélioration de version du plugin ?

      Merci d’avance pour ta réponse.

    • Maïeul

      Bah deja c’était un pipeline, donc tu aurais pu brancher ton pipeline après pour faire la correction.

      Cela étant, avec la version 1.3.0 du plugin, c’est devenu une chaîne de langue (en français du coup). Redefinissable comme n’importe quelle chaîne de langue.

    Reply to this message

  • Pascal

    Bonjour,
    J’aimerais utiliser ce plugin... hélas je voudrais de nombreuses notes dans le texte du plugin “Encart” afin de ne pas avoir à les écrire chaque fois.
    et ça ne marche pas
    Merci de votre aide
    Cordialement

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom