Skip to content

Instantly share code, notes, and snippets.

@shama

shama/jmpress-step-events.html

Created March 14, 2012 05:03
Show Gist options
  • Save shama/2034212 to your computer and use it in GitHub Desktop.
Save shama/2034212 to your computer and use it in GitHub Desktop.
Download ZIP
How to use jmpress.js step events
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment