Welcome to JS slide show!

You are seeing an HTML page that has been prepared by a JavaScript to be a slide show.

Use the right and left side arrow-buttons to navigate, or cursor-right and -left keys.

2015-03-14

What you need for this

An up-to-date browser that knows CSS flexbox layout:
Firefox 22 Chrome 29 Opera 16 IE-11 Safari 6.1

How to navigate

The navigation controls will appear when you move the mouse.

The number of the current slide, and the total number of slides, is to be seen on top.

You can go to slide 99 by writing #99 at end of browser address line and press the Reload button after.

The cursor keys will not work when a web page is displayed in a slide, and input focus has been set to that page.

The optional "Down" button on bottom would toggle the visibility of the underlying document. This is useful for text searches. But such a button makes no sense in an embedded slide show like this one.

What is expecting you here:

How to use an HTML page as slide-show by means of JS
Example slides
The contract between
- the script and HTML
- the script and CSS
Source code snippets
Full JS and CSS source listings

How can HTML be organized for slides

When there are elements with CSS class="slide" in document, these are the slides
Else all HTML elements directly below <body> are slides, excluding the slide frame and its controls, and empty elements

How can HTML be displayed in slides

Set document content invisible, establish a slide-frame on top of document
Establish navigation controls: Forward, Backward, Index, Count
Any normal element will be presented by copying it into the slide-frame
Any <a> element (hyperlink) will be displayed as its actual href location
Text will be centered, images will be scaled to fit into viewport

Sample HTML code

Find slideshow.js and slideshow.css on slides 29 and 30.

<html>
<head>
  <link href="slideshow.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="slide">
    <h1>Example: Image</h1>
    <p>Let's see how images fit into viewport ...</p>
  </div>
  
  <img class="slide" src="http://upload.wikimedia.org/wikipedia/commons/4/48/Anna_Atkins_1861.jpg"/>

  <div class="slide">
    <h1>Example: Hyperlink</h1>
    <p>Display a web page  ....</p>
  </div>
  
  <a class="slide"
      href="https://css-tricks.com/centering-css-complete-guide/">
    css-tricks
  </a>

  <script type="text/javascript" src="slideshow.js"></script>

</body>
</html>

Examples

... showing the capabilities of this slide show.

Example: Tree

A slide show is like a vacation from losing yourself in endless details

A tree is not linear like a slide show
- It can expand a topic into details
- It can be navigated
  - bottom-up
  - top-down
    - depth-first
    - breadth-first
- Documents are written like trees
  - Hierarchical table of contents
  - General to detail downsizing with dotted title numbers
A slide show is a path through a tree
- The path highlights the most important details
- Slides are emphasising, summarizing, generalizing
Slide shows can simulate a tree by providing a "Down" button, but "Forward" and "Backward" would be confusing when being "Down"

Example: Long Text

This is to demonstrate that also long text can be on a slide.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse

End of long text

Example: Server Resource

Sorry, on this Blog I have no access to server resources, so I can't display any.

<a class="slide" href="slideshow.js">slideshow.js</a>

<a class="slide" href="slideshow.css">slideshow.css</a>

Example: Image

Images should fill the viewport without losing their original aspect ratio. Try to change width and height of the browser window. The image never should be distorted during such an action (IE may behave as it likes). Further the image dimension should not provoke browser scroll bars.

Useful for image galleries!

  <img class="slide" src="http://somesite/somefolder/BEAUTIFUL.JPG"/>

Example: Hyperlink

The next slide should show a scrollable web page that explains how to center elements ....

  <a class="slide" href="https://css-tricks.com/centering-css-complete-guide/">CSS Tricks</a>

Example: Video

The next slide should show a video player ...

  <a class="slide" href="https://www.youtube.com/embed/IVpOyKCNZYw">youtube</a>

Script to HTML Contract

Responsibilities

All layout and text attributation within a slide is done by the author using HTML and CSS.

What the script does is ...

manage visibility and callbacks of navigation controls
center text slides
scale image slides to fit into viewport with original aspect ratio
resolve hyperlink slides and display them full-size

The script finds slides by class:

<div class = "slide"> (reserved CSS class name)

Not finding any means ...

all direct body children are slides,
except SCRIPT and empty elements, id="slideshow", and all other "slide..." ids.

... finds navigation controls by id:

id = "slideframe" frame where slides are shown in
id = "slideforward" button navigating to next slide
id = "slidebackward" button navigating to previous slide
id = "slidedownward" optional button toggling document visibility
id = "slideindex" current slide-index display
id = "slidecount" total slide-count display
id = "slidetools" the element containing index and count

Behavior and Assumptions

Not finding one of these means generating it.
Finding one means the author is responsible for its shape.

The slidedownward button can be avoided by providing slideforward and slidebackward in HTML

The elements slideindex and slidecount must be children of slidetools.

The optional element id = "slideshow" is considered to be a custom slide frame layout container and is ignored in any way.

Slide show modes

Normally the show is "full-screen", taking 100% of browser height and width. The underlying document is set invisible.

By providing a custom HTML element id="slideshow", containing slideframe, slideforward, .... controls, the layout and shape of the slide show can be taken over completely by the HTML document and its CSS. That way it is possible to embed the slide show as part of a web page.

Custom slide show HTML

  <div id="slideshow" class="myslideshow">
    <div id="slideframe" class="slideframe"></div>
    <div id="slidetools" class="myslidetools">
      <span id="slideindex" style="font-weight: bold;"></span> of <span id="slidecount"></span>
    </div>
    <input id="slidebackward" class="myslidebackward" type="button" value="&lt;" />
    <input id="slideforward" class="myslideforward" type="button" value="&gt;" />
    <input id="slidedownward" class="myslidedownward" type="button" value="V" />
  </div>

Custom slide show CSS

<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="initial-scale=1"/>
  <title>JS Slide Show</title>
  
  <style type="text/css">
    .myslideshow {
      position: relative;
      top: 5%;
      width: 90%;
      height: 90%;
      overflow: auto;
      margin: auto;
      border: 4px solid gray;
      border-radius: 10px;
    }
    .myslidetools {
      position: absolute;
      top: 2%;
      right: 2%;
      background-color: white;
      padding: 0.3em;
      border: 1px solid lightGray;
    }
    .myslidebackward  {
      position: absolute;
      top: 50%;
      left: 1%;
      transform: translateY(-50%);
    } 
    .myslideforward  {
      position: absolute;
      top: 50%;
      right: 1%;
      transform: translateY(-50%);
    }
    .myslidedownward  {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateY(-50%);
    }
  </style>
  
</head>

Script to CSS Contract

Keep Layout in CSS

JS does no layout except some text-centering fixes that can not be done by CSS because they rely on current viewport dimensions.

JS just assigns classes to slide-controls when it generates them by itself (when there is no custom slideshow in HTML)

id=slideframe -> class="slideframe"
id=slideforward -> class="navigation slideforward"
id=slidebackward -> class="navigation slidebackward"
id=slidedownward -> class="navigation slidedownward"
id=slidetools -> class="navigation slidetools"

But JS sets elements and slide controls visible and invisible.

Source Code

TODO: introduce the source piece by piece ....

Update: as of today with Firefox it is still necessary to write proprietary CSS.
Following is not enough to center:

  transform: translateY(-50%);

It must be:

  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

JS Source Code (slideshow.js)

(function(contextWindow, contextDocument, contextLocation)
{
  var findSlides = function() {
    var slides = contextDocument.getElementsByClassName("slide");
    if (slides.length > 0) { // found explict slides
      slides = [].slice.call(slides); // copy collection to avoid "live" list
    }
    else { // root children are default slides
      slides = [];
      var rootChildren = contextDocument.body.children;
      for (var i = 0; i < rootChildren.length; i++) {
        var rootChild = rootChildren[i];
        if (rootChild.tagName !== "SCRIPT" &&
            rootChild.tagName !== "BR" &&
            rootChild.tagName !== "HR" &&
            rootChild.id !== "slideshow" &&
            rootChild.id !== "slideframe" &&
            rootChild.id !== "slideforward" &&
            rootChild.id !== "slidebackward" &&
            rootChild.id !== "slidedownward" &&
            rootChild.id !== "slidetools")
          slides.push(rootChild);
      }
    }
    return slides;
  };
  
  var slides = findSlides();
  if (slides.length <= 0)
    return; // nothing to do, empty document

  var findOrCreateSlideFrame = function() {
    var slideframe = contextDocument.getElementById("slideframe");
    if ( ! slideframe ) {
      slideframe = contextDocument.createElement("div");
      slideframe.className = "slideframe"; // see slideshow.css
      contextDocument.body.insertBefore(slideframe, contextDocument.body.childNodes[0]);
    }
    return slideframe;
  };
  
  var slideframe = findOrCreateSlideFrame();
  
  // find navigaton buttons
  var forward = contextDocument.getElementById("slideforward");
  var backward = contextDocument.getElementById("slidebackward");
  var downward = contextDocument.getElementById("slidedownward");
  
  if ( ! forward || ! backward ) {
    var createNavigationButton = function(isBackward) {
      var button = contextDocument.createElement("input");
      button.type = "button";
      button.value = isBackward === true ? "\u25C0" : isBackward === false ? "\u25B6" : "\u25BC";
      button.className = "navigation "+
        (isBackward === true ? "slidebackward" : isBackward === false ? "slideforward" : "slidedownward");
      return button;
    };
  
    if ( ! forward )
      contextDocument.body.appendChild(forward = createNavigationButton(false));
    if ( ! backward )
      contextDocument.body.appendChild(backward = createNavigationButton(true));
    if ( ! downward )
      contextDocument.body.appendChild(downward = createNavigationButton(undefined));
  }
  
  var slidetools = contextDocument.getElementById("slidetools");
  var slideindex = contextDocument.getElementById("slideindex");
  var slidecount = contextDocument.getElementById("slidecount");
  
  if ( ! slideindex ) {
    slideindex = contextDocument.createElement("span");
    slideindex.style.cssText = "font-weight: bold;";
    if (slidetools)
      slidetools.appendChild(slideindex);
  }
  if ( ! slidecount ) {
    slidecount = contextDocument.createElement("span");
    if (slidetools) {
      slidetools.appendChild(contextDocument.createTextNode(" / "));
      slidetools.appendChild(slidecount);
    }
  }
  if ( ! slidetools ) {
    slidetools = contextDocument.createElement("div");
    slidetools.className = "navigation slidetools";
    slidetools.appendChild(slideindex);
    slidetools.appendChild(contextDocument.createTextNode(" / "));
    slidetools.appendChild(slidecount);
    contextDocument.body.appendChild(slidetools);
  }

  var setDisplayed = function(element, active) {
    element.style.display = (active ? "" : "none");
  };

  /** Set all root children visible or invisble. */
  var setDocumentDisplayed = function(displayed) {
    var bodyParts = contextDocument.body.children;
    for (var i = 0; i < bodyParts.length; i++) {
      var bodyPart = bodyParts[i];
      if (bodyPart.id !== "slideshow" &&
          bodyPart !== slideframe &&
          bodyPart !== backward &&
          bodyPart !== forward &&
          bodyPart !== downward &&
          bodyPart !== slideindex &&
          bodyPart !== slidecount &&
          bodyPart !== slidetools)
        setDisplayed(bodyPart, displayed);
    }
    if (downward)
      downward.value = displayed ? "\u25B2" : "\u25BC";
  };
  
  var documentDisplayed = false;

  setDocumentDisplayed(documentDisplayed);
  
  /** Set displayed given element and all its parents up to body. */
  var setPathDisplayed = function(element, displayed) {
    setDisplayed(element, displayed);
    var parent = element.parentNode;
    while (parent && parent !== contextDocument.body) {
      setDisplayed(parent, displayed);
      parent = parent.parentNode;
    }
  };
  
  /** Set slide-show elements visible. */
  var setSlideshowDisplayed = function(displayed) {
    setPathDisplayed(slideframe, displayed);
    setPathDisplayed(slidetools, displayed);
    setPathDisplayed(forward, displayed);
    setPathDisplayed(backward, displayed);
    if (downward)
      setPathDisplayed(downward, displayed);
  };

  setSlideshowDisplayed(true);
  
  var downsizePercentVertical = 80;
  var downsizePercentHorizontal = 70;
  
  /** Center text, or scale an image. */
  var scaleContents = function(slide) {
    if (slide.tagName === "IMG") { // scale image but keep original aspect-ratio
      var width = slide.naturalWidth || slide.scrollWidth;
      var height = slide.naturalHeight || slide.scrollHeight;
      var widthTooBig = (width >= slideframe.clientWidth);
      var heightTooBig = (height >= slideframe.clientHeight);
      if (widthTooBig || heightTooBig) {
        var className = heightTooBig ? "imageHeightTooBig" : "imageWidthTooBig";
        slide.className += " "+className;
      }
    }
    else {
      // to keep vertical centering, set width/height only when content bigger than frame
      // but this MUST be done, else long text would be cut on top
      if (slide.scrollHeight >= slideframe.clientHeight * downsizePercentVertical / 100)
        slide.style.height = downsizePercentVertical+"%";

      if (slide.scrollWidth >= slideframe.clientWidth * downsizePercentHorizontal / 100)
        slide.style.width = downsizePercentHorizontal+"%";
    }
  };
  
  /** Display an HTML element in slideframe by copying its content. */
  var displaySlide = function(htmlElement) {
    slideframe.innerHTML = htmlElement.outerHTML;
    var slide = slideframe.children[0];
    setDisplayed(slide, true);
    scaleContents(slide);
  };
  
  var displayHyperLink = function(hyperLink) {
    slideframe.innerHTML =
      "<object type='text/html' height='100%' width='98%' data='"+hyperLink+"'></object>";
  };
    
  /** Check URL whether a certain slide was queried. */
  var getSlideNumber = function() {
    var slideNumber = -1;
    var hashtag = contextLocation.hash;
    var slideNumberString = hashtag ? hashtag.substring(1) : "";
    if (slideNumberString.length > 0)
      slideNumber = parseInt(slideNumberString);
    
    if (slideNumber > slides.length)
      slideNumber = slides.length;
    
    if (slideNumber < 1)
      slideNumber = 1;
    
    return slideNumber - 1;
  };
  
  var currentIndex = getSlideNumber();
  
  var display = function() {
    var slide = slides[currentIndex];
    
    var hyperLink = slide.href || slide.src;
    if (hyperLink && slide.tagName !== "IMG")
      displayHyperLink(hyperLink);
    else
      displaySlide(slide);
    
    slideindex.innerHTML = ""+(currentIndex + 1);
    slidecount.innerHTML = ""+slides.length;
    
    contextLocation.hash = ""+(currentIndex + 1); // set URL for reload events
  };
  
  var next = function() {
    if (currentIndex >= slides.length - 1)
      return; // happens on keypress
    currentIndex++;
    display();
  };
  
  var previous = function() {
    if (currentIndex <= 0)
      return; // happens on keypress
    currentIndex--;
    display();
  };
  
  var toggleDocumentVisibility = function() {
    setDocumentDisplayed(documentDisplayed = ! documentDisplayed);
  };

  var timer;
  var mouseIsOverButton;
  
  var clearSetNavigationInvisibleTimer = function() {
    if (timer) {
      contextWindow.clearInterval(timer);
      timer = undefined;
    }
  };
  
  var setNavigationVisible = function(visible) {
    forward.style.visibility = (visible && currentIndex < slides.length - 1) ? "visible" : "hidden";
    backward.style.visibility = (visible && currentIndex > 0) ? "visible" : "hidden";
    if (downward)
      downward.style.visibility =  visible ? "visible" : "hidden";
    slidetools.style.visibility = visible ? "visible" : "hidden";
  };
  
  var startSetNavigationInvisibleTimer = function() {
    clearSetNavigationInvisibleTimer();
    timer = contextWindow.setInterval(
      function() {
        setNavigationVisible(false);
      },
      1000
    );
  };
  
  var mousemoveListener = function() {
    clearSetNavigationInvisibleTimer();
    setNavigationVisible(true);
    if ( ! mouseIsOverButton )
      startSetNavigationInvisibleTimer();
  };
  
  var mouseenterButtonListener = function() {
    clearSetNavigationInvisibleTimer();
    mouseIsOverButton = true;
  };
  
  var mouseleaveButtonListener = function() {
    mouseIsOverButton = false;
    startSetNavigationInvisibleTimer();
  };
  
  
  display(); // first slide
  
  forward.addEventListener("click", next);
  backward.addEventListener("click", previous);
  if (downward)
    downward.addEventListener("click", toggleDocumentVisibility);
  
  forward.addEventListener("mouseenter", mouseenterButtonListener);
  forward.addEventListener("mouseleave", mouseleaveButtonListener);
  backward.addEventListener("mouseenter", mouseenterButtonListener);
  backward.addEventListener("mouseleave", mouseleaveButtonListener);
  if (downward) {
    downward.addEventListener("mouseenter", mouseenterButtonListener);
    downward.addEventListener("mouseleave", mouseleaveButtonListener);
  }
  slidetools.addEventListener("mouseenter", mouseenterButtonListener);
  slidetools.addEventListener("mouseleave", mouseleaveButtonListener);
    
  contextWindow.addEventListener("mousemove", mousemoveListener);
  contextWindow.addEventListener("click", mousemoveListener); // show on click or mobile touch event
  
  contextWindow.addEventListener("keydown", function(keyEvent) {
    if (keyEvent.keyCode === 39) // cursor right
      next();
    else if (keyEvent.keyCode === 37) // cursor left
      previous();
  });

}(window, document, location));

CSS Source Code (slideshow.css)

html, body  {
  height: 100%; /* enable vertical centering */
  padding: 0; /* avoid browser showing scrollbars */
  margin: 0; /* avoid browser showing scrollbars */
}

.slideframe  {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 98%; 
  height: 98%; /* enable vertical centering */
  margin: auto; /* makes it centered, at least horizontally */
  overflow: auto;
  /* configure border and font */
  border: 1px dotted gray;
  font-size: 130%;
  font-family: sans-serif;
}

.navigation  {
  position: absolute; /* locate navigation controls relative to their parent */
}
.slidebackward  {
  top: 50%;
  left: 1%;
  transform: translateY(-50%);
} 
.slideforward  {
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
}
.slidedownward {
  position: fixed; /* do not scroll away this toggle button */
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
}
.slidetools {
  background: white;
  padding: 0.3em;
  border: 1px solid lightGray;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.imageHeightTooBig  {
  height: 100%;
  width: auto;
}
.imageWidthTooBig  {
  width: 100%;
  height: auto;
}

Thanks for your attention!

You can always visit the current state of this utility on my homepage