shama/jmpress-step-events.html

## jmpress-step-events.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jmpress.js | how to use jmpress.js step events</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jmpress.js"></script>
</head>
<body>

<div id="simple">
	<div id="home" class="step">
		<p>Hello! My name is jmpress.js...</p>
	</div>
	<div class="step" data-x="1000">
		<p>and this is a really simple demo.</p>
	</div>
	<div class="step" data-x="2000">
		<p>You might think it is boring...</p>
	</div>
	<div class="step" data-x="3000">
		<p>but that is the point. This is a simple example.</p>
	</div>
</div>

<script type="text/javascript">
$(function() {
	$('#simple').jmpress({
		// jmpress.js callback called before changing each step
		beforeChange: function(element, eventData) {
			console.log('We\'re changing to step: #' + $(element).attr('id') + '!');
		}
	});
	$('#home').on('enterStep', function(event) {
		// jQuery event triggered when entering a specific step
		console.log('Hello step #home!');
	})
	.on('leaveStep', function(event) {
		// jQuery event triggered when leaving a specific step
		console.log('Goodbye step #home!');
	});
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>jmpress.js \| how to use jmpress.js step events</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jmpress.js"></script>
	</head>
	<body>

	<div id="simple">
	<div id="home" class="step">
	<p>Hello! My name is jmpress.js...</p>
	</div>
	<div class="step" data-x="1000">
	<p>and this is a really simple demo.</p>
	</div>
	<div class="step" data-x="2000">
	<p>You might think it is boring...</p>
	</div>
	<div class="step" data-x="3000">
	<p>but that is the point. This is a simple example.</p>
	</div>
	</div>

	<script type="text/javascript">
	$(function() {
	$('#simple').jmpress({
	// jmpress.js callback called before changing each step
	beforeChange: function(element, eventData) {
	console.log('We\'re changing to step: #' + $(element).attr('id') + '!');
	}
	});
	$('#home').on('enterStep', function(event) {
	// jQuery event triggered when entering a specific step
	console.log('Hello step #home!');
	})
	.on('leaveStep', function(event) {
	// jQuery event triggered when leaving a specific step
	console.log('Goodbye step #home!');
	});
	});
	</script>

	</body>
	</html>