1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Rotating an image

Discussion in 'JavaScript' started by makamo66, Nov 18, 2016.

  1. #1
    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
     
    makamo66, Nov 18, 2016 IP
  2. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    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>
     
    makamo66, Nov 19, 2016 IP
  3. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    http://plnkr.co/edit/C8m9fPgZmzc49snWL1cL?p=preview
     
    makamo66, Nov 19, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    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.
     
    PoPSiCLe, Nov 20, 2016 IP
  5. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    I fixed this problem by adding type=button to the rotate buttons
     
    makamo66, Nov 21, 2016 IP