{"id":21206580,"url":"https://github.com/oncomouse/jquery-inline-footnotes","last_synced_at":"2025-08-23T03:04:42.553Z","repository":{"id":24164740,"uuid":"27554922","full_name":"oncomouse/jquery-inline-footnotes","owner":"oncomouse","description":"jQuery plugin to create inline plugins from Markdown-created HTML footnotes.","archived":false,"fork":false,"pushed_at":"2017-04-21T14:52:45.000Z","size":53,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-20T01:24:00.636Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oncomouse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-04T18:55:07.000Z","updated_at":"2025-08-11T04:27:57.000Z","dependencies_parsed_at":"2022-08-22T04:40:33.923Z","dependency_job_id":null,"html_url":"https://github.com/oncomouse/jquery-inline-footnotes","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/oncomouse/jquery-inline-footnotes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fjquery-inline-footnotes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fjquery-inline-footnotes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fjquery-inline-footnotes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fjquery-inline-footnotes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oncomouse","download_url":"https://codeload.github.com/oncomouse/jquery-inline-footnotes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncomouse%2Fjquery-inline-footnotes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271252911,"owners_count":24726916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T20:56:07.992Z","updated_at":"2025-08-23T03:04:42.525Z","avatar_url":"https://github.com/oncomouse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-inline-footnotes\n\nThis plugin is designed to convert footnotes generated by Markdown. It converts the automatically generated HTML (typically an ordered list with internal links) into a sidebar (as on sites like Grantland or Medium) for browsers big enough to show them and into inline footnotes that snap down, accordion-style, on mobile browsers and small screens.\n\nWith the sidebar footnotes, this plugin also handles collision detection. With this feature, two footnotes will not display overlapping one another.\n\nSee an example at [http://oncomouse.github.io/inline-footnotes.html](http://oncomouse.github.io/inline-footnotes.html).\n\nAlso, [this blog post](http://andrew.pilsch.com/blog/2014/12/05/stylish-markdown-footnotes-w-jquery/) discusses some of the reasoning behind this plugin.\n\n## Syntax Example\n\nAssuming you have some markdown that looks like this:\n\n```markdown\nSometext.[^foobar]\n\n[^foobar]: Footnote text!\n```\n\nI am assuming that the footnotes generated when Markdown converts to HTML look something like this:\n\n\n```html\n\u003cp\u003eSome text.\u003csup id=\"fnref:foobar\"\u003e\u003ca href=\"#fn:foobar\"\u003e1\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n\u003col\u003e\n\t\u003cli id=\"fn:foobar\"\u003e\u003cp\u003eFootnote text!\u003c/p\u003e\u003c/li\u003e\n\u003c/ol\u003e\n```\n\nFrom this style of footnote (which a number of Markdown engines generate), this plugin converts them into asides on large screens and accordion-style inline footnotes on smaller devices and screens.\n\n## Usage\n\nIn addition to jQuery, `jquery-inline-footnotes` depends on [`jquery-overlaps`](https://github.com/brandonaaron/jquery-overlaps), however the minified version in `dist/` already includes the plugin, so you don't have to include it separately. These can be installed using `bower` or downloaded separately. However you do it, you need to include some variation on the following code at the bottom of your document:\n\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"/dist/jquery.inline-footnotes.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  $(document).ready(function() {\n  \t$.inlineFootnotes();\n  });\n\u003c/script\u003e\n```\n\nYou also need to include the contents of `jquery.inline-footnotes.css`) somewhere in your site's CSS.\n\nAs the width of your content column may allow smaller screens to display sidebar footnotes, check the \"Configuration\" section below.\n\n## Configuration\n\nMuch of the position and appearance of the footnotes is controlled through CSS. There are both CSS and SASS versions of the default CSS code in `stylesheets/`. There are a lot of options to customize and you will probably need to change things in your site.\n\n**One very important note about configuration:** the default minimum window width of 1155 is the assumed minimum size of the window needed to display footnotes in the sidebar. *This value is probably different for your application*. You have to change this value in two places: in the CSS file, there is a media query (`@media screen and (min-width: 1155px)`) that controls the styles for accordion and sidebar footnotes. Additionally, the column width must be passed to the $.inlineFootnotes() function call as an option (see below). Also, see the examples for how to do this (below).\n\nThe following options (with their meaning in comments) may be passed in an options object to the $.inlineFootnotes() function at initialization:\n\n```javascript\n$.inlineFootnotes({\n\tcolumnWidth: 1155, // minimum width of the screen necessary to display footnotes\n\tmediaQuery: null, // copy \u0026 paste the media query from your CSS file, if you prefer (and have polyfilled window.matchMedia)\n\toverlapOffset: 5, // padding (in pixels) between overlapping footnotes\n\tfootNoteID: 'fn:', // base string of ID for footnotes\n\tfootNoteRefID: 'fnref:', // base string of ID for footnote reference links\n\tinlineFootNoteID: 'fnote_', // base string of the IDs of elements we are attaching\n\tmaxCollisionCycles: 8, // Number of iterations of collision detection to run, may need to increase.\n\tDEBUG: false // Display debugging information?\n});\n```\n\n## Usage Examples\n\nAs mentioned above, you will most likely need to change the minimum window size at which footnotes display in the sidebar. Below is an example for doing so, in which the minimum size is changed from the default (1155px) to a smaller size (960px).\n\nIn `stylesheets/jquery-inline-footnotes.css`, the media query (`@media screen and (min-width: 1155px) {`) is changed to\n\n```css\n@media screen and (min-width: 960px) {\n\n...\n\n}\n```\n\nAdditionally, the plugin must be initialized using one of the following two options:\n\nIn the first (easiest), the edited media query is simply passed to the function:\n\n```javascript\n\u003cscript\u003e\n\t$(document).ready(function(){\n\t\t$.inlineFootnotes({\n\t\t\tmediaQuery: '@media screen and (min-width: 960px)'\n\t\t})\n\t});\n\u003c/script\u003e\n```\n\nThis solution is simple (copy \u0026 paste), but does make use of the `window.matchMedia`, [which is not supported](http://caniuse.com/#feat=matchmedia) in older browsers. You can, however, [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) matchMedia by including [Modernizr](http://modernizr.com/) in your application (include `\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js\"\u003e\u003c/script\u003e` in your document head to add this).\n\nYou can also rely on jQuery to calculate window width (assuming you are using a pixel value for minimum width) in the following example:\n\n```javascript \n\u003cscript\u003e\n\t$(document).ready(function(){\n\t\t$.inlineFootnotes({\n\t\t\tcolumnWidth: 960\n\t\t})\n\t});\n\u003c/script\u003e\n```\n\nThis version also works cross browser, so long as your minimum window width is calculated using pixels and not `rem` or `em` or `%` units.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncomouse%2Fjquery-inline-footnotes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foncomouse%2Fjquery-inline-footnotes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncomouse%2Fjquery-inline-footnotes/lists"}