We Keep Coding

FiveThirtyEight style in-text footnotes for bookdown

I'm creating a project using {bookdown}, and I would like to format my footnotes to appear directly in the text when the superscript is selected, as happens in FiveThirtyEight articles (see here for an example). The idea is that when a user clicks on the footnotes, the paragraph expands to show the footnote text, and then compresses back to normal when the footnote is closed.
I have found a few resources where this is implemented:
Stackoverflow question here
https://medium.com/#bnjmnbnjmn/in-line-notes-with-only-html-css-f181c5ceef59
https://www.viget.com/articles/of-note-better-text-annotations-for-the-web/
However, these solutions all seem to assume that the actual footnote text is within a <span> tag that has an associated class. However, this does not appear to be the case for HTML footnotes generated from {bookdown} and Pandoc. The HTML looks like this:
<p>
"Figures and tables with captions will be placed in "
<code>
"figure
</code>
" and "
<code>
"table"
</code>
" environments, respectively."
<sup>1</sup>
</p>
<div class="footnotes">
<hr>
<ol start="1">
<li id="fn1">
<p>
"Here is a fancy footnote."
"<-"
</p>
</li>
</ol>
</div>
So not only are the footnotes placed in an unclassed <p> tag, rather than a classed <span> tag, the footnotes themselves are also in a completely separate <div>, rather than appearing within the same tag as the rest of the text, as is the case in the linked examples.
I've created a bookdown reprex to try and make this work with a combination of CSS and javascript, based on the linked examples above. The GitHub repo is here, and the rendered output here. I've successfully hidden the footnotes at the bottom of the page, but have not been able to get the footnotes to display in-text when the footnote superscript is selected.
Is there a way to style footnotes in this way using {bookdown}? Or is this a constraint of Pandoc?

Pandoc gives you full control over the the output via filters. The following is a Lua filter which uses the HTML/CSS method to hide/show footnotes. See this R Studio article on how to use Lua filters with bookdown.
-- how many notes we've seen yet.
local note_number = 0
local fn_opening_template = [[<span id="fn-%d"><!--
--><label for="fn-%d-toggle"><sup>%d</sup></label><!--
--><input type="checkbox" hidden id="fn-%d-toggle"/>
]]
local fn_close = '</span>'
local style_css = [[<style>
input[type=checkbox][id|=fn] + span {display:none;}
input[type=checkbox][id|=fn]:checked + span {display:block;}
</style>
]]
-- Use custom HTML for footnotes.
function Note (note)
note_number = note_number + 1
local fn_open = fn_opening_template:format(
note_number, note_number, note_number, note_number)
return {
pandoc.RawInline('html', fn_open),
pandoc.Span(
pandoc.utils.blocks_to_inlines(note.content),
pandoc.Attr(string.format('fn-%d-content', note_number))
),
pandoc.RawInline('html', fn_close)
}
end
function Meta (meta)
local header_includes = meta['header-includes']
-- ensure that header_includes is a MetaList
if not header_includes then
header_includes = pandoc.MetaList{}
elseif header_includes.t ~= 'MetaList' then
header_includes = pandoc.MetaList {header_includes}
end
table.insert(
header_includes,
pandoc.MetaBlocks{pandoc.RawBlock('html', style_css)}
)
meta['header-includes'] = header_includes
return meta
end

Implement a JS button - How to copy just the code and not the comment

Hello everyone and happy new year.
I do have a question regarding how to implement a little (I think not sure) JavaScript in order to copy the code inside a box, so user can directly paste into their shell.
The problem is that, the code inside the box comes from the MySQL DataBase, contains comments/descriptions/paragraphs/regular text.
You will understand what I am trying to say, please the example below:
Example, look at the command line from my website: http://www.clihelp.org/WI00261/see-the-status-of-the-w32time-service
As you can see from the page, the text inside the box titled Command Line Script could be easy to implement a JavaScript to copy the code and than paste.
But what about Example 1, Example 2, Example 3….
How can I tell the JavaScript to copy just the code and not the comments/text?
Again, look at the same issue. This is another example:
http://www.clihelp.org/LX00050/sort
Thank you so much in advance for your help.

With something like ClipboardJS you can specify exactly what to copy and from where. You will need to provide a bit of extra markup to target the relevant bit. In this case I wrapped it into a span. An example from their docs, tweaked for your case:
<!-- Target -->
<code>
Output a list of privileges
<br>
<br>
<span id="command">sc qprivs w32time</span>
</code>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#command">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Inject html after review widget loads for schema markup

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>

Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

Greasemonkey to Modify Text based on other parts of the webpage?

The Backstory:
I am looking to improve a Fantasy Football webpage by adding stats of the players in real-time. Let's assume we are using this page as a reference. For each player, it lists the position they play (i.e. QB, WR, etc) and also the team they play against.
My Current Code:
#BrockAdams answered my question yesterday and was able to assemble a table that contained the team name, position, and the rank. Here is a sample of the table:
What I am looking to accomplish is lookup the rank in the table based on the opposing team and my players position and add it to the end of the string.
What I Have Done:
The string that contains my players position can be found using document.querySelectorAll('span[class="Fz-xxs"]')[#].innerText.split(" - ").slice(-1)[0] where # is between 0 and 33
The string that contains the opponents team can be found using document.querySelectorAll('a[class="F-reset"]')[#].innerText.split(" ").slice(-1)[0] where # is once again between 0 and 33
The Problem:
What my question is, how can I modify my script to append the rank # to the end of the string based on my players position and the opposing team?
A small issue I found is that anytime a user loads the fantasy page, my script will re-fetch all the teams position + ranks even though they only change once a week. Is there a good method to store the values in the browser and have it update only once a week?
Here is a picture of what the final result should look like. This was from a script created last year but because Yahoo modified their site, the old script no longer works.
Edit: Here is a portion of the existing HTML code.
<td class="Ta-start player Ta-start Bdrx">
<div class="Ov-h Mx-a">
<div>
<div class="Grid-bind-end">
<span class="player-status Grid-u Lh-xs">
<a id="playernote-25718" href="http://sports.yahoo.com/nfl/players/25718/news" target="sports" class="playernote Ta-start yfa-icon Z-1 playernote-recent"><span class="ysf-player-icon ysf-player-icon-notes yfa-icon playernote-recent" title="Player notes">Player Note</span></a>
</span>
<div class="ysf-player-name Nowrap Grid-u Relative Lh-xs Ta-start"><a class="Nowrap" href="http://sports.yahoo.com/nfl/players/25718" target="sports">R. Tannehill</a> <span class="Fz-xxs">Mia - QB</span> </div>
</div>
<div class="Grid-bind-end">
<span class="ysf-player-status F-injury Fz-xxs Grid-u Lh-xs"></span>
<div class="ysf-player-detail Nowrap Grid-u Fz-xxs Lh-xs Ta-start"><span class="ysf-game-status "><a class="F-reset" href=".../miami-dolphins-washington-redskins.../" target="sports" onclick="pop(this)">Sun 10:00 am # Was</a></span></div>
</div>
</div>
</div>
</td>
The only modification the code will make will be to change Sun 10:00 am # Was to Sun 10:00 am # Was - 1 for example. The screenshot above should make it clear. The page it will be modifying is This one.
Edit2: I made a small version in jsFiddle but I am having trouble appending this to the greasemonkey script Brock created.

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>

I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples