I'm trying to replicate a working setup from a non-rmarkdown source into rmarkdown, with the bookdown tools. I've successfully incorporated some javascripts into the rmarkdown project using the include options in the yaml header. But I cannot get one particular tool to work, namely one that creates a "scroll up" button that appears on the screen when the user has scrolled down some amount. Years ago, I shamelessly stole this setup from
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top
My yaml is here:
output:
bookdown::gitbook:
includes:
after_body: myscripts.html
before_body: mybutton.html
in_header: mybutton_style.html
Below I've:
- pasted in the contents of these files and then
- the html page that's produced showing that these snipets are inserted where they are supposed to.
So the include mechanism works fine within bookdown.
But...no button appears. Here is the result with the button from my original project that I'm trying to port to the rmarkdown world:
https://qstbb.pa.msu.edu/ed/lectures/L5_MechanicsMomentum19_8lt/
The contents of these three files are:
mybotton.html:
<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
color: black;
}
</style>
myscripts.html:
<!-- slide show -->
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
mybotton.html:
<!-- da button -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<!-- da button -->
Each of these snippets appears in the final html files right where they should.
Here is the bookdown-produced result...with the long content removed:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> 3 Lesson 5. The Big Mo, Force and Momentum | Quarks, Spacetime, and the Big Bang</title>
<meta name="description" content="This is an investigation of two rebels of the 16th century." />
<meta name="generator" content="bookdown 0.13 and GitBook 2.6.7" />
<meta property="og:title" content=" 3 Lesson 5. The Big Mo, Force and Momentum | Quarks, Spacetime, and the Big Bang" />
<meta property="og:type" content="book" />
<meta property="og:description" content="This is an investigation of two rebels of the 16th century." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content=" 3 Lesson 5. The Big Mo, Force and Momentum | Quarks, Spacetime, and the Big Bang" />
<meta name="twitter:description" content="This is an investigation of two rebels of the 16th century." />
<meta name="author" content="Raymond Brock" />
<meta name="date" content="2019-11-06" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="prev" href="lesson-1-once-upon-a-time.html"/>
<link rel="next" href="energy-it-just-keeps-going-and-going.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
color: black;
}
</style>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
<div class="book-summary">
<nav role="navigation">
<ul class="summary">
<li><a href="./">Quarks, Spacetime, <br>and the Big Bang</a></li>
<li class="divider"></li>
<li><a href="index.html#section"></a></li>
<li class="chapter" data-level="1" data-path="a-little-bit-about-this-on-line-text.html"><a href="a-little-bit-about-this-on-line-text.html"><i class="fa fa-check"></i><b>1</b> A Little Bit About This On-line Text</a></li>
<li class="chapter" data-level="2" data-path="lesson-1-once-upon-a-time.html"><a href="lesson-1-once-upon-a-time.html"><i class="fa fa-check"></i><b>2</b> Lesson 1. Once Upon a Time…</a></li>
<li class="chapter" data-level="3" data-path="lesson-5-the-big-mo-force-and-momentum.html"><a href="lesson-5-the-big-mo-force-and-momentum.html"><i class="fa fa-check"></i><b>3</b> Lesson 5. The Big Mo, Force and Momentum</a></li>
<li class="chapter" data-level="4" data-path="energy-it-just-keeps-going-and-going.html"><a href="energy-it-just-keeps-going-and-going.html"><i class="fa fa-check"></i><b>4</b> Energy, It Just Keeps Going and Going</a></li>
<li class="divider"></li>
<li><a href="https://github.com/rstudio/bookdown" target="blank">Published with bookdown</a></li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Quarks, Spacetime, and the Big Bang</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<section class="normal" id="section-">
<!-- da button -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<!-- da button -->
<div id="lesson-5.-the-big-mo-force-and-momentum" class="section level1">
<h1><span class="header-section-number"> 3</span> Lesson 5. The Big Mo, Force and Momentum</h1>
<p class="message">
We’re all about modern particle physics and the collisions we create in order to see into the deepest
yadda yadda content
<!-- slide show -->
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</section>
</div>
</div>
</div>
<a href="lesson-1-once-upon-a-time.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="energy-it-just-keeps-going-and-going.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": false,
"facebook": true,
"twitter": true,
"google": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": null,
"text": null
},
"history": {
"link": null,
"text": null
},
"download": ["Against-the-Grain.pdf", "Against-the-Grain.epub"],
"toc": {
"collapse": "subsection"
}
});
});
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
var src = "true";
if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
if (location.protocol !== "file:")
if (/^https?:/.test(src))
src = src.replace(/^https?:/, '');
script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
</body>
</html>
Can anyone see why this shouldn't work?
thanks
Ray