Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

118 lines (99 sloc) 3.72 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>php|tek 2012 - Writing bad JavaScript with Mario!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ryan@knplabs.com">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">php|tek JavaScript Playground</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="http://knpuniversity.com">KnpUniversity.com (shameless plug)</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="mario-world row-fluid">
<div class="span8">
<div class="mario box">
.mario
<div class="luigi box">
.luigi
<div class="kick-butt">
<img src="images/luigi.gif" alt="Luigi, kicking ass" class="luigi-himself" />
<img src="images/fireball.gif" alt="fireball!" class="fireball" />
<img src="images/goomba.gif" alt="Enemy" class="enemy" />
<img src="images/bam.gif" alt="BAM!" class="bam-explode" />
</div>
<a href="#" class="peach box">
.peach
</a>
</div>
</div>
</div>
<div class="span4 log"></div>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $luigi = $('.mario-world .luigi');
$luigi.click(function() {
$luigi.addClass('active');
var $fireball = $(this).find('.fireball');
var $enemy = $(this).find('.enemy');
var $bam = $(this).find('.bam-explode');
$fireball.animate({
left: '+=320'
}, 1000, function() {
$fireball.hide();
$enemy.hide();
$bam.show();
setTimeout(function() {
$luigi.removeClass('active');
$fireball.css({left: '70px'});
$fireball.show();
$enemy.show();
$bam.hide();
}, 1000);
});
return false;
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.