HTML Slides

HTML presentation is powerful especially when you want to integrate some interactive charts (many are powered by JavaScript, e.g., D3, Highcharts, E-charts.). Althought this can also be achived by R Shinny, it’s not easy to get start with and you need both R and RStudio installed. In contrast, HTML and Javascript are nearly supported in all platforms, including mobile phones and tablets. There are alreay available free html presentation frameworks in JavaScript, including reveal.js and remark.js, but they might have compatibility problems with other JS libararies (e.g., when combined reveal.js and highcharts.js quite often the position of tooltips in the chart are shifted).

I am thinking to build a simple html presentation framwork with some basic concepts:

It’s single html so you just need one <head> for external scripts
each slide is a <section>, so it’s easy to add or delete
can use arrowkeys to navigate

The key point is that one needs to hide all other sections on start, and display them via hyperlinks or Keypress events. I came across the tutorial on w3schools, which meets basic needs.

First define the ratio (16:9) and then hide all sections:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.mySlides {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 25px 80px;
  height: 56.25%;
  width: 100%;
}

The transitions is controlled by click event:

1
2


<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

and defined by JS function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


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");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

Finally to map the keydown events to the onclick function:

1
2
3
4
5
6
7
8


$('body').on('keydown',function(e){
    if(e.which == 37){
        $('a.prev')[0].click()
  }else if(e.which == 39){      
        $('a.next')[0].click()
  }

});

Add charts to the slides you will have no conflicts:

htmlslides