jQuery Rotate Plugin

Question

I'm using jQuery Rotate plugin to rotate items. It works, but I experienced some problems.

I have that code:

<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" onchange="$('#np_drag').rotate(this.value)" />

<div id="np_drag" style="color:<?=$userinfo->np_color?>; font-size:<?=$userinfo->np_size?>px;position:absolute;top:<?=$userinfo->np_y?>px;left:<?=$userinfo->np_x?>px" class="draggable np_drag">
<?=$userinfo->np_text?>
</div>

<script>$("#np_drag").rotate(<?=$userinfo->np_angle?>);</script>

The problem is on input onchange. When I change it, #np_drag don't rotate. But when value is static (e.g. onchange="$('#np_drag').rotate(45)" It works.

Why? How can I solve my problem?

Answer 1

In the statement $('#np_drag').rotate(this.value), this will refer to np_drag and I believe you want it to refer to the value of np_angle. Try this:

<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" />

<script>$('#np_angle').bind('change', function(e){$('#np_drag').rotate($('#np_angle').val())});" </script>