Skip to content

Getting started with the Stepwise jQuery plugin

Jump to bottom Edit New page
Erik Loyer edited this page Jan 27, 2017 · 2 revisions

This example is just about the simplest way to get started using Stepwise:

<html>
	<head>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
		<script src="js/stepwise.js"></script>
		<style>
			#output { position: absolute; width: 100%; height: 100%; font-size: 128px; }
		</style>
		<script>
			$(document).ready(function() {
				$("#output").stepwise("1 2 3 4");
			});
		</script>
	</head>
	<body>
		<div id="output">Click to begin</div>
	</body>
</html>

Here's what's going on in this example. After including the jQuery and Stepwise libraries, we set up a full screen <div> to capture clicks and taps, and then await the document ready event, at which time we issue this command:

$("#output").stepwise("1 2 3 4");

Which does the following:

  1. Creates a new Stepwise instance on the <div> and loads a simple string script into it.
  2. The script, parsed according to Stepwise defaults, is turned into a repeating four step pattern: 1, 2, 3, and 4.
  3. **Stepwise begins listening for input events—**key presses, as well as mouse clicks and taps on the <div>.
  4. Each input event thereafter causes Stepwise to advance one step in the pattern.
  5. As each successive step is triggered, its content is sent to the <div>.

The finished example results in a four-step count the user can perform with keys, clicks, or taps: CodePen example

Where to go from here

Add a custom footer

Stepwise in the browser

Stepwise for Unity

Clone this wiki locally