Skip to main content
shasimo
shasimo
Inspiring
January 13, 2018
Answered

Mailform should tricker my canvas animation

  • January 13, 2018
  • 1 reply
  • 936 views

Hello experts!

I made a small rather childish HTML5 animation of a spaceship, that should work on my contact page, so when the user presses the submit button on the mail form, something happens in the animation. If the contact form javascript, used for validating the form, returns success, the spaceship should go of, and If error is returned, the fuse burns out and the spaceship just stays on the ground. You can use a substitute for the form submitbutton, by pressing the hatch on the spaceship.
I think I have the animation under control, but I need help activating the 2 Animate-functions (success or error) from my contact form javascript file which I have put a prettyfied version of on this link.

Can someone tell me how it's done? Many thanks in advance

    This topic has been closed for replies.
    Correct answer kglad

    if(success){

    spaceship.play();  /* assuming your spaceship animation is timeline based.  otherwise, use code to start the loop to animate your spaceship. */

    }

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    January 13, 2018

    if(success){

    spaceship.play();  /* assuming your spaceship animation is timeline based.  otherwise, use code to start the loop to animate your spaceship. */

    }

    shasimo
    shasimoAuthor
    Inspiring
    January 13, 2018

    Thanks for the answer. So from the external contact_me.js I should just put my Animate function call in this function?

    success: function() {
                        // Success message
                        $('#success').html("<div class='alert alert-success'>");
                        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                            .append("</button>");
                        $('#success > .alert-success')
                            .append("<strong>Din besked er sendt! </strong>");
                        $('#success > .alert-success')
                            .append('</div>');
                        //clear all fields
                        $('#contactForm').trigger("reset");
                    },
                    error: function() {
                        // Fail message
                        $('#success').html("<div class='alert alert-danger'>");
                        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                            .append("</button>");
                        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", det ser desværre ud som om mail serveren er ude af drift. Prøv venligst igen, eller send en alm. mail på info@makemedia.dk");
                        $('#success > .alert-danger').append('</div>');
                        //clear all fields
                        $('#contactForm').trigger("reset");
                    },
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices