jhkuperus/index.html

## index.html
<html>
  <!-- This Gist shows fragments you can add to a Reveal.js template to be able to jump between slides -->
  <!-- Jumping is done by hitting the 'G' key. A popup appears where you can enter a series of slide   -->
  <!-- indices. If valid, Reveal.js will navigate to that slide. -->
  <!-- The input requires input to match the regex ^\d+(\/\d+)?$ The first number is the horizontal index -->
  <!-- and the optional second number is a vertical index -->
  <head>
    <!-- ... Reveal.js initializers -->
  </head>
  <body>
    <!-- ... More Reveal.js initializers -->

    <script>
      Reveal.initialize(options);


      var registerSlideInputHandlers = function(event) {
        var input = document.getElementById('desiredSlideNumber');
        var modal = document.getElementById('jumpToSlide');

        input.addEventListener("keyup", function(event) {
          if (event.code === 'Enter') {
            var desiredValue = input.value;
            if (/^\d+(\/\d+)?$/.test(desiredValue)) {
              var parts = desiredValue.split('/');

              var h = parts[0];
              var v = parts.length === 2 ? parts[1] : undefined;

              modal.className = '';
              Reveal.slide(h, v);
            }
          }
        });

        document.addEventListener("keyup", function(event) {
          if (event.code === 'KeyG') {
            modal.className = 'active';
            var indices = Reveal.getIndices();
            var value = (indices.h && indices.h) + (indices.v ? ('/' + indices.v) : '');
            input.value = value;
            input.select();
          }
        });
      }

      document.addEventListener('DOMContentLoaded', registerSlideInputHandlers);
    </script>

    <!-- ... Other Reveal.js body-stuff -->

    <!-- Add the following style and div tags to the end of the document. They're hidden by default, but show -->
    <!-- when you hit the 'G' key -->
    <style>
#jumpToSlide {
  display: none;
}

#jumpToSlide.active {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  position: absolute;
  width: 200px;
  height: 120px;
  background: black;
  color: white;
  border: 1px solid white;
  top: 50%;
  margin-top: -60px;
  left: 50%;
  margin-left: -100px;
  z-index: 100000;
}
    </style>

    <div id="jumpToSlide">
      <div><large>Jump to slide:</large></div>
      <div><input type="text" id="desiredSlideNumber" value=""></div>
    </div>
  </body>
</html>
	<html>
	<!-- This Gist shows fragments you can add to a Reveal.js template to be able to jump between slides -->
	<!-- Jumping is done by hitting the 'G' key. A popup appears where you can enter a series of slide -->
	<!-- indices. If valid, Reveal.js will navigate to that slide. -->
	<!-- The input requires input to match the regex ^\d+(\/\d+)?$ The first number is the horizontal index -->
	<!-- and the optional second number is a vertical index -->
	<head>
	<!-- ... Reveal.js initializers -->
	</head>
	<body>
	<!-- ... More Reveal.js initializers -->

	<script>
	Reveal.initialize(options);


	var registerSlideInputHandlers = function(event) {
	var input = document.getElementById('desiredSlideNumber');
	var modal = document.getElementById('jumpToSlide');

	input.addEventListener("keyup", function(event) {
	if (event.code === 'Enter') {
	var desiredValue = input.value;
	if (/^\d+(\/\d+)?$/.test(desiredValue)) {
	var parts = desiredValue.split('/');

	var h = parts[0];
	var v = parts.length === 2 ? parts[1] : undefined;

	modal.className = '';
	Reveal.slide(h, v);
	}
	}
	});

	document.addEventListener("keyup", function(event) {
	if (event.code === 'KeyG') {
	modal.className = 'active';
	var indices = Reveal.getIndices();
	var value = (indices.h && indices.h) + (indices.v ? ('/' + indices.v) : '');
	input.value = value;
	input.select();
	}
	});
	}

	document.addEventListener('DOMContentLoaded', registerSlideInputHandlers);
	</script>

	<!-- ... Other Reveal.js body-stuff -->

	<!-- Add the following style and div tags to the end of the document. They're hidden by default, but show -->
	<!-- when you hit the 'G' key -->
	<style>
	#jumpToSlide {
	display: none;
	}

	#jumpToSlide.active {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;

	position: absolute;
	width: 200px;
	height: 120px;
	background: black;
	color: white;
	border: 1px solid white;
	top: 50%;
	margin-top: -60px;
	left: 50%;
	margin-left: -100px;
	z-index: 100000;
	}
	</style>

	<div id="jumpToSlide">
	<div><large>Jump to slide:</large></div>
	<div><input type="text" id="desiredSlideNumber" value=""></div>
	</div>
	</body>
	</html>
No results found