Bonjour,
J'ai essayé de trouver une solution au « problème » des notes de bas de page en m'inspirant du billet de Liza.
Le script fonctionne ainsi :
- Un clic sur un appel de note crée un clone de la note sous forme de popup centrée sur la page
- Le popup est effacé par un double clic
- La liste des notes reste affichée de manière repliée à la fin de la page
- Si Javascript ou la fonction Translate n'est pas prise en charge, l'appel de note renvoie vers la note en fin de page
Le tout se décompose comme ça :
- Le lien d'appel à la note, de classe "anchor", avec un href pointant vers la note, et avec un id spécifique.
Ex: <a class="anchor" href="#ftn2" id="bodyftn2">2</a>
- La note/popup est comprise dans un div de classe "endnote", avec le même id que l'appel de note auquel est rajouté "-popup"
Ex: <div class="endnote" id="bodyftn2-popup">insérez note ici</div>
- À l'intérieur de ce div, un lien href pointant vers l'appel de note, avec pour id celui appelé par l'appel, permet de remonter à l'endroit de l'appel de note
Ex: <a href="#bodyftn2" id="ftn2">2</a>
- Un lien de classe "switchbutton" juste avant les notes de bas de page pour les déplier/replier
Ex: <a class="switchbutton">Notes</a>
Code Javascript :
Code:
function ftn_popup() {
/* clone the footnote and append it to the document */
var p = document.getElementById(this.id + '-popup').cloneNode(true);
document.getElementById(this.id + '-popup').parentNode.appendChild(p);
/* show the popup and change its style */
p.style.display = 'block';
p.className = 'popup';
ftn_refresh ();
// prevent displaying the popup more than once
this.removeEventListener('click', ftn_popup, true);
// connect the dismiss functionto the popup
p.addEventListener('dblclick', ftn_dismiss, true);
}
function ftn_dismiss() {
// remove the cloned footnote (the popup)
document.getElementById(this.id).parentNode.removeChild(this);
ftn_refresh ();
// reconnect the popup function ftn_to the footnote anchor
var anchorid = this.id.replace("-popup", "");
var a = document.getElementById(anchorid);
a.addEventListener('click', ftn_popup, true);
}
/* Fold/unfold function */
function ftn_display(toggle) {
var p = document.getElementsByClassName('endnote');
for (var i=0; i < p.length; i++) {
if (toggle == "show") {
p[i].style.display = 'block'; // display the endnote
}
else if (toggle == "hide") {
p[i].style.display = 'none'; //hide the endnote
}
}
ftn_refresh ();
}
/* translate the popups to their correct place */
function ftn_refresh () {
var p = document.getElementsByClassName('popup');
for (var i=0; i < p.length; i++) {
// to what anchor the popup is attached
var anchorid = p[i].id.replace("-popup", "");
var a = document.getElementById(anchorid);
var top_of_anchor = a.offsetTop;
// (x,y) translation)
var new_x = (document.body.clientWidth - p[i].offsetWidth) / 2;
var new_y = p[i].offsetTop - top_of_anchor + 40;
var property = getTransformProperty(p[i]);
p[i].style[property] = 'translateY(-' + new_y + 'px) translateX(+' + new_x + 'px)';
}
}
/* check the current state of the endnotes */
function ftn_checking () {
var p = document.getElementsByClassName('endnote');
for (var i=0; i < p.length; i++) {
if (p[i].style.display == 'block') {
return "hide"; // endnotes are unfolded, hiding them
}
}
return "show"; // endnotes are folded, showing them
}
/* Fold/unfold button */
function ftn_switching () {
toggle = ftn_checking();
ftn_display(toggle);
}
/* browser frakkin compatibility */
function getTransformProperty (element) {
var properties = [
'transform',
'WebkitTransform',
'MozTransform',
'OTransform'
];
var p;
while (p = properties.shift()) {
if (typeof element.style[p] != 'undefined') {
return p;
}
}
return false;
}
/* init */
function ftn_init () {
var ftn_anchors = document.getElementsByClassName('anchor');
// if no transform is available, just allow Endnotes folding/unfolding
if (getTransformProperty(ftn_anchors[0]) != false) {
/* Connect the anchors buttons */
for (var i=0; i < ftn_anchors.length; i++) {
ftn_anchors[i].removeAttribute("href"); // remove the original link to the endnote
ftn_anchors[i].addEventListener('click', ftn_popup, true);
}
/* Hide endnotes on load */
ftn_display('hide')
}
}
// Connect the switchbutton to fold/unfold the endnotes
var ftn_switchbutton = document.getElementsByClassName('switchbutton');
for (var i=0; i < ftn_switchbutton.length; i++) {
ftn_switchbutton[i].addEventListener('click', ftn_switching, true);
}
// init the script on document load
window.addEventListener("load", ftn_init, false);
window.addEventListener("resize", ftn_refresh, false);
Le CSS doit comporter les éléments suivants (à l'aspect modifiable) :
Code:
a.switchbutton {
font-size: 145%;
font-variant: small-caps;
text-align: left;
color: #075698;
text-decoration: none;
border-bottom: 1px dotted #075698;
}
a {
color: #075698;
text-decoration: none;
border-bottom: 1px dotted #075698;
}
.endnote {
display: block;
color: inherit;
background:transparent;
border: 0px;
-moz-border-radius: 0px;
-webkit-border-radius:00px;
border-radius: 0px;
padding: 0px 15px 0px 15px;
text-align: justified;
}
.popup {
/* don't change display: */
width: 85%;
color: white;
background: #075698; /* default background for browsers without gradient support */
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(top, #2e88c4, #075698);
background:-o-linear-gradient(top, #2e88c4, #075698);
background:linear-gradient(top, #2e88c4, #075698);
padding: 5px 15px 5px 15px;
text-align: justified;
}
.popup a {
color: white;
text-decoration: none;
border-bottom: 1px dotted white;
Un exemple de XHTML pour montrer où utiliser les classes et id :
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<link href="../Styles/style.css" media="all" rel="stylesheet" type="text/css" />
<title>Mises - L’action humaine</title>
<style type="text/css">
/*<![CDATA[*/
#content h2:before {content: ""}
/*]]>*/
</style>
</head>
<body>
<h2 id="toc0"><a id="ch00sec00"></a>Introduction</h2>
<h3 id="toc1"><a id="ch00sec01"></a>Économie et praxéologie</h3>
<p>Pendant longtemps, on ne s’est pas avisé du fait que le passage de la théorie classique de la valeur à la théorie subjectiviste de la valeur faisait bien davantage que de substituer une théorie plus satisfaisante de l’échange sur le marché, à une théorie qui était moins satisfaisante. La théorie générale du choix et de la préférence va loin au-delà de l’horizon qui cernait le champ des problèmes économiques, tel que l’avaient délimité les économistes depuis Cantillon, Hume et Adam Smith jusqu’à John Stuart Mill. C’est bien davantage qu’une simple théorie du « côté économique » des initiatives de l’homme, de ses efforts pour se procurer des choses utiles et accroître son bien-être matériel. C’est la science de tous les genres de l’agir humain. L’acte de choisir détermine toutes les décisions de l’homme. Et faisant son choix l’homme n’opte pas seulement pour les divers objets et services matériels. Toutes les valeurs humaines s’offrent à son option. Toutes les fins et tous les moyens, les considérations tant matérielles que morales, le sublime et le vulgaire, le noble et l’ignoble, sont rangés en une série unique et soumis à une décision qui prend telle chose et en écarte telle autre. Rien de ce que les hommes souhaitent obtenir ou éviter ne reste en dehors de cet arrangement en une seule gamme de gradation et de préférence. La théorie moderne de la valeur recule l’horizon scientifique et élargit le champ des études économiques. Ainsi émerge de l’économie politique de l’école classique une théorie générale de l’agir humain, la <em>praxéologie</em><a class="anchor" href="#ftn1" id="bodyftn1">1</a>. Les problèmes économiques ou catallactiques <a class="anchor" href="#ftn2" id="bodyftn2">2</a> sont enracinées dans une science plus générale et ne peuvent plus, désormais, être coupés de cette connexité. Nulle étude de problèmes proprement économiques ne peut se dispenser de partir d’actes de choix ; l’économie devient une partie — encore la mieux élaborée jusqu’à présent — d’une science plus universelle, la praxéologie.</p>
<h3 id="toc2"><a id="ch00sec02"></a>Le problème épistémologique d’une théorie de l’agir humain</h3>
<p>Dans la nouvelle science, tout paraissait faire problème. C’était une étrangère dans le système traditionnel des connaissances ; les gens étaient perplexes, ne sachant comment la classer et lui assigner son domaine propre. Mais d’autre part, ils étaient convaincus que l’introduction de l’économie dans le catalogue du savoir n’appelait pas un réarrangement ou un élargissement du schéma général. Ils considéraient leur catalogue systématique comme complet. Si l’économie ne s’y insérait pas commodément, la faute ne pouvait en être imputée qu’à un traitement inadéquat appliqué par les économistes à leurs problèmes.</p> <h3 id="toc4"><a id="ch00sec04"></a>Résumé</h3>
<p>Il fallait formuler ces remarques préliminaires afin d’expliquer pourquoi ce traité place les problèmes économiques à l’intérieur du cadre général d’une théorie générale de l’activité humaine. Au stade actuel, tant de la pensée économique que des discussions politiques concernant les problèmes fondamentaux d’organisation sociale, il n’est plus possible d’isoler l’étude des problèmes proprement catallactiques. Ces problèmes-là ne sont qu’un compartiment d’une science générale de l’agir humain, et doivent être traités comme tels.</p>
<p><a class="switchbutton">Notes</a></p>
<div class="endnote" id="bodyftn1-popup">
<p class="Footnote"><a class="FootnoteSymbol" href="#bodyftn1" id="ftn1">1</a>Le terme <em>praxéologie</em> a été employé pour la première fois par Espinas en 1890. Voir son article « Les origines de la technologie », <em>Revue philosophique</em>, xv<sup>e</sup> année, xxx, 114–115, et son livre publié à Paris, en 1897, avec le même titre.</p>
</div>
<div class="endnote" id="bodyftn2-popup">
<p class="Footnote"><a class="FootnoteSymbol" href="#bodyftn2" id="ftn2">2</a>Le terme <em>Catallactics or the Science of Exchanges</em> fut employé en premier lieu par Whately. Voir son livre <em>Introductory Lectures on Political Economy</em>, Londres, 1831, p. 6.</p>
</div><script src="../Misc/popup.js" type="text/javascript">
</script>
</body>
</html>
Théoriquement ça marche avec toutes les liseuses basées sur Webkit, Firefox3.5+ et Opera. J'ai testé dans la Visionneuse de Calibre. Avec FBReader on a un affichage de type "notes de fin".
(inb4 c'est aux liseuses de se débrouiller pour afficher les notes.)