Home

Welcome to the jangle wiki!

Demo

For a working demo, please visit http://corydorning.com/demos/jangle.

Requirements

To use jangle, you must be using jQuery version 1.6+. It has been fully tested on IE6+ and the latest versions of Chrome, Firefox and Safari.

NOTE: While this does work in IE6 and IE7, due to the way position: relative; works, layout behavior is inconsistent.

Setup

Reference the jQuery library followed the jangle JavaScript file:

  <!-- load jQuery library -->
  <script src="jquery-1.6.1.min.js"></script>

  <!-- load jangle plugin -->
  <script src="jquery-jangle-0.3.js"></script>

Examples

Now you are ready to use jangle! Here is some example code on the how you can use it.

Page Load

<!-- rotate a DIV 90 degrees -->
<script>
  $('div').jangle(90);
</script>

Click Event

<!-- rotate a DIV 90 degrees upon clicking a link -->
<script>
  $('a').click(function() {
    $('div').jangle(90);
  });
</script>

Form Driven

<!-- see jangle-example.html for full code sample -->
<!-- rotate an image based on input value -->
<script>
  $('button').click(function() {
    var angle = parseInt($('input[type=text]').val()) || 0;

    $('img').jangle(angle);
  });
</script>

Slider Driven

<!-- see jangle-example.html for working code sample -->
<!-- rotate an image based on slider position -->
<script>
  $('.slider').slider({
    min: 0, // degrees
    max: 360, // degrees
    slide: function(e, ui) {
      $('img').jangle(ui.value);
    },
    stop: function(e, ui) { // in case you out slide the slider
      $('img').jangle(ui.value);
    }
  });
</script>