"Login & Signup forms in panel"
Bootstrap 3.1.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Sign In</div> <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div> </div> <div style="padding-top:30px" class="panel-body" > <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form id="loginform" class="form-horizontal" role="form"> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me </label> </div> </div> <div style="margin-top:10px" class="form-group"> <!-- Button --> <div class="col-sm-12 controls"> <a id="btn-login" href="#" class="btn btn-success">Login </a> </div> </div> <div class="form-group"> <div class="col-md-12 control"> <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account! <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> Sign Up Here </a> </div> </div> </div> </form> </div> </div> </div> <div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Sign Up</div> <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div> </div> <div class="panel-body" > <form id="signupform" class="form-horizontal" role="form"> <div id="signupalert" style="display:none" class="alert alert-danger"> <p>Error:</p> <span></span> </div> <div class="form-group"> <label for="email" class="col-md-3 control-label">Email</label> <div class="col-md-9"> <input type="text" class="form-control" name="email" placeholder="Email Address"> </div> </div> <div class="form-group"> <label for="firstname" class="col-md-3 control-label">First Name</label> <div class="col-md-9"> <input type="text" class="form-control" name="firstname" placeholder="First Name"> </div> </div> <div class="form-group"> <label for="lastname" class="col-md-3 control-label">Last Name</label> <div class="col-md-9"> <input type="text" class="form-control" name="lastname" placeholder="Last Name"> </div> </div> <div class="form-group"> <label for="password" class="col-md-3 control-label">Password</label> <div class="col-md-9"> <input type="password" class="form-control" name="passwd" placeholder="Password"> </div> </div> <div class="form-group"> <!-- Button --> <div class="col-md-offset-3 col-md-9"> <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Sign Up</button> </div> </div> <div style="border-top: 1px solid #999; padding-top:20px" class="form-group"> </div> </form> </div> </div> </div> </div>
/*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2014 Hakim El Hattab, http://hakim.se */.ladda-button{position:relative}.ladda-button .ladda-spinner {position:absolute;z-index:2;display:inline-block;width:32px;height:32px; top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label {position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute ;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,.2);visibility:hidden; opacity:0;-webkit-transition:.1s linear all!important;-moz-transition: .1s linear all!important;-ms-transition:.1s linear all!important;-o-transition: .1s linear all!important;transition:.1s linear all!important} .ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button, .ladda-button .ladda-label,.ladda-button .ladda-spinner{-webkit-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;-moz-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;-ms-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;-o-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important} .ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-label,.ladda-button[data-style=zoom-out] .ladda-spinner{-webkit-transition:.3s ease all!important; -moz-transition:.3s ease all!important;-ms-transition:.3s ease all!important; -o-transition:.3s ease all!important;transition:.3s ease all!important} .ladda-button[data-style=expand-right] .ladda-spinner{right:-6px} .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size=xs] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading] {padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1} .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size=xs] {padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner {left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size=xs] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading] {padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1} .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size=xs] {padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden} .ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%; margin-left:0}.ladda-button[data-style=expand-up][data-loading] {padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size=xs]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size=xs] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size=xs] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size=xs]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0 0 0 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0 0 0 2000px rgba(0,0,0,.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1}.bs-header{color:#FFF;text-align:center;background-color:#5fb0e4;background-image:url(../img/triangles.jpg?ver=3);background-repeat:no-repeat;background-position:center center;background-size:cover;padding:10px 15px;font-size:16px;text-shadow:0 1px 0 rgba(0,0,0,.15)}.bs-header h1{color:#FFF;text-shadow:2px 2px 0 rgba(59,88,139,.4)}.bs-header p{font-weight:200;color:#A3D2FF;line-height:1.5}.bs-header a{color:#FFF}.bs-header .container{position:relative}.user-avatar-sm{width:40px;height:40px;border:2px solid #769fd1}.user-avatar-mini{width:18px;height:18px;border:1px solid #769fd1}.search-btn{border-radius:18px}.navbar-nav>li>a{padding:15px 8px}.search-results>li>a{margin-top:5px}.resource-list li,.tag-list li{float:left}.tag-list a:hover{background-color:#16a085!important}#social-sharing{padding-top:5px}.carbonad{width:100%!important;border-radius:5px;background:#EEE!important;border-color:#5F9CEB!important;border-width:1px;border-style:solid}span.carbonad-tag,span.carbonad-tag a{color:#525151!important}div.animbrand a:focus,div.animbrand a:hover{outline:0}.animbrand a::after,.animbrand a::before{display:inline-block;opacity:0;-webkit-transition:-webkit-transform .3s,opacity .2s;-moz-transition:-moz-transform .3s,opacity .2s;transition:transform .3s,opacity .2s}.animbrand a::before{margin-right:3px;content:'<';color:#428bca;font-size:22px;line-height:16px;-webkit-transform:translateX(50px);-moz-transform:translateX(50px);transform:translateX(50px)}.animbrand a::after{margin-left:3px;content:'>';color:#428bca;font-size:22px;line-height:16px;-webkit-transform:translateX(-50px);-moz-transform:translateX(-50px);transform:translateX(-50px)}.animbrand a:focus::after,.animbrand a:focus::before,.animbrand a:hover::after,.animbrand a:hover::before{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}@media screen and (min-width:768px){.bs-header{padding:5px 15px 10px;font-size:21px;text-align:center}.bs-header h1{font-size:60px;line-height:1}}.colorgraph{height:5px;border-top:0;background:#c4e17f;border-radius:5px;background-image:-webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)}.view-counts{padding-top:5px;margin-right:10px}.view-counts a{text-decoration:none;color:#000}.snipp-title{margin-left:10px}@media screen and (max-width:992px){.resource-list li,.tag-list li{float:none}}@media screen and (max-width:580px){.snipp-title{font-size:13px;padding-top:4px;width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width:992px){.snipp-title{font-size:14px;padding-top:4px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width:992px) and (max-width:1200px){.snipp-title{font-size:14px;width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.bootsnipp-thumb{margin-bottom:20px}.bootsnipp-thumb img{width:100%}.bs-footer{height:90px;color:#777;background-color:#FFF;text-align:center;margin-bottom:-20px;border-top:1px solid #e5e5e5}.footer-links{margin:10px 0;padding-left:0}.footer-links li{display:inline;padding:0 2px}.footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-footer{text-align:left}}.bs-social{margin-top:10px;margin-bottom:10px;text-align:center}.bs-social-buttons{display:inline-block;margin-bottom:0;padding-left:0;list-style:none}.bs-social-buttons li{display:inline-block;line-height:1;padding:5px 8px}.bs-social-buttons .facebook-btn{width:130px!important}.bs-social-buttons .twitter-follow-button{width:225px!important}.bs-social-buttons .twitter-share-button{width:98px!important}@media screen and (min-width:768px){.bs-social{text-align:left}.bs-social-buttons li:first-child{padding-left:0}}.bs-top-callout{padding-top:15px;color:#777;background-color:#F1F1F1;border-top:1px solid #fff;border-bottom:1px solid #e5e5e5;margin-bottom:20px}.bs-callout{margin:20px 0;padding:15px 30px 15px 15px;border-left:5px solid #eee}.bs-callout h4{margin-top:0}.bs-callout p:last-child{margin-bottom:0}.bs-callout .highlight,.bs-callout code{background-color:#fff}.bs-callout-danger{background-color:#fcf2f2;border-color:#dFb5b4;color:#b94a48}.bs-callout-warning{background-color:#FFEFA3;border-color:#f1e7bc;color:#9B8017}.bs-callout-info{background-color:#f0f7fd;border-color:#d0e3f0;color:#4D72AA}.bs-callout-success{background-color:#8AE287;border-color:#3BB65C}body,html{height:100%}#wrap{min-height:100%;height:auto!important;height:100%;margin:0 auto -90px;padding:0 0 90px}#playground-container{height:500px;overflow:scroll;-webkit-overflow-scrolling:touch}#preview-container{border-top:2px solid #CCC;border-bottom:2px solid #CCC;width:100%;height:100%}.preview-iframe{border:0;width:100%;height:100%}.playground-editor{padding:0;top:0;width:100%;height:500px;border:2px solid #CCC;border-radius:5px;position:absolute!important;display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.title-bar{background-color:#f5f5f5;padding:0;margin-bottom:10px;border-radius:6px}.title-bar>.avatar-sm-container,.title-bar>h4{padding:10px;margin:0}.social-sharing{padding-top:10px;padding-right:10px}.carbonads-container{margin-top:5px}@media screen and (min-width:768px){.theme-control{float:right}#tags{float:right;padding-top:5px}}@media screen and (max-width:767px){.theme-control{margin-top:10px}#tags{float:left;width:100%;margin-bottom:10px}}c
!function(e,t){"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Spinner=t()}(this,function(){"use strict";function e(e,t){var o,r=document.createElement(e||"div");for(o in t)r[o]=t[o];return r}function t(e){for(var t=1,o=arguments.length;o>t;t++)e.appendChild(arguments[t]);return e}function o(e,t,o,r){var n=["opacity",t,~~(100*e),o,r].join("-"),i=.01+o/r*100,a=Math.max(1-(1-e)/t*(100-i),e),s=c.substring(0,c.indexOf("Animation")).toLowerCase(),l=s&&"-"+s+"-"||"";return u[n]||(h.insertRule("@"+l+"keyframes "+n+"{0%{opacity:"+a+"}"+i+"%{opacity:"+e+"}"+(i+.01)+"%{opacity:1}"+(i+t)%100+"%{opacity:"+e+"}100%{opacity:"+a+"}}",h.cssRules.length),u[n]=1),n}function r(e,t){var o,r,n=e.style;for(t=t.charAt(0).toUpperCase()+t.slice(1),r=0;r<d.length;r++)if(o=d[r]+t,void 0!==n[o])return o;return void 0!==n[t]?t:void 0}function n(e,t){for(var o in t)e.style[r(e,o)||o]=t[o];return e}function i(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)void 0===e[r]&&(e[r]=o[r])}return e}function a(e,t){return"string"==typeof e?e:e[t%e.length]}function s(e){this.opts=i(e||{},s.defaults,f)}function l(){function o(t,o){return e("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',o)}h.addRule(".spin-vml","behavior:url(#default#VML)"),s.prototype.lines=function(e,r){function i(){return n(o("group",{coordsize:d+" "+d,coordorigin:-c+" "+-c}),{width:d,height:d})}function s(e,s,l){t(h,t(n(i(),{rotation:360/r.lines*e+"deg",left:~~s}),t(n(o("roundrect",{arcsize:r.corners}),{width:c,height:r.width,left:r.radius,top:-r.width>>1,filter:l}),o("fill",{color:a(r.color,e),opacity:r.opacity}),o("stroke",{opacity:0}))))}var l,c=r.length+r.width,d=2*c,u=2*-(r.width+r.length)+"px",h=n(i(),{position:"absolute",top:u,left:u});if(r.shadow)for(l=1;l<=r.lines;l++)s(l,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(l=1;l<=r.lines;l++)s(l);return t(e,h)},s.prototype.opacity=function(e,t,o,r){var n=e.firstChild;r=r.shadow&&r.lines||0,n&&t+r<n.childNodes.length&&(n=n.childNodes[t+r],n=n&&n.firstChild,n=n&&n.firstChild,n&&(n.opacity=o))}}var c,d=["webkit","Moz","ms","O"],u={},h=function(){var o=e("style",{type:"text/css"});return t(document.getElementsByTagName("head")[0],o),o.sheet||o.styleSheet}(),f={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};s.defaults={},i(s.prototype,{spin:function(t){this.stop();{var o=this,r=o.opts,i=o.el=n(e(0,{className:r.className}),{position:r.position,width:0,zIndex:r.zIndex});r.radius+r.length+r.width}if(n(i,{left:r.left,top:r.top}),t&&t.insertBefore(i,t.firstChild||null),i.setAttribute("role","progressbar"),o.lines(i,o.opts),!c){var a,s=0,l=(r.lines-1)*(1-r.direction)/2,d=r.fps,u=d/r.speed,h=(1-r.opacity)/(u*r.trail/100),f=u/r.lines;!function p(){s++;for(var e=0;e<r.lines;e++)a=Math.max(1-(s+(r.lines-e)*f)%u*h,r.opacity),o.opacity(i,e*r.direction+l,a,r);o.timeout=o.el&&setTimeout(p,~~(1e3/d))}()}return o},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=void 0),this},lines:function(r,i){function s(t,o){return n(e(),{position:"absolute",width:i.length+i.width+"px",height:i.width+"px",background:t,boxShadow:o,transformOrigin:"left",transform:"rotate("+~~(360/i.lines*d+i.rotate)+"deg) translate("+i.radius+"px,0)",borderRadius:(i.corners*i.width>>1)+"px"})}for(var l,d=0,u=(i.lines-1)*(1-i.direction)/2;d<i.lines;d++)l=n(e(),{position:"absolute",top:1+~(i.width/2)+"px",transform:i.hwaccel?"translate3d(0,0,0)":"",opacity:i.opacity,animation:c&&o(i.opacity,i.trail,u+d*i.direction,i.lines)+" "+1/i.speed+"s linear infinite"}),i.shadow&&t(l,n(s("#000","0 0 4px #000"),{top:"2px"})),t(r,t(l,s(a(i.color,d),"0 0 1px rgba(0,0,0,.1)")));return r},opacity:function(e,t,o){t<e.childNodes.length&&(e.childNodes[t].style.opacity=o)}});var p=n(e("group"),{behavior:"url(#default#VML)"});return!r(p,"transform")&&p.adj?l():c=r(p,"animation"),s}),function(e){if("object"==typeof exports)e(require("jquery"),require("spin"));else if("function"==typeof define&&define.amd)define(["jquery","spin"],e);else{if(!window.Spinner)throw new Error("Spin.js not present");e(window.jQuery,window.Spinner)}}(function(e,t){e.fn.spin=function(o,r){return this.each(function(){var n=e(this),i=n.data();i.spinner&&(i.spinner.stop(),delete i.spinner),o!==!1&&(o=e.extend({color:r||n.css("color")},e.fn.spin.presets[o]||o),i.spinner=new t(o).spin(this))})},e.fn.spin.presets={tiny:{lines:8,length:2,width:2,radius:3},small:{lines:8,length:4,width:3,radius:5},large:{lines:10,length:8,width:4,radius:8}}}),function(e,t){"object"==typeof exports?module.exports=t(require("spin.js")):"function"==typeof define&&define.amd?define(["spin"],t):e.Ladda=t(e.Spinner)}(this,function(e){"use strict";function t(e){if(void 0===e)return void console.warn("Ladda button target must be defined.");e.querySelector(".ladda-label")||(e.innerHTML='<span class="ladda-label">'+e.innerHTML+"</span>");var t,o=document.createElement("span");o.className="ladda-spinner",e.appendChild(o);var r,n={start:function(){return t||(t=a(e)),e.setAttribute("disabled",""),e.setAttribute("data-loading",""),clearTimeout(r),t.spin(o),this.setProgress(0),this},startAfter:function(e){return clearTimeout(r),r=setTimeout(function(){n.start()},e),this},stop:function(){return e.removeAttribute("disabled"),e.removeAttribute("data-loading"),clearTimeout(r),t&&(r=setTimeout(function(){t.stop()},1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(t){t=Math.max(Math.min(t,1),0);var o=e.querySelector(".ladda-progress");0===t&&o&&o.parentNode?o.parentNode.removeChild(o):(o||(o=document.createElement("div"),o.className="ladda-progress",e.appendChild(o)),o.style.width=(t||0)*e.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),e.setAttribute("disabled",""),this},isLoading:function(){return e.hasAttribute("data-loading")},remove:function(){clearTimeout(r),e.removeAttribute("disabled",""),e.removeAttribute("data-loading",""),t&&(t.stop(),t=null);for(var o=0,i=l.length;i>o;o++)if(n===l[o]){l.splice(o,1);break}}};return l.push(n),n}function o(e,t){for(;e.parentNode&&e.tagName!==t;)e=e.parentNode;return t===e.tagName?e:void 0}function r(e){for(var t=["input","textarea"],o=[],r=0;t.length>r;r++)for(var n=e.getElementsByTagName(t[r]),i=0;n.length>i;i++)n[i].hasAttribute("required")&&o.push(n[i]);return o}function n(e,n){n=n||{};var i=[];"string"==typeof e?i=s(document.querySelectorAll(e)):"object"==typeof e&&"string"==typeof e.nodeName&&(i=[e]);for(var a=0,l=i.length;l>a;a++)(function(){var e=i[a];if("function"==typeof e.addEventListener){var s=t(e),l=-1;e.addEventListener("click",function(){var t=!0,i=o(e,"FORM");if(void 0!==i)for(var a=r(i),c=0;a.length>c;c++)""===a[c].value.replace(/^\s+|\s+$/g,"")&&(t=!1);t&&(s.startAfter(1),"number"==typeof n.timeout&&(clearTimeout(l),l=setTimeout(s.stop,n.timeout)),"function"==typeof n.callback&&n.callback.apply(null,[s]))},!1)}})()}function i(){for(var e=0,t=l.length;t>e;e++)l[e].stop()}function a(t){var o,r=t.offsetHeight;0===r&&(r=parseFloat(window.getComputedStyle(t).height)),r>32&&(r*=.8),t.hasAttribute("data-spinner-size")&&(r=parseInt(t.getAttribute("data-spinner-size"),10)),t.hasAttribute("data-spinner-color")&&(o=t.getAttribute("data-spinner-color"));var n=12,i=.2*r,a=.6*i,s=7>i?2:3;return new e({color:o||"#fff",lines:n,radius:i,length:a,width:s,zIndex:"auto",top:"auto",left:"auto",className:""})}function s(e){for(var t=[],o=0;e.length>o;o++)t.push(e[o]);return t}var l=[];return{bind:n,create:t,stopAll:i}}),function(e){var t,o="zoomer",r={width:"auto",height:"auto",zoom:.4,tranformOrigin:"0 0",loadingType:"message",loadingMessage:"Generating preview...",spinnerURL:"http://oi46.tinypic.com/6y375z.jpg",message:"Open Page",ieMessageButtonClass:"btn btn-secondary",messageURL:!1,onComplete:function(){}},n={visibility:"visible"},i={visibility:"hidden"},a={"-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-o-user-select":"none","user-select":"none",overflow:"hidden"},s={top:0,position:"absolute"},l={position:"relative"},c=navigator.userAgent.match(/MSIE/),d=navigator.userAgent.match(/MSIE (\d\.\d+)/)?parseInt(RegExp.$1,10):null;t={init:function(t){return this.each(function(){var n=e(this),i=e.extend({},r,t);i.src=n.attr("src"),n.data(o,i),n[o]("zoomer")})},zoomer:function(){var t=e(this),r=t.data(o);if(t.css(i).css(a),"auto"===r.zoom){if("auto"===r.width&&"auto"===r.height)return void e.error("jQuery.zoomer: You must set either zoom or height and width.");r.zoom=r.width/e(window).width()}"auto"===r.width&&(r.width=e(window).height()*r.zoom),"auto"===r.height&&(r.height=e(window).height()*r.zoom),"spinner"===r.loadingType&&(r.loadingMessage='<img style="padding: '+parseInt((r.height-17)/2,10)+'px 0" src="'+r.spinnerURL+'" />'),navigator.userAgent.indexOf("Chrome/10.0.648")>-1&&(r.zoom=Math.sqrt(1/r.zoom)),r.externalSrc=!0;try{t.get(0).contentWindow.document&&(r.externalSrc=!1)}catch(n){}return t[o]("setUpWrapper"),t[o]("zoom"),t},setUpWrapper:function(){var t=e(this),r=t.data(o);return t.parents(".zoomer-wrapper").length||t.wrap(e("<div/>").addClass("zoomer-wrapper").css(a).css(l)).wrap(e("<div/>").addClass("zoomer-small").css(i).css(a)),r.zoomerWrapper=t.parents(".zoomer-wrapper"),r.zoomerSmall=t.parents(".zoomer-small"),r.zoomerCover=e("<div/>").addClass("zoomer-cover").css(a).css(s).css({textAlign:"center",fontSize:"15px"}),r.zoomerLink=e("<a/>").html(r.message).css({height:r.height,width:r.width,color:"#444",display:"block",lineHeight:parseInt(r.height,10)-parseInt((r.height-80)/10,10)+"px",textDecoration:"none"}).css("background","-moz-radial-gradient(center center, circle farthest-corner, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 100%) repeat scroll 0 0 transparent").css("background-image","-webkit-gradient(radial, center center, 0, center center, "+parseInt(r.width,10)+", from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.4)))").mousedown(function(){e(this).css("box-shadow","inset 0px 2px 8px rgba(100, 100, 100, 0.4)")}).bind("mouseout mouseup",function(){e(this).css("box-shadow","none")}).hide(),c&&r.zoomerLink.css({backgroundColor:"rgba(255, 255, 255, 0.5)"}),r.click?r.zoomerLink.attr("href",r.messageURL||r.src||"#").unbind("click").bind("click",r.click):r.zoomerLink.attr("href",r.messageURL||r.src),r.zoomerCover.append(r.zoomerLink).hover(function(){r.zoomerLink.show(),e(this).css("box-shadow","inset 2px 2px "+2*parseInt(r.width,10)+"px rgba(255, 255, 255, 0.2)")},function(){r.zoomerLink.hide(),e(this).css("box-shadow","none")}).mousedown(function(){e(this).css("box-shadow","inset 2px 2px "+2*parseInt(r.width,10)+"px rgba(200, 200, 200, 0.8)")}).bind("mouseout mouseup",function(){e(this).css("box-shadow","none")}),r.zoomerLoader=e("<div/>").addClass("zoomer-loader").css(i).css(a).css(s).css({textAlign:"center",fontSize:"15px",lineHeight:parseInt(r.height,10)-parseInt((r.height-80)/10,10)+"px",background:"#fff"}).html(r.loadingMessage),r.zoomerWrapper.append(r.zoomerCover).append(r.zoomerLoader),c&&r.zoomerLoader.css(i),t[o]("updateWrapper")[o]("fadeOut")},updateWrapper:function(){var t=e(this),r=t.data(o);return e.each([r.zoomerWrapper.get(0),r.zoomerCover.get(0),r.zoomerLoader.get(0),r.zoomerSmall.get(0)],function(){e(this).css({height:r.height,width:r.width})}),t},fadeIn:function(){var t=e(this),r=t.data(o);return c?t:(t.css(i),r.zoomerSmall.stop().css("opacity",0).css(n).animate({opacity:1},150,function(){t.css(n).css("opacity",0).animate({opacity:1},500)}),r.zoomerLoader.show().animate({opacity:0},300,function(){e(this).hide()}),t)},fadeOut:function(){var t=e(this),r=t.data(o);return c?t:(r.zoomerSmall.stop().animate({opacity:0},300,function(){e(this).css("visibility","hidden")}),r.zoomerLoader.css("opacity",0).css(n).show().animate({opacity:1},100),t)},zoom:function(){var t=e(this),r=t.data(o);return c?(setTimeout(function(){t.css({zoom:r.zoom,height:parseInt(r.height/r.zoom*(1/(d>=9?1:r.zoom)),10),width:parseInt(r.width/r.zoom*(1/(d>=9?1:r.zoom)),10)}).css(n),r.zoomerLink.remove(),r.zoomerCover.unbind("hover mouseover mouseout").addClass(r.ieMessageButtonClass).html(r.message).css({width:94,height:14,fontSize:12,padding:"6px 18px 6px 18px",top:parseInt(r.height-36,10),left:parseInt((r.width-130)/2,10)}).show(),r.click||(r.click=function(){location.href=r.messageURL||r.src}),r.zoomerCover.unbind("click").bind("click",r.click),r.onComplete(t)},1e3),t):r.externalSrc?(t.css({height:r.height/r.zoom,width:r.width/r.zoom,"transform-origin":r.tranformOrigin,"-webkit-transform-origin":r.tranformOrigin,"-moz-transform-origin":r.tranformOrigin,"-o-transform-origin":r.tranformOrigin,transform:"scale("+r.zoom+")","-webkit-transform":"scale("+r.zoom+")","-moz-transform":"scale("+r.zoom+")","-o-transform":"scale("+r.zoom+")"}).css(n),t[o]("fadeIn"),r.onComplete(t),t):(t.css({height:r.height/r.zoom,width:r.width/r.zoom}).load(function(){t.contents().find("html").css({"transform-origin":r.tranformOrigin,"-webkit-transform-origin":r.tranformOrigin,"-moz-transform-origin":r.tranformOrigin,"-o-transform-origin":r.tranformOrigin,transform:"scale("+r.zoom+")","-webkit-transform":"scale("+r.zoom+")","-moz-transform":"scale("+r.zoom+")","-o-transform":"scale("+r.zoom+")"}),t[o]("fadeIn"),r.onComplete(t)}),t)},src:function(t){var r=e(this),n=r.data(o);return n.src=t,r[o]("fadeOut").attr("src",t),r},refresh:function(){var t=e(this),r=t.data(o);return t[o]("src",r.src)},zoomedBodyHeight:function(){var t=e(this),r=t.data(o);return r.externalSrc?e.error("jQuery.zoomer: cannot access bodyHeight of an external iFrame"):r.zoom*e(t.get(0).contentWindow.document).height()}},e.fn[o]=function(r){return t[r]?t[r].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof r&&r?void e.error("jQuery."+o+": Method "+r+" does not exist"):t.init.apply(this,arguments)}}(jQuery),function(e,t,o){function r(e){var t={},r=/^jQuery\d+$/;return o.each(e.attributes,function(e,o){o.specified&&!r.test(o.name)&&(t[o.name]=o.value)}),t}function n(e,t){var r=this,n=o(r);if(r.value==n.attr("placeholder")&&n.hasClass("placeholder"))if(n.data("placeholder-password")){if(n=n.hide().next().show().attr("id",n.removeAttr("id").data("placeholder-id")),e===!0)return n[0].value=t;n.focus()}else r.value="",n.removeClass("placeholder"),r==a()&&r.select()}function i(){var e,t=this,i=o(t),a=this.id;if(""==t.value){if("password"==t.type){if(!i.data("placeholder-textinput")){try{e=i.clone().attr({type:"text"})}catch(s){e=o("<input>").attr(o.extend(r(this),{type:"text"}))}e.removeAttr("name").data({"placeholder-password":i,"placeholder-id":a}).bind("focus.placeholder",n),i.data({"placeholder-textinput":e,"placeholder-id":a}).before(e)}i=i.removeAttr("id").hide().prev().attr("id",a).show()}i.addClass("placeholder"),i[0].value=i.attr("placeholder")}else i.removeClass("placeholder")}function a(){try{return t.activeElement}catch(e){}}var s,l,c="[object OperaMini]"==Object.prototype.toString.call(e.operamini),d="placeholder"in t.createElement("input")&&!c,u="placeholder"in t.createElement("textarea")&&!c,h=o.fn,f=o.valHooks,p=o.propHooks;d&&u?(l=h.placeholder=function(){return this},l.input=l.textarea=!0):(l=h.placeholder=function(){var e=this;return e.filter((d?"textarea":":input")+"[placeholder]").not(".placeholder").bind({"focus.placeholder":n,"blur.placeholder":i}).data("placeholder-enabled",!0).trigger("blur.placeholder"),e},l.input=d,l.textarea=u,s={get:function(e){var t=o(e),r=t.data("placeholder-password");return r?r[0].value:t.data("placeholder-enabled")&&t.hasClass("placeholder")?"":e.value},set:function(e,t){var r=o(e),s=r.data("placeholder-password");return s?s[0].value=t:r.data("placeholder-enabled")?(""==t?(e.value=t,e!=a()&&i.call(e)):r.hasClass("placeholder")?n.call(e,!0,t)||(e.value=t):e.value=t,r):e.value=t}},d||(f.input=s,p.value=s),u||(f.textarea=s,p.value=s),o(function(){o(t).delegate("form","submit.placeholder",function(){var e=o(".placeholder",this).each(n);setTimeout(function(){e.each(i)},10)})}),o(e).bind("beforeunload.placeholder",function(){o(".placeholder").each(function(){this.value=""})}))}(this,document,jQuery),function(e,t,o,r){var n=e(t);e.fn.lazyload=function(i){function a(){var t=0;l.each(function(){var o=e(this);if(!c.skip_invisible||o.is(":visible"))if(e.abovethetop(this,c)||e.leftofbegin(this,c));else if(e.belowthefold(this,c)||e.rightoffold(this,c)){if(++t>c.failure_limit)return!1}else o.trigger("appear"),t=0})}var s,l=this,c={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:t,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return i&&(r!==i.failurelimit&&(i.failure_limit=i.failurelimit,delete i.failurelimit),r!==i.effectspeed&&(i.effect_speed=i.effectspeed,delete i.effectspeed),e.extend(c,i)),s=c.container===r||c.container===t?n:e(c.container),0===c.event.indexOf("scroll")&&s.bind(c.event,function(){return a()}),this.each(function(){var t=this,o=e(t);t.loaded=!1,(o.attr("src")===r||o.attr("src")===!1)&&o.is("img")&&o.attr("src",c.placeholder),o.one("appear",function(){if(!this.loaded){if(c.appear){var r=l.length;c.appear.call(t,r,c)}e("<img />").bind("load",function(){var r=o.attr("data-"+c.data_attribute);o.hide(),o.is("img")?o.attr("src",r):o.css("background-image","url('"+r+"')"),o[c.effect](c.effect_speed),t.loaded=!0;var n=e.grep(l,function(e){return!e.loaded});if(l=e(n),c.load){var i=l.length;c.load.call(t,i,c)}}).attr("src",o.attr("data-"+c.data_attribute))}}),0!==c.event.indexOf("scroll")&&o.bind(c.event,function(){t.loaded||o.trigger("appear")})}),n.bind("resize",function(){a()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&n.bind("pageshow",function(t){t.originalEvent&&t.originalEvent.persisted&&l.each(function(){e(this).trigger("appear")})}),e(o).ready(function(){a()}),this},e.belowthefold=function(o,i){var a;return a=i.container===r||i.container===t?(t.innerHeight?t.innerHeight:n.height())+n.scrollTop():e(i.container).offset().top+e(i.container).height(),a<=e(o).offset().top-i.threshold},e.rightoffold=function(o,i){var a;return a=i.container===r||i.container===t?n.width()+n.scrollLeft():e(i.container).offset().left+e(i.container).width(),a<=e(o).offset().left-i.threshold},e.abovethetop=function(o,i){var a;return a=i.container===r||i.container===t?n.scrollTop():e(i.container).offset().top,a>=e(o).offset().top+i.threshold+e(o).height()},e.leftofbegin=function(o,i){var a;return a=i.container===r||i.container===t?n.scrollLeft():e(i.container).offset().left,a>=e(o).offset().left+i.threshold+e(o).width()},e.inviewport=function(t,o){return!(e.rightoffold(t,o)||e.leftofbegin(t,o)||e.belowthefold(t,o)||e.abovethetop(t,o))},e.extend(e.expr[":"],{"below-the-fold":function(t){return e.belowthefold(t,{threshold:0})},"above-the-top":function(t){return!e.belowthefold(t,{threshold:0})},"right-of-screen":function(t){return e.rightoffold(t,{threshold:0})},"left-of-screen":function(t){return!e.rightoffold(t,{threshold:0})},"in-viewport":function(t){return e.inviewport(t,{threshold:0})},"above-the-fold":function(t){return!e.belowthefold(t,{threshold:0})},"right-of-fold":function(t){return e.rightoffold(t,{threshold:0})},"left-of-fold":function(t){return!e.rightoffold(t,{threshold:0})}})}(jQuery,window,document),$(function(){$(".tip").tooltip(),$("input, textarea").placeholder(),$("img.lazy").lazyload({effect:"fadeIn"})});

Related: See More


Questions / Comments: