I have a flexdashboard that uses the storyboard format. I am trying to embed the responsive timeline seen here on one of the sections. It seems to me that calling the HTML via code-chunk places it within a chart-shim div with its own scroll bar, and that the JS does not respond to the div's scroll, only the outer window scroll.
For reference, I have created a folder called "www" in the directory containing the storyboard, and in that folder I have created a file called "script.js", "styles.css", and "timeline.html." The html file is the only one that I have modified from its original form, in that I have added the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='www/styles.css' charset="utf-8">
</head>
<body>
... (HTML as it originally appears)...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="www/script.js" charset="utf-8"></script>
</body>
---
title: reprex
output:
flexdashboard::flex_dashboard:
theme:
version: 5
bootswatch: litera
runtime: shiny
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tidyverse)
library(dplyr)
library(shiny)
library(flexdashboard)
library(htmltools)
```
Report {.storyboard}
=========================================
### Section 1
```{r echo=FALSE}
htmltools::includeHTML('www/timeline.html') %>% HTML()
```
***
Some words about Section 1
### Section 2
About
=========================================
How can I embed the HTML (or modify the JS?) so that it is responsive?
A secondary issue is that embedding this HTML appears to mess with the functionality of the sections of the dashboard...if I call the HTML in a code chunk as shown below, the "About" section is no longer responsive to a click.
I FINALLY figured this out...instead of having the html reference external JS and CSS files, I bundled them all into the html file, as shown here, and then used an iframe to call the html file:
tags$iframe(seamless="seamless",
src= 'www/timeline.html',
width='100%',
height=800)