jQuery Contra Plugin - Documentation

Created by Jon Raasch

A simple jQuery plugin that binds any function to the Contra code: Up, up, down, down, left, right, left, right, B, A, enter

Download jQuery Contra Plugin

Basic use of jQuery Contra

Start by including the necessary Javascript files, then call the $.contra() function after the document loads:

<script type="text/javascript" src="jquery.1.3.2"></script>
<script type="text/javascript" src="jquery.contra.js"></script>

<script type="text/javascript">
$(function() {
  $.contra( function() {
    alert('You just got 30 lives!');
  } );
});
</script>

Here we defined a function on the fly which will alert 'You just got 30 lives'. This will be called every time a user enters the Contra code (up, up, down, down, left, right, left, right, b, a, enter)

Alternately we can define a function and then reference it:

<script type="text/javascript" src="jquery.1.3.2"></script>
<script type="text/javascript" src="jquery.contra.js"></script>

<script type="text/javascript">
function easterEgg() {
   alert('You got the secret code!');
}

$(function() {
  $.contra(easterEgg);
});
</script>

Careful here to leave the parentheses off of the function reference (since we are referencing rather than calling this function).


Limiting the scope of jQuery Contra

By default the Contra plugin tracks the code keypress event on the entire document. But we can easily define a more narrow scope. Let's enable the code only once a user has focused on an input:

<script type="text/javascript" src="jquery.1.3.2"></script>
<script type="text/javascript" src="jquery.contra.js"></script>

<script type="text/javascript">
$(function() {
  $('input').contra( function() {
    alert('You just got 30 lives!');
  } );
});
</script>

Here we chained the contra() function to the $('input') selector.


Using a different code with jQuery Contra

The jQuery Contra Plugin can be used to create an Easter Egg with any code, not just the Contra code. The $.contra() function accepts two arguments and the second is an option array. To use a custom code, pass an array of keycodes for the code option:

<script tpe="text/javascript" src="jquery.1.3.2"></script>
<script tpe="text/javascript" src="jquery.contra.js"></script>

<script type="text/javascript">
$(function() {
   $.contra( function() {
      alert('You just got 30 lives!');
   }, {
      code : [
         38,
         39,
         40,
         37,
         38,
         39,
         40,
         37
      ]
   });
});
</script>

In this example we set up a listener for up, right, down, left, up, right, down, left. For a listing of keycodes, go here.


Licensing info for jQuery Contra

The jQuery Contra Plugin is relased under the MIT license:

Copyright (c) 2010 Jon Raasch

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



Make A Donation