Advertisement
Techno-Hamed

Untitled

Apr 21st, 2024
753
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.05 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.   <title>Login / Sign Up</title>
  7.   <link rel="stylesheet" href="style.css" />
  8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  9. </head>
  10. <body>
  11.   <style>
  12.     @import "bourbon";
  13.  
  14. // variables - colors
  15.  
  16. $main-text: #505260; // main text
  17. $background: #fff; // body background color
  18.  
  19. $color-1: #343642; // blue-dark
  20. $color-2: #2f889a; // blue-light
  21. $color-3: #d2d8d8; // grey
  22.  
  23. $red: #d76666; // error messages
  24.  
  25. // variables - fonts
  26.  
  27. $primary-font: 'PT Sans', sans-serif;
  28.  
  29. // variables - z-index
  30.  
  31. $header-zindex: 2;
  32. $modal-zindex: 3;
  33.  
  34. // variables - header
  35.  
  36. $header-height-S: 50px;
  37. $header-height-M: 80px;
  38.  
  39. // mixins - rem fallback - credits: http://zerosixthree.se/
  40.  
  41. @function calculateRem($size) {
  42.   $remSize: $size / 16px;
  43.   @return $remSize * 1rem;
  44. }
  45.  
  46. @mixin font-size($size) {
  47.   font-size: $size;
  48.   font-size: calculateRem($size);
  49. }
  50.  
  51. // mixins - center vertically and/or horizontally an absolute positioned element
  52.  
  53. @mixin center($xy:xy) {
  54.   @if $xy == xy {
  55.     left: 50%;
  56.     top: 50%;
  57.     bottom: auto;
  58.     right: auto;
  59.     @include transform(translateX(-50%) translateY(-50%));
  60.   }
  61.   @else if $xy == x {
  62.     left: 50%;
  63.     right: auto;
  64.     @include transform(translateX(-50%));
  65.   }
  66.   @else if $xy == y {
  67.     top: 50%;
  68.     bottom: auto;
  69.     @include transform(translateY(-50%));
  70.   }
  71. }
  72.  
  73. // mixins - border radius
  74.  
  75. @mixin border-radius($radius:.25em) {
  76.   border-radius: $radius;
  77. }
  78.  
  79. // layout - breakpoints
  80.  
  81. $S:     600px;  
  82. $M:     768px;    
  83. $L:     1170px;    
  84.  
  85. // layout - media queries
  86.  
  87. @mixin MQ($canvas) {
  88.   @if $canvas == S {
  89.    @media only screen and (min-width: $S) { @content; }
  90.   }
  91.   @else if $canvas == M {
  92.    @media only screen and (min-width: $M) { @content; }
  93.   }
  94.   @else if $canvas == L {
  95.    @media only screen and (min-width: $L) { @content; }
  96.   }
  97. }
  98.  
  99. // layout - super light grid - it works with the .cd-container class
  100.  
  101. @mixin column($percentage, $float-direction:left) {
  102.   width: 100% * $percentage;
  103.   float: $float-direction;
  104. }
  105.  
  106. /* --------------------------------
  107.  
  108. Primary style
  109.  
  110. -------------------------------- */
  111.  
  112. html * {
  113.     -webkit-font-smoothing: antialiased;
  114.     -moz-osx-font-smoothing: grayscale;
  115. }
  116.  
  117. *, *:after, *:before {
  118.     @include box-sizing(border-box);
  119. }
  120.  
  121. body {
  122.     font: {
  123.         size: 100%;
  124.         family: $primary-font;
  125.     }
  126.     color: $main-text;
  127.     background-color: $background;
  128. }
  129.  
  130. a {
  131.     color: $color-2;
  132.     text-decoration: none;
  133. }
  134.  
  135. img {
  136.     max-width: 100%;
  137. }
  138.  
  139. input, textarea {
  140.     font-family: $primary-font;
  141.     @include font-size(16px);
  142.  
  143.     &::-ms-clear {
  144.         display: none;
  145.     }
  146. }
  147.  
  148. /* --------------------------------
  149.  
  150. Main components
  151.  
  152. -------------------------------- */
  153.  
  154. header[role=banner] {
  155.     position: relative;
  156.     height: $header-height-S;
  157.     background: $color-1;
  158.  
  159.     #cd-logo {
  160.         float: left;
  161.         margin: 4px 0 0 5%;
  162.  
  163.         /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
  164.         @include transform-origin(0 50%);
  165.         @include transform(scale(.8));
  166.  
  167.         img {
  168.             display: block;
  169.         }
  170.     }
  171.  
  172.     &::after { /* clearfix */
  173.         content: '';
  174.         display: table;
  175.         clear: both;
  176.     }
  177.  
  178.     @include MQ(M) {
  179.         height: $header-height-M;
  180.  
  181.         #cd-logo {
  182.             margin: 20px 0 0 5%;
  183.             @include transform(scale(1));
  184.         }
  185.     }
  186. }
  187.  
  188. .main-nav {
  189.     float: right;
  190.     margin-right: 5%;
  191.     width: 44px;
  192.     height: 100%;
  193.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-menu.svg') no-repeat center center;
  194.     cursor: pointer;
  195.  
  196.     ul {
  197.         position: absolute;
  198.         top: 0;
  199.         left: 0;
  200.         width: 100%;
  201.  
  202.         @include transform(translateY(-100%));
  203.  
  204.         &.is-visible {
  205.             @include transform(translateY($header-height-S));
  206.         }
  207.     }
  208.  
  209.     a {
  210.         display: block;
  211.         height: $header-height-S;
  212.         line-height: $header-height-S;
  213.         padding-left: 5%;
  214.         background: darken($color-1, 5%);
  215.         border-top: 1px solid lighten($color-1, 3%);
  216.         color: #FFF;
  217.     }
  218.  
  219.     @include MQ(M) {
  220.         width: auto;
  221.         height: auto;
  222.         background: none;
  223.         cursor: auto;
  224.  
  225.         ul {
  226.             position: static;
  227.             width: auto;
  228.             @include transform(translateY(0));
  229.             line-height: $header-height-M;
  230.  
  231.             &.is-visible {
  232.                 @include transform(translateY(0));
  233.             }
  234.         }
  235.  
  236.         li {
  237.             display: inline-block;
  238.             margin-left: 1em;
  239.  
  240.             &:nth-last-child(2) {
  241.                 margin-left: 2em;
  242.             }
  243.         }
  244.  
  245.         a {
  246.             display: inline-block;
  247.             height: auto;
  248.             line-height: normal;
  249.             background: transparent;
  250.  
  251.             &.cd-signin, &.cd-signup {
  252.                 padding: .6em 1em;
  253.                 border: 1px solid rgba(#FFF, .6);
  254.                 border-radius: 50em;
  255.             }
  256.  
  257.             &.cd-signup {
  258.                 background: $color-2;
  259.                 border: none;
  260.             }
  261.         }
  262.     }
  263. }
  264.  
  265. /* --------------------------------
  266.  
  267. xsigin/signup popup
  268.  
  269. -------------------------------- */
  270.  
  271.  
  272. .cd-user-modal {
  273.     position: fixed;
  274.     top: 0;
  275.     left: 0;
  276.     width: 100%;
  277.     height: 100%;
  278.     background: rgba($color-1, .9);
  279.     z-index: $modal-zindex;
  280.     overflow-y: auto;
  281.     cursor: pointer;
  282.  
  283.     visibility: hidden;
  284.     opacity: 0;
  285.     @include transition(opacity .3s 0, visibility 0 .3s);
  286.  
  287.     &.is-visible {
  288.         visibility: visible;
  289.         opacity: 1;
  290.  
  291.         @include transition(opacity .3s 0, visibility 0 0);
  292.  
  293.         .cd-user-modal-container {
  294.             @include transform(translateY(0));
  295.         }
  296.     }
  297. }
  298.  
  299. .cd-user-modal-container {
  300.     position: relative;
  301.     width: 90%;
  302.     max-width: 600px;
  303.     background: #FFF;
  304.     margin: 3em auto 4em;
  305.     cursor: auto;
  306.     @include border-radius;
  307.     @include transform(translateY(-30px));
  308.  
  309.     @include transition-property (transform);
  310.     @include transition-duration(.3s);
  311.  
  312.     .cd-switcher {
  313.         @include clearfix;
  314.  
  315.         li {
  316.             @include column(.5);
  317.             text-align: center;
  318.  
  319.             &:first-child a {
  320.                 border-radius: .25em 0 0 0;
  321.             }
  322.  
  323.             &:last-child a {
  324.                 border-radius: 0 .25em 0 0;
  325.             }
  326.         }
  327.  
  328.         a {
  329.             display: block;
  330.             width: 100%;
  331.             height: 50px;
  332.             line-height: 50px;
  333.             background: $color-3;
  334.             color: darken($color-3, 30%);
  335.  
  336.             &.selected {
  337.                 background: #FFF;
  338.                 color: $main-text;
  339.             }
  340.         }
  341.     }
  342.  
  343.     @include MQ(S) {
  344.         margin: 4em auto;
  345.  
  346.         .cd-switcher a {
  347.             height: 70px;
  348.             line-height: 70px;
  349.         }
  350.     }
  351. }
  352.  
  353. .cd-form {
  354.     padding: 1.4em;
  355.  
  356.     .fieldset {
  357.         position: relative;
  358.         margin: 1.4em 0;
  359.  
  360.         &:first-child {
  361.             margin-top: 0;
  362.         }
  363.  
  364.         &:last-child {
  365.             margin-bottom: 0;
  366.         }
  367.     }
  368.  
  369.     label {
  370.         @include font-size(14px);
  371.  
  372.         &.image-replace {
  373.             /* replace text with an icon */
  374.             display: inline-block;
  375.             position: absolute;
  376.             left: 15px;
  377.             @include center(y);
  378.             height: 20px;
  379.             width: 20px;
  380.  
  381.             overflow: hidden;
  382.             text-indent: 100%;
  383.             white-space: nowrap;
  384.             color: transparent;
  385.             text-shadow: none;
  386.  
  387.             background-repeat: no-repeat;
  388.             background-position: 50% 0;
  389.         }
  390.  
  391.         &.cd-username {
  392.             background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-username.svg');
  393.         }
  394.  
  395.         &.cd-email {
  396.             background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-email.svg');
  397.         }
  398.  
  399.         &.cd-password {
  400.             background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-password.svg');
  401.         }
  402.     }
  403.  
  404.     input {
  405.         margin: 0;
  406.         padding: 0;
  407.         @include border-radius;
  408.  
  409.         &.full-width {
  410.             width: 100%;
  411.         }
  412.  
  413.         &.has-padding {
  414.             padding: 12px 20px 12px 50px;
  415.         }
  416.  
  417.         &.has-border {
  418.             border: 1px solid $color-3;
  419.             @include appearance(none);
  420.  
  421.             &:focus {
  422.                 border-color: $color-1;
  423.                 box-shadow: 0 0 5px rgba($color-1, .1);
  424.                 outline: none;
  425.             }
  426.         }
  427.  
  428.         &.has-error {
  429.             border: 1px solid $red;
  430.         }
  431.  
  432.         &[type=password] {
  433.             /* space left for the HIDE button */
  434.             padding-right: 65px;
  435.         }
  436.  
  437.         &[type=submit] {
  438.             padding: 16px 0;
  439.             cursor: pointer;
  440.             background: $color-2;
  441.             color: #FFF;
  442.             font-weight: bold;
  443.             border: none;
  444.             @include appearance(none);
  445.  
  446.             .no-touch &:hover, .no-touch &:focus {
  447.                 background: lighten($color-2, 5%);
  448.                 outline: none;
  449.             }
  450.         }
  451.     }
  452.  
  453.     .hide-password {
  454.         display: inline-block;
  455.         position: absolute;
  456.         right: 0;
  457.         top: 0;
  458.         padding: 6px 15px;
  459.         border-left: 1px solid $color-3;
  460.         @include center(y);
  461.         @include font-size(14px);
  462.         color: $color-1;
  463.     }
  464.  
  465.     .cd-error-message {
  466.         display: inline-block;
  467.         position: absolute;
  468.         left: -5px;
  469.         bottom: -35px;
  470.         background: rgba($red, .9);
  471.         padding: .8em;
  472.         z-index: 2;
  473.         color: #FFF;
  474.         @include font-size(13px);
  475.         @include border-radius;
  476.  
  477.         /* prevent click and touch events */
  478.         pointer-events: none;
  479.  
  480.         visibility: hidden;
  481.         opacity: 0;
  482.  
  483.         @include transition(opacity .2s 0, visibility 0 .2s);
  484.  
  485.         &::after {
  486.             /* triangle */
  487.             content: '';
  488.             position: absolute;
  489.             left: 22px;
  490.             bottom: 100%;
  491.             @include triangle(16px, rgba($red, .9), up);
  492.         }
  493.  
  494.         &.is-visible {
  495.             opacity: 1;
  496.             visibility: visible;
  497.  
  498.             @include transition(opacity .2s 0, visibility 0 0);
  499.         }
  500.     }
  501.  
  502.     @include MQ(S) {
  503.         padding: 2em;
  504.  
  505.         .fieldset {
  506.             margin: 2em 0;
  507.  
  508.             &:first-child {
  509.                 margin-top: 0;
  510.             }
  511.  
  512.             &:last-child {
  513.                 margin-bottom: 0;
  514.             }
  515.         }
  516.  
  517.         input.has-padding {
  518.             padding: 16px 20px 16px 50px;
  519.         }
  520.  
  521.         input[type=submit] {
  522.             padding: 16px 0;
  523.         }
  524.     }
  525. }
  526.  
  527. .cd-form-message {
  528.     padding: 1.4em 1.4em 0;
  529.     @include font-size(14px);
  530.     line-height: 1.4;
  531.     text-align: center;
  532.  
  533.     @include MQ(S) {
  534.         padding: 2em 2em 0;
  535.     }
  536. }
  537.  
  538. .cd-form-bottom-message {
  539.     position: absolute;
  540.     width: 100%;
  541.     left: 0;
  542.     bottom: -30px;
  543.     text-align: center;
  544.     @include font-size(14px);
  545.  
  546.     a {
  547.         color: #FFF;
  548.         text-decoration: underline;
  549.     }
  550. }
  551.  
  552. .cd-close-form {
  553.     /* form X button on top right */
  554.     display: block;
  555.     position: absolute;
  556.     width: 40px;
  557.     height: 40px;
  558.     right: 0;
  559.     top: -40px;
  560.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close.svg') no-repeat center center;
  561.     text-indent: 100%;
  562.     white-space: nowrap;
  563.     overflow: hidden;
  564.  
  565.     @include MQ(L) {
  566.         display: none;
  567.     }
  568. }
  569.  
  570. #cd-login, #cd-signup, #cd-reset-password {
  571.     display: none;
  572. }
  573.  
  574. #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
  575.     display: block;
  576. }
  577.   </style>
  578.  
  579.     <header role="banner">
  580.         <div id="cd-logo"><a href="#0"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-logo_1.svg" alt="Logo"></a></div>
  581.  
  582.         <nav class="main-nav">
  583.             <ul>
  584.                 <!-- inser more links here -->
  585.                 <li><a class="cd-signin" href="#0">Sign in</a></li>
  586.                 <li><a class="cd-signup" href="#0">Sign up</a></li>
  587.             </ul>
  588.         </nav>
  589.     </header>
  590.  
  591.     <div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
  592.         <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
  593.             <ul class="cd-switcher">
  594.                 <li><a href="#0">Sign in</a></li>
  595.                 <li><a href="#0">New account</a></li>
  596.             </ul>
  597.  
  598.             <div id="cd-login"> <!-- log in form -->
  599.                 <form class="cd-form">
  600.                     <p class="fieldset">
  601.                         <label class="image-replace cd-email" for="signin-email">E-mail</label>
  602.                         <input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
  603.                         <span class="cd-error-message">Error message here!</span>
  604.                     </p>
  605.  
  606.                     <p class="fieldset">
  607.                         <label class="image-replace cd-password" for="signin-password">Password</label>
  608.                         <input class="full-width has-padding has-border" id="signin-password" type="text"  placeholder="Password">
  609.                         <a href="#0" class="hide-password">Hide</a>
  610.                         <span class="cd-error-message">Error message here!</span>
  611.                     </p>
  612.  
  613.                     <p class="fieldset">
  614.                         <input type="checkbox" id="remember-me" checked>
  615.                         <label for="remember-me">Remember me</label>
  616.                     </p>
  617.  
  618.                     <p class="fieldset">
  619.                         <input class="full-width" type="submit" value="Login">
  620.                     </p>
  621.                 </form>
  622.                
  623.                 <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
  624.                 <!-- <a href="#0" class="cd-close-form">Close</a> -->
  625.             </div> <!-- cd-login -->
  626.  
  627.             <div id="cd-signup"> <!-- sign up form -->
  628.                 <form class="cd-form">
  629.                     <p class="fieldset">
  630.                         <label class="image-replace cd-username" for="signup-username">Username</label>
  631.                         <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
  632.                         <span class="cd-error-message">Error message here!</span>
  633.                     </p>
  634.  
  635.                     <p class="fieldset">
  636.                         <label class="image-replace cd-email" for="signup-email">E-mail</label>
  637.                         <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
  638.                         <span class="cd-error-message">Error message here!</span>
  639.                     </p>
  640.  
  641.                     <p class="fieldset">
  642.                         <label class="image-replace cd-password" for="signup-password">Password</label>
  643.                         <input class="full-width has-padding has-border" id="signup-password" type="text"  placeholder="Password">
  644.                         <a href="#0" class="hide-password">Hide</a>
  645.                         <span class="cd-error-message">Error message here!</span>
  646.                     </p>
  647.  
  648.                     <p class="fieldset">
  649.                         <input type="checkbox" id="accept-terms">
  650.                         <label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
  651.                     </p>
  652.  
  653.                     <p class="fieldset">
  654.                         <input class="full-width has-padding" type="submit" value="Create account">
  655.                     </p>
  656.                 </form>
  657.  
  658.                 <!-- <a href="#0" class="cd-close-form">Close</a> -->
  659.             </div> <!-- cd-signup -->
  660.  
  661.             <div id="cd-reset-password"> <!-- reset password form -->
  662.                 <p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
  663.  
  664.                 <form class="cd-form">
  665.                     <p class="fieldset">
  666.                         <label class="image-replace cd-email" for="reset-email">E-mail</label>
  667.                         <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
  668.                         <span class="cd-error-message">Error message here!</span>
  669.                     </p>
  670.  
  671.                     <p class="fieldset">
  672.                         <input class="full-width has-padding" type="submit" value="Reset password">
  673.                     </p>
  674.                 </form>
  675.  
  676.                 <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
  677.             </div> <!-- cd-reset-password -->
  678.             <a href="#0" class="cd-close-form">Close</a>
  679.         </div> <!-- cd-user-modal-container -->
  680.     </div> <!-- cd-user-modal -->
  681. <script>
  682.   jQuery(document).ready(function($){
  683.     var $form_modal = $('.cd-user-modal'),
  684.         $form_login = $form_modal.find('#cd-login'),
  685.         $form_signup = $form_modal.find('#cd-signup'),
  686.         $form_forgot_password = $form_modal.find('#cd-reset-password'),
  687.         $form_modal_tab = $('.cd-switcher'),
  688.         $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
  689.         $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
  690.         $forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
  691.         $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
  692.         $main_nav = $('.main-nav');
  693.  
  694.     //open modal
  695.     $main_nav.on('click', function(event){
  696.  
  697.         if( $(event.target).is($main_nav) ) {
  698.             // on mobile open the submenu
  699.             $(this).children('ul').toggleClass('is-visible');
  700.         } else {
  701.             // on mobile close submenu
  702.             $main_nav.children('ul').removeClass('is-visible');
  703.             //show modal layer
  704.             $form_modal.addClass('is-visible');
  705.             //show the selected form
  706.             ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
  707.         }
  708.  
  709.     });
  710.  
  711.     //close modal
  712.     $('.cd-user-modal').on('click', function(event){
  713.         if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
  714.             $form_modal.removeClass('is-visible');
  715.         }  
  716.     });
  717.     //close modal when clicking the esc keyboard button
  718.     $(document).keyup(function(event){
  719.         if(event.which=='27'){
  720.             $form_modal.removeClass('is-visible');
  721.         }
  722.     });
  723.  
  724.     //switch from a tab to another
  725.     $form_modal_tab.on('click', function(event) {
  726.         event.preventDefault();
  727.         ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
  728.     });
  729.  
  730.     //hide or show password
  731.     $('.hide-password').on('click', function(){
  732.         var $this= $(this),
  733.             $password_field = $this.prev('input');
  734.        
  735.         ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
  736.         ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
  737.         //focus and move cursor to the end of input field
  738.         $password_field.putCursorAtEnd();
  739.     });
  740.  
  741.     //show forgot-password form
  742.     $forgot_password_link.on('click', function(event){
  743.         event.preventDefault();
  744.         forgot_password_selected();
  745.     });
  746.  
  747.     //back to login from the forgot-password form
  748.     $back_to_login_link.on('click', function(event){
  749.         event.preventDefault();
  750.         login_selected();
  751.     });
  752.  
  753.     function login_selected(){
  754.         $form_login.addClass('is-selected');
  755.         $form_signup.removeClass('is-selected');
  756.         $form_forgot_password.removeClass('is-selected');
  757.         $tab_login.addClass('selected');
  758.         $tab_signup.removeClass('selected');
  759.     }
  760.  
  761.     function signup_selected(){
  762.         $form_login.removeClass('is-selected');
  763.         $form_signup.addClass('is-selected');
  764.         $form_forgot_password.removeClass('is-selected');
  765.         $tab_login.removeClass('selected');
  766.         $tab_signup.addClass('selected');
  767.     }
  768.  
  769.     function forgot_password_selected(){
  770.         $form_login.removeClass('is-selected');
  771.         $form_signup.removeClass('is-selected');
  772.         $form_forgot_password.addClass('is-selected');
  773.     }
  774.  
  775.     //REMOVE THIS - it's just to show error messages
  776.     $form_login.find('input[type="submit"]').on('click', function(event){
  777.         event.preventDefault();
  778.         $form_login.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
  779.     });
  780.     $form_signup.find('input[type="submit"]').on('click', function(event){
  781.         event.preventDefault();
  782.         $form_signup.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
  783.     });
  784.  
  785.  
  786.     //IE9 placeholder fallback
  787.     //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
  788.     if(!Modernizr.input.placeholder){
  789.         $('[placeholder]').focus(function() {
  790.             var input = $(this);
  791.             if (input.val() == input.attr('placeholder')) {
  792.                 input.val('');
  793.             }
  794.         }).blur(function() {
  795.             var input = $(this);
  796.             if (input.val() == '' || input.val() == input.attr('placeholder')) {
  797.                 input.val(input.attr('placeholder'));
  798.             }
  799.         }).blur();
  800.         $('[placeholder]').parents('form').submit(function() {
  801.             $(this).find('[placeholder]').each(function() {
  802.                 var input = $(this);
  803.                 if (input.val() == input.attr('placeholder')) {
  804.                     input.val('');
  805.                 }
  806.             })
  807.         });
  808.     }
  809.  
  810. });
  811.  
  812. //credits https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
  813. jQuery.fn.putCursorAtEnd = function() {
  814.     return this.each(function() {
  815.         // If this function exists...
  816.         if (this.setSelectionRange) {
  817.             // ... then use it (Doesn't work in IE)
  818.             // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
  819.             var len = $(this).val().length * 2;
  820.             this.setSelectionRange(len, len);
  821.         } else {
  822.             // ... otherwise replace the contents with itself
  823.             // (Doesn't work in Google Chrome)
  824.             $(this).val($(this).val());
  825.         }
  826.     });
  827. };
  828. </script>
  829. </body>
  830. </html>
  831.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement