javascript - CSS flip animation? -


i have simple html form asking general information button @ bottom labeled "next". once button pressed, have jquery triggered cause "card flip" animation. reveal additional questions on "back" side of flip, containing "submit" button @ bottom of side. need way create blank page on side, can enter additional input fields.

what easiest way remove input fields on front side of form, can create additional questions on side of form?

$(document).ready(function() {    $("input[name='next']").on("click", function() {      // console.log( "the button worked!" );      $(".form").css("transform", "rotatey(180deg)");    })  });
/*css form*/    .form {    transform-style: preserve-3d;    -webkit-transition-duration: 2s;    -moz-transition-duration: 2s;    -o-transition-duration: 2s;    transition-duration: 2s;  }  .flex {    display: flex;    flex-direction: column;    flex-wrap: nowrap;    align-items: space-between;  }  .formtitle {    border-bottom: solid red;  }  .form-style-5 {    position: relative;    top: 5px;    max-width: 60%;    max-height: 82vh;    padding: 10px 20px;    background: #f4f7f8;    margin: 10px auto;    border-radius: 8px;    font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;  }  #form-style-5-animation {    animation: slide 3s 1;  }  @keyframes slide {    0% {      transform: translate3d(0px, 1000%, 0px);    }    100% {      transform: translate3d(0px, 0%, 0px);    }  }  .form-style-5:after {    opacity: 1;  }  .form-style-5 fieldset {    border: none;  }  .form-style-5 legend {    font-size: 1.4em;    margin-bottom: 10px;  }  .form-style-5 label {    font-size: 1.3em;    display: block;    margin-bottom: 8px;  }  .form-style-5 input[type="text"],  .form-style-5 input[type="date"],  .form-style-5 input[type="datetime"],  .form-style-5 input[type="email"],  .form-style-5 input[type="location"],  .form-style-5 input[type="number"],  .form-style-5 input[type="search"],  .form-style-5 input[type="time"],  .form-style-5 input[type="url"],  .form-style-5 textarea,  .form-style-5 select {    font-family: georgia, "times new roman", times, serif;    background: rgba(255, 255, 255, .1);    border: none;    border-radius: 4px;    font-size: 16px;    margin: 0;    outline: 0;    padding-left: 2%;    height: 6%;    width: 100%;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    background-color: #e8eeef;    color: #8a97a0;    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;    margin-bottom: 3%;  }  .form-style-5 input[type="text"]:focus,  .form-style-5 input[type="date"]:focus,  .form-style-5 input[type="datetime"]:focus,  .form-style-5 input[type="email"]:focus,  .form-style-5 input[type="number"]:focus,  .form-style-5 input[type="search"]:focus,  .form-style-5 input[type="time"]:focus,  .form-style-5 input[type="location"]:focus,  .form-style-5 textarea:focus,  .form-style-5 select:focus {    background: #d2d9dd;  }  .form-style-5 select {    -webkit-appearance: menulist-button;    height: 35px;  }  .form-style-5 .number {    background: red;    color: #fcfbe3;    height: 25px;    width: 25px;    display: inline-block;    font-size: 0.8em;    margin-right: 4px;    line-height: 25px;    text-align: center;    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);    border-radius: 0px 15px 15px 15px;    margin-bottom: 3%;  }  .form-style-5 input[type="submit"],  .form-style-5 input[type="button"] {    position: relative;    display: block;    padding: 10px 39px 10px 39px;    color: #fcfbe3;    margin: 0 auto;    background: red;    font-size: 18px;    text-align: center;    font-style: normal;    width: 100%;    border: 1px solid red;    border-width: 1px 1px 3px;    margin-bottom: 10px;    box-shadow: 0 5px 0 #b30000;    border-radius: 4px;  }  .form-style-5 input[type="submit"]:active,  .form-style-5 input[type="button"]:active {    transform: translatey(3px);    box-shadow: 0 2px 0 #b30000;  }  .form-style-5 input[type="submit"]:focus,  .form-style-5 input[type="button"]:focus {    outline: 0;  }  .next {    -webkit-transition-duration: .01s;    -moz-transition-duration: .01s;    -o-transition-duration: .01s;    transition-duration: .01s;    -webkit-transition-property: -webkit-transform;    -moz-transition-property: -moz-transform;    -o-transition-property: -o-transform;    transition-property: transform;  }  /*the rest of css*/    body,  div,  h1,  h1,  h3,  h4,  h5,  h6,  p,  ul,  ol,  li,  dl,  dt,  dd,  img,  form {    margin: 0;    padding: 0;    border: 0;  }  body {    text-align: center;  }  .logo {    position: absolute;    left: 0;    top: 0;    height: 55px;    width: 162px;    float: left;    z-index: 222;    opacity: 1;  }  header {    height: 60px;    width: 100%;    z-index: 10;    position: fixed;    opacity: .8;  }  .banner {    background: black;    width: 100%;    height: 100%;    position: absolute;    top: 0px;    opacity: .8;  }  #banner {    width: 100%;    height: 100%;    position: fixed;    top: 0px;    background: url("banner.jpg");    background-size: 100% 100%;    background-repeat: no-repeat;    padding-top: 10px;    font-size: 100%;    text-shadow: 20px black;    font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;  }  .button1,  .button2,  .button3,  .button4 {    border-radius: 8px;    width: 120px;    margin-top: 10px;    margin-right: 5px;    margin-left: 5px;    padding-top: 10px;    padding-right: 10px;    padding-bottom: 10px;    padding-left: 10px;    float: right;    border-style: solid;    border-color: red;    border-width: 1.5px;    color: red;    background-color: black;    font-size: 14px;  }  .button1:hover,  .button2:hover,  .button3:hover,  .button4:hover {    background-color: red;    color: white;    opacity: 1;    z-index: 9999;  }  .button1:focus,  .button2:focus,  .button3:focus,  .button4:focus {    outline: 0;  }  #formopacity {    opacity: 1;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>    <div id="container">    <div id="banner">      <div class="banner"></div>      <div class="form-style-5" id="form-style-5-animation">        <div class="form">          <form action="send-sms.php" method="post">            <fieldset class='flex'>              <legend>                <div class="formtitle">fill out form below request help!</div>              </legend>              <input type="text" name="field1" id="name" placeholder="your name *">              <input type="text" name="field3" id="location" placeholder="your location (i.e. mcnutt, exact address, etc.)*">              <input type="text" name="field4" id="misc" placeholder="miscellaneous information may important">              <input type="email" name="field2" id="email" placeholder="email address"><span class="number">or</span>              </h4>              <input type="text" name="field5" id="phone" placeholder="phone number">              <input type="text" id="task" name="field6" placeholder="task needs completion, let know how can help!*"></input>            </fieldset>            <input name="next" type="button" value="next" class="next" />          </form>        </div>      </div>    </div>  </div>

you have 2 <div>s, 1 id of #front-side , other #back-side. when click card, sets #front-side display: none; , #back-side display: block; , vice versa.

so code, if reading right:

<div class="form">   <div id="front-side">           <form action="send-sms.php" method="post">       <fieldset class='flex'>         <legend>           <div class="formtitle">             fill out form below request help!           </div>         </legend>         <input type="text" name="field1" id="name" placeholder="your name *">         <input type="text" name="field3" id="location" placeholder="your location">         <input type="text" name="field4" id="misc" placeholder="miscellaneous information may important">         <input type="email" name="field2" id="email" placeholder="email address"><span class="number">or</span>         </h4>         <input type="text" name="field5" id="phone" placeholder="phone number">         <input type="text" id="task" name="field6" placeholder="task needs completion, let know how can help!*"></input>       </fieldset>       <input name="next" type="button" value="next" class="next" />     </form>   </div>   <div id="back-side">     <span>back-side stuff here</span>   </div> </div>

Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more