Rotating an image

How could I make this work on a div instead of an image? I have a cropping tool with a div where the image shows up and I want to rotate the image before cropping it.

http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html

 

I got the rotate to work but the rotate buttons are beneath the submit button. I want to put the rotate buttons above the submit buttons but then the form submits and serializes the photo before it's been edited. How can I put the rotate buttons above the submit button?

<form action="#">
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">

<input type="hidden" name="image-data" class="hidden-image-data" />

<button type="submit">Submit</button>
</div>


</form>
<button class="rotate-ccw fa fa-rotate-left"></button>
<button class="rotate-cw fa fa-rotate-right"></button>
<div id="result">
<code>$form.serialize() =</code>
<code id="result-data"></code>
</div>

 

http://plnkr.co/edit/C8m9fPgZmzc49snWL1cL?p=preview

 

Why do you have a button type="submit" instead of an input type="submit"? Makes me think you have some javascript catching a button-press and then submitting? Because moving the buttons inside the form (before the submit) shouldn't do anything to submitting the form.

 

I fixed this problem by adding type=button to the rotate buttons