I am trying to Flip between 'Login Form' & 'Register Form'. I tried to use code which I came across on codepen Flat HTML5/CSS3 Login Form. The code works just fine, but when I integrate the HTML code within a Vue Template the Form does not flip to the 'Create an account' form. I have observed that there is something to correct in the JavaScript but I am not able to understand exactly what.
My code is as below:
HTML
<template id="login-page"> // PROBLEM When this Tag is added and called using VueJS component
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
</template> // PROBLEM When this Tag is added and called using VueJS component
VueJS
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
loginStage: 'login-form',
}
},
}
JavaScript
<script>
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>
CSS
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
While #Fred has accepted #chr's answer, this is (still) a mis-use of Vue.
(Note this not an attempt to reproduce the working fiddle, but to answer the general question of how to Flip between 'Login Form' & 'Register Form' using a more Vue-oriented approach)
In the Vue way of doing things the switch between the login form and the register form should be done with markup, using Vue conditional rendering rather than calling functions showRegisterForm() and showLoginForm().
toggleForm doesn't require a parameter because the model knows what the value of currentForm is already.
An if and else is the simplest approach, making use of a property in your Vue model, such as currentForm: 'login' that chr introduced in their answer.
The HTML needs only slight changes
<div id="login-page" class="login-page">
<div class="form">
<form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered?
Sign In</p>
</form>
<form v-else class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered?
Create an account</p>
</form>
</div>
</div>
A partial look at the model needed for this could be
const model = new Vue({
data : {
'currentForm' : 'login',
...
},
...
methods : {
toggleForm() {
this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
}
},
...
});
When the value of currentForm changes Vue will take care of changing which of the forms will display.
Also see the answer to the question VueJS - Swap component on click for a more generalized approach.
You are mixing up the use of Vue as library and Vue as framework. It looks like, you are actually trying to use Vue as library, so I changed the code accordingly, here is myfiddle. You can just need to add a transition, for more information look into the documentation Enter/Leave & List Transitions.
HTML:
<div id="login-page" class="login-page">
<div class="form">
<form class="register-form" v-show="showRegisterForm">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form" v-show="showLoginForm">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
JS:
new Vue({
el: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
loginStage: 'login-form',
currentForm: 'login',
}
},
computed: {
showRegisterForm() {
return this.currentForm === 'register';
},
showLoginForm() {
return this.currentForm === 'login';
},
},
methods: {
toggleForm(formName) {
this.currentForm = formName;
},
},
});
CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#chr solutions works for me except the the first two lines of the JavaScript code that had to be changed since in my case I have an existing Vue which calls the Login Component which then activates the Login Template.
JavaScript
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
login_message: 'Please enter your credentials to login.',
currentForm: 'login',
}
},
computed: {
showRegisterForm() {
return this.currentForm === 'register';
},
showLoginForm() {
return this.currentForm === 'login';
},
},
methods: {
toggleForm(formName) {
this.currentForm = formName;
},
},
}
Stephen P's code works as well and is much neater, except that the first form should have the register in single quotes i.e. 'register', which is corrected below.
HTML
<div id="login-page" class="login-page">
<span><h1>{{currentForm.toUpperCase()}} FORM</h1></span>
<span><h5>Please enter your credentials to {{currentForm.toLowerCase()}}.</h5></span>
<div class="form">
<form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form v-else class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
JavaScript
// Vue component: login-page
const LoginPage = {
template: '#login-page',
data() {
return {
currentForm: 'login',
}
},
methods: {
toggleForm()
{
this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
}
},
}
CSS
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Related
In the example below the expected behavior is that once the form field has valid input, a specific class is applied, which pushes the input label to sit mid-line of the form field's border. You can see this when you navigate to each input.
When a field is validated, that class, valid-ct is applied and it's supposed to remain there and keep that label above the input. But, as I navigate to each field, the class, valid-ct goes away and the label goes back into the placeholder position, covering any input.
I believe the culprit is in this function, but I am not getting any errors, so I'm not sure what I'm doing wrong:
$(function () {
$("input, textarea").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
Where am I going wrong with this?
(function () {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("ClassChanged");
// return the original result
return result;
};
})();
$(function () {
$("input, textarea").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
$("input.required, textarea.required").trigger("ClassChanged");
$(".request-form .form-ct a.company-btn--blue").on("click", function (e) {
e.preventDefault();
$("#footer-form-submit").submit();
});
$("input").on("focus blur", function () {
$(this).parent().toggleClass("focus-ct");
});
// Create a custom classChange trigger
(function () {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("ClassChanged");
// return the original result
return result;
};
})();
$(function () {
$("input").bind("ClassChanged", function () {
$(this).parent().removeClass("valid-ct error-ct");
// console.log(!$.trim($(this).val()));
if ($(this).hasClass("error")) {
$(this).parent().addClass("error-ct");
} else if ($(this).hasClass("valid") && $.trim($(this).val())) {
$(this).parent().addClass("valid-ct");
} else if ($(this).hasClass("error terms-agree")) {
console.log(123);
}
});
});
$("input.required").trigger("ClassChanged");
.container {
padding: 0.5rem;
}
.request-form h2 {
margin: 80px auto 56px;
max-width: 768px;
font-weight: 800;
}
.request-form h2 span {
color: #005fec;
font-weight: 800;
}
#media screen and (min-width: 768px) {
.request-form h2 {
margin-bottom: 72px;
text-align: center;
}
}
.request-form .container .row h4.sub-head {
margin-bottom: 2.5rem;
margin-top: 0;
}
.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="number"] {
background-color: #fff;
border: 0;
font-size: 20px;
width: 100%;
height: 60px;
cursor: auto;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
transition: background-color 0.4s;
border: 1px solid #6d7582;
padding: 0 16px;
border-radius: 4px;
}
.request-form input:-webkit-autofill {
box-shadow: 0 0 0 50px white inset;
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
.request-form input:-webkit-autofill:focus {
box-shadow: 0 0 0 50px white inset;
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
.request-form .email-ct {
margin-right: 12px;
}
.request-form .phone-ct {
margin-left: 12px;
}
.request-form .input-ct {
position: relative;
margin-top: 24px;
width: 100%;
}
.fandlname {
display: flex;
}
.fandlname .first-name-ct {
margin-right: 12px;
}
.fandlname .last-name-ct {
margin-left: 12px;
}
.request-form .input-ct label:not(.error) {
color: #444a53;
position: absolute;
top: 22px;
left: 8px;
background-color: #fff;
padding: 0 8px;
font-weight: 300;
font-size: 16px;
transition: all 200ms ease-in-out;
pointer-events: none;
z-index: 1;
}
.request-form .state-search-ct.error-ct.input-ct label {
top: 22px;
}
.state-search-ct.valid-ct label.error {
display: none !important;
}
.request-form .input-ct.focus-ct label:not(.error) {
color: #005fec !important;
font-family: motiva-sans, sans-serif;
top: -13px;
z-index: 1;
}
.request-form .input-ct.focus-ct label.error {
display: none !important;
}
.request-form .input-ct input:focus,
.request-form .input-ct textarea:focus {
border-color: #005fec !important;
}
.request-form .input-ct input.error,
.request-form textarea.error {
border-color: #e12d2d;
}
.request-form .input-ct.valid-ct label {
color: #444a53;
top: -8px;
z-index: 1;
}
.request-form .input-ct.error-ct label {
color: #e12d2d;
z-index: 1;
}
.request-form label.error {
font-size: 14px;
font-weight: 400;
background: url("/assets/icons/icon-error.svg") left center no-repeat;
padding-left: 20px;
line-height: 16px;
color: #e12d2d;
margin-top: 8px;
display: block !important;
text-align: left;
}
.request-form .valid-ct label.error {
display: none !important;
}
div.error-ct h4 {
color: #e12d2d;
margin-bottom: 8px;
}
.request-form textarea {
border: 1px solid #6d7582;
border-radius: 4px;
background-color: #fff;
font-size: 20px;
width: 100%;
height: 136px;
cursor: auto;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 20px 16px;
box-sizing: border-box;
transition: background-color 0.4s;
font-family: motiva-sans, sans-serif;
}
.error-label-ct {
margin: 0px 0 16px;
}
.request-form .info-txt {
margin: 4px 0 0px;
font-size: 14px;
color: #62668c;
line-height: 16px;
}
#media screen and (min-width: 500px) {
.company-bttn-anim:first-child {
margin-bottom: 0.75rem;
}
}
.request-form h4.big {
font-size: 24px;
margin-bottom: 0;
}
.request-form h4.title {
font-size: 12px;
padding-bottom: 0;
margin-top: 0;
}
.request-form h4.by-submit {
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
.request-form h4.by-submit a {
color: inherit;
font-weight: inherit;
}
.request-form .hidden-fields {
display: none;
}
.request-form .hidden-fields .input-ct {
margin: 20px 0;
}
.request-form .max-char {
display: block;
font-size: 14px;
color: #18216d;
}
.request-form .agent-group h4 {
padding-bottom: 0;
}
.request-form .clarification-txt {
display: block;
font-size: 14px;
padding-bottom: 15px;
}
.request-form .disclaimer a {
font-weight: 800;
}
.request-form .disclaimer a:hover {
text-decoration: underline;
}
.request-form .g-recaptcha {
margin: 45px 0 0px;
}
.request-form #submit-btn {
min-width: 165px;
height: 68px;
margin-top: 48px;
line-height: 68px;
padding: 0;
pointer-events: none;
opacity: 0.35;
}
.form-failure .light-blue {
margin-top: 50px;
}
.form-failure p,
.form-success p {
font-size: 18px;
margin: 20px auto 0;
}
.company-bttn-anim {
border: 0;
}
.hidden {
display: none;
}
#media screen and (max-width: 767px) {
.hero {
min-height: unset;
}
.request-form .email-ct {
margin-right: 0;
}
.request-form .phone-ct {
margin-left: 0;
}
}
.submit-ct {
margin: 32px 0 0;
}
#media screen and (min-width: 1200px) {
.form-ct {
margin-top: -24px;
}
.request-form .container {
padding: 0;
}
}
#media screen and (min-width: 991px) {
.request-form h3.sub-head {
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="request-form form-ct">
<form accept-charset="UTF-8" method="post" action="">
<input type="hidden" name="oid" value="">
<div class="utm-params-and-cta-id" style="display:none;">
<input type="hidden" name="utm_term" id="utm_term" value="<? if(isset($_GET['utm_term'])){echo $_GET['utm_term'];} ?>">
<input type="hidden" name="utm_content" id="utm_content" value="<? if(isset($_GET['utm_content'])){echo $_GET['utm_content'];} ?>">
<input type="hidden" name="utm_campaign" id="utm_campaign" value="<? if(isset($_GET['utm_campaign'])){echo $_GET['utm_campaign'];} ?>">
<input type="hidden" name="utm_source" id="utm_source" value="<? if(isset($_GET['utm_source'])){echo $_GET['utm_source'];} ?>">
<input type="hidden" name="utm_medium" id="utm_medium" value="<? if(isset($_GET['utm_medium'])){echo $_GET['utm_medium'];} ?>">
<input type="hidden" name="cta_id" id="cta_id" value="No cta_id set">
</div>
<div class="fandlname">
<div class="input-ct first-name-ct">
<label for="first_name">First name</label>
<input type="text" autocomplete="given-name" name="first_name" id="first_name" value="" class="text required" size="30" maxlength="32">
</div>
<div class="input-ct last-name-ct">
<label for="last_name">Last name</label>
<input type="text" autocomplete="family-name" name="last_name" id="last_name" value="" class="text required" size="30" maxlength="32">
</div>
</div>
<div class="input-ct">
<label for="email">Email address</label>
<input type="email" autocomplete="email" name="email" id="email" value="" class="text required email" size="30" maxlength="255">
</div>
<div class="input-ct">
<label for="phone">Phone</label>
<input type="tel" autocomplete="tel" name="phone" id="phone" value="" class="text required" size="30" maxlength="32">
</div>
<div class="input-ct">
<label for="company">Company</label>
<input type="text" autocomplete="organization" name="company" id="company" value="" class="text required" size="30" maxlength="100">
</div>
<div class="input-ct">
<label for="employees">Number of employees</label>
<input type="text" name="employees" id="employees" value="" class="text required" size="30" maxlength="8">
</div>
<div class="submit-ct">
<div>
<input type="submit" accesskey="s" id="jbx-submit" aria-hidden="Submit" value="Get started" class="company-bttn-anim company-btn--blue large light" name="submitBttn">
<img src="https://companyweb.imgix.net/icons/Arrow-Right-Hover-Animation_white-2021.svg" alt="right arrow icon" class="learn-more-arrow">
</div>
</div>
</form>
</div>
</div>
You have to handle this on input change event if the length of the input is greater than 0 apply the valid-ct class otherwise don't
$('input').keyup(function () {
if($(this).val().length > 0 ){
$(this).parent().addClass("valid-ct");
}else {
$(this).parent().removeClass("valid-ct");
}
});
As mentioned, I am working on information entry page that requires user to enter certain information, and the entry cannot be blank. I looked up the Web and I find the REQUIRED ATTRIBUTE. However, it does not seem to work. What can I do to fix it? the following is what I currently have.
I have been pondering what could possibly be wrong, and here is some of my speculation. it may have got something to do with part as I failed to make it match to one another properly
<html>
<head>
<meta charset="UTF-8">
<title>上傳</title>
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
background: #3F51B5;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact input[type="submit"] {
font: 400 12px/16px "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 15px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #FFC107;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact input[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #2196F3;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact input[type="submit"]:hover {
background: #3F51B5;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact input[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
font-size: 10px;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
</style>
</head>
<body>
<div class="container" id="myForm">
<form id="contact" action="" method="post">
<h3><?=Title?> 上傳系統</h3>
<h4>會員上傳</h4>
<div class="form-item">
<label>Gmail帳號:</label>
<input type="text" value="<?=useremail?>" name="myEmail" readonly>
</div>
<div class="form-item">
<label>區分:</label>
<input type="text" value="<?=params?>" name="params" readonly>
<input type="hidden" value="<?=sys_id?>" name="sys_id" readonly>
<input type="hidden" value="<?=Title?>" name="sys_name" readonly>
</div>
<div class="form-item">
<a href="<?=hyper_link?>" target="_blank" >我的</a>
</div>
<? if (setfile =="可傳檔"){ ?>
<select name="compositions" required>
<option value="">請選擇</option>
<option value="general"></option>
<option value="Five">(五)</option>
<option value="Ten">(十)</option>
</select>
<input type="file" name="userFile" accept="image/jpeg,image/gif,image/png" onchange="checkfile(this);" >
<input type="submit" value="限影像檔(不可使用PDF)"
onclick="submitValues(this); return false;">
<? } else { ?> <div><?=setfile?></div> <br><input type='submit' value='關閉視窗' onclick='window.close();'> <? } ?>
</form>
</div>
<div id="output"></div>
<script>
function submitValues(e) {
e.value = 'Uploading...';
e.disabled = true;
const files = [e.parentNode.userFile.files[0]];
const object = [...e.parentNode].reduce((o, obj) => Object.assign(o, {[obj.name]: obj.value}), {});
if (files.some(f => f))
{
Promise.all(
files.map(file => new Promise((resolve, reject) => {
if (file) {
const fr = new FileReader();
fr.onload = f => resolve({filename: file.name, mimeType: file.type, bytes: [...new Int8Array(f.target.result)]});
fr.onerror = err => reject(err);
fr.readAsArrayBuffer(file);
} else {
//e.disabled = false;
resolve({});
}
}))
).then(ar => {
[object.userFile] = ar;
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(object);
});
}
}
function checkfile(sender) {
// 可接受的附檔名
var validExts = new Array(".jpg", ".png", ".gif", ".jpeg");
var fileExt = sender.value;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
fileExt = fileExt.toLowerCase();
if (validExts.indexOf(fileExt) < 0) {
alert("檔案類型錯誤，可接受的副檔名有：" + validExts.toString());
sender.value = null;
return false;
}
else return true;
}
function fileUploaded(status)
{
//e.disabled = false;
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
</body>
</html>
in basic mode, you can set required attribute. but if you want complex validation you should use javascript. for example, you have a form with just name input and it will be required. on submit form handler you should check that input has value or not. for more complex validation you can use yup or joi libraries.
I have used an html contact form template found online for my static website hosted on aws.
The html contact form in its head section is linked to a js script with a formula, provided together with the html template.
Behind that on aws I have created a lambda formula to fetch the massages via api gateway and use ses to forward them to an email address, that part should be ok.
Unfortunately it does not seem to work and I think it's something related to the html part as the button seems inactive.
Here below the html script (just hid the datasite key):
function submitToAPI(e) {
e.preventDefault();
var URL = "https://XXXX.execute-api.us-east-1.amazonaws.com/001/contact-us";
var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test($("#name-input").val())) {
alert("Name can not less than 2 char");
return;
}
var mobilere = /[0-9]{10}/;
if (!mobilere.test($("#phone-input").val())) {
alert("Please enter valid mobile number");
return;
}
if ($("#email-input").val() == "") {
alert("Please enter your email id");
return;
}
var reeamil = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,6})?$/;
if (!reeamil.test($("#email-input").val())) {
alert("Please enter valid email address");
return;
}
var name = $("#name-input").val();
var phone = $("#phone-input").val();
var email = $("#email-input").val();
var desc = $("#description-input").val();
var data = {
name: name,
phone: phone,
email: email,
desc: desc
};
$.ajax({
type: "POST",
url: "https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact",
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function() {
// clear form and show a success message
alert("Successfull");
document.getElementById("contact-form").reset();
location.reload();
},
error: function() {
// show an error message
alert("UnSuccessfull");
}
});
}
#fcf-form {
display:block;
}
.fcf-body {
margin: 0;
font-family: -apple-system, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
padding: 30px;
padding-bottom: 10px;
border: 1px solid #ced4da;
border-radius: 0.25rem;
max-width: 50%;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-credit {
padding-top: 10px;
font-size: 0.9rem;
color: #545b62;
}
.fcf-credit a {
color: #545b62;
text-decoration: underline;
}
.fcf-credit a:hover {
color: #0056b3;
text-decoration: underline;
}
.fcf-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.fcf-btn {
transition: none;
}
}
.fcf-btn:hover {
color: #212529;
text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.fcf-btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.fcf-btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.fcf-btn-primary:focus, .fcf-btn-primary.focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.fcf-btn-block {
display: block;
width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<link href="contact-form.css" rel="stylesheet">
<div class="fcf-body">
<head>
<script type="text/javascript" src="form-control.js"></script>
</head>
<form id="contact-form" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name here…" class="form-control" style="width:100%;" /><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number" class="form-control" style="width:100%;" /><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email here…" class="form-control" style="width:100%;" /><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control" style="width:100%;"></textarea><br/>
<div class="g-recaptcha" data-sitekey="XXX" class="form-control" style="width:100%;"></div>
<button type="button" onClick="submitToAPI(event)" class="btn btn-lg" style="margin-top:20px;">Submit</button>
</form>
</div>
</center>
Can anyone let me know what am I missing/doing wrong so that the contact form works?
Thank you
I a problem doing a simple css opacity transition on the selector #loginForm > div:first-child h1 by simply adding the class .animated to that element using javascript. Although it is not working. Below is the code:
document.querySelector('#loginForm > div:nth-child(2)').style.display = 'none';
document.querySelector('#loginForm > div:first-child').style.display = 'block';
var verified_text = document.querySelector('#loginForm > div:first-child h1');
verified_text.classList.add('animated');
#loginForm {
position: relative;
padding: 40px;
background-color: #fcde84;
border-radius: 5px;
margin-top: 75px;
width: 462px;
}
#loginForm>div:first-child {
height: 380px;
border: 0;
filter: drop-shadow( 5px 8px 8px rgba(0, 0, 0, 0.1));
}
#loginForm>div:first-child div {
margin-top: 165px;
}
#loginForm>div div {
width: 150px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
#loginForm>div:first-child h1 {
font-family: 'Arial Rounded MT';
color: rgb(109, 204, 91);
text-align: center;
display: block;
transition: all 5s ease-out;
opacity: 0;
}
#loginForm>div:first-child h1.animated {
opacity: 1;
}
#loginForm h2 {
font-size: 34px;
text-transform: uppercase;
line-height: 24px;
color: #2f4e71;
letter-spacing: -2px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
#loginForm p {
font-size: 17px;
line-height: 40px;
color: #333850;
display: block;
margin: 0 0 10px;
font-weight: 700;
}
#loginForm>div:nth-child(2) div {
border-radius: 50%;
border: solid 2.5px #3A5E77;
}
#loginForm ul {
padding: 10px 15px 10px 30px;
background-color: #fc7f77;
color: white;
border-radius: 7.5px;
margin: 12px 0;
display: none;
}
#loginForm li {
text-align: center;
display: block;
font-size: 24px;
}
#loginForm label {
margin: 0 0 12px;
display: block;
font-size: 1.25em;
color: #217093;
font-weight: 700;
}
#loginForm input {
border-radius: 32.5px;
height: 65px;
width: 100%;
font-weight: 600;
font-size: 1.55em;
transition: box-shadow .2s linear, border-color .25s ease-out, background-color .2s ease-out;
}
#email,
#password {
margin: 0 0 24px;
padding: 0 1em 0;
background-color: #f3fafd;
border: solid 2px #217093;
}
#email:focus,
#password:focus {
outline: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
border: solid 2px #4eb8dd;
}
#loginForm input[type="submit"] {
padding: .65em 1em 1em;
background-color: #4eb8dd;
color: #FFF;
}
#loginForm input[type="submit"]:hover {
background-color: #217093;
}
<form autocomplete="on" method="post" id="loginForm">
<div style="display: none;">
<div></div>
<h1>Verified</h1>
</div>
<div>
<h2>Join our community</h2>
<p>Login to get instant access to our video courses</p>
<div>SVG goes here</div>
<ul></ul>
<label for="email">Username</label>
<input type="text" id="email" name="username" form="loginForm" required autofocus/>
<label for="password">Password</label>
<input type="password" id="password" name="password" form="loginForm" required/>
<input type='submit' value="Login" name="login" form="loginForm">
</div>
</form>
video of the problem:
https://youtu.be/OGZWfBaG_aM
I want the word verified to fade in
Because the CSS and JavaScript load at virtually the same time as far as the Browser is concerned, a transition is not detected. Change that last line of JavaScript to something like:
setTimeout(()=>{
verified_text.classList.add('animated');
}, 100);
I stumbled on something similar on a React project. It was head-scratching at first but what #StackSlave mentioned above gave me a good hint about the issue I was having.
I had a parent component rendering a child component and I was trying to fade out the child component on a certain click event.
It wasn't working
I had the following setup at first:
const Parent = () =>{
const Child = () =>(
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
)
return(
<>
...
<Child/>
...
</>)
}
I then modified above to the following and the CSS transition worked smoothly.
const Parent = () =>{
return(
<>
...
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
...
</>)
}
styles
.image {
...
opacity: 1;
transition: all 0.2s ease-out !important;
}
.hidden {
opacity: 0;
}
I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- L O G I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="login_page" id="login_page">
<div class="card_view">
<div class="login_container" id="login_container">
<div class="wrap_login">
<div class="login_form validate-form">
<span class="login_form_title p-b-26">
Login
</span>
<div>
<label for="email_field">E-Mail</label>
<input type="text" id="email_field" name="email_field" placeholder="E-Mail">
<label for="password_field">Passwort</label>
<input type="password" id="password_field" name="password_field" placeholder="Passwort">
<input type="submit" value="Einloggen" onclick="login()">
</div>
<div class="center_text_container p-t-115">
<span class="txt1">
Du hast noch keinen Account?
</span>
<a class="txt2" onclick="goToSignUp()">
Registrieren
</a>
</div>
<div class="modal">
<div class="modal-content">
<h1 id="msg_title"><h1>
<p id="msg_content"></p>
<div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- M A I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="html_side_main" id="html_side_main">
<div class="toolbar">
<div class="centered_toolbar">
<img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
<ul>
<li class="active"></i>Dashboard</li>
<li></i>Notenliste</li>
</ul>
<i class="logout"></i>Logout
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class='main'>
<div class='main_padding'>
<div class='noten_stats'>
<p class="noten_stats_title">alpha_version: 1.0</p>
<div class="punkte_container">
<span class="punkte"></span>
<span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
changePage();
}
else {
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = 'none';
}
});
function changePage() {
if (document.readyState === "complete") {
var login_page = document.getElementById("login_page");
var register_page = document.getElementById("register_page");
var main_dashboard_page = document.getElementById("html_side_main");
login_page.style.display = 'none';
main_dashboard_page.style.display = 'block';
}
As I heared that the css has a higher priority in the display of elements I would post the CSS here too:
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* F O N T */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
#font-face {
font-family: Poppins-Regular;
src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}
#font-face {
font-family: Poppins-Bold;
src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}
#font-face {
font-family: Poppins-SemiBold;
src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* L O G I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
label {
color: #fff;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
.card_view {
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 9px; /* 5px rounded corners */
}
.login_container {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgba(38, 38, 38, 1);
}
.wrap_login {
width: 390px;
background-color: rgba(48, 48, 48, 1);
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
border-radius: 9px 9px 0 0;
}
.container {
padding: 2px 16px;
}
/*------------------------------------------------------------------
[ Form ]*/
.login_form {
width: 100%;
}
.login_form_title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
}
.login_form_title i {
font-size: 60px;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgba(48, 48, 48, 1);
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(38, 38, 38, 1);
}
input[type=submit] {
background-color: rgba(6, 132, 134, 255);
font-family: Poppins-Medium;
}
input[type=submit]:hover {
background-color: rgba(8, 160, 163, 255);
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(92, 92, 92, 1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(92, 92, 92, 1);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(92, 92, 92, 1);
}
input, select, textarea{
color: #fff;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 13px;
color: #fff;
line-height: 1.5;
cursor: pointer;
}
.txt2:hover {
color: rgba(6, 132, 134, 255);
}
.center_text_container {
text-align: center;
vertical-align: middle;
line-height: 50px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* M A I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
.html_side_main {
float: left;
height: auto;
width: 100%;
}
.html_side_main {
height: 100%;
}
/*TOOLBAR*/
.html_side_main .toolbar {
list-style-type: none;
height: 90px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(48, 48, 48, 1);
}
.html_side_main .centered_toolbar {
display: flex;
align-items: center;
justify-content: center;
}
.html_side_main ul {
list-style-type: none;
list-style: none;
}
.html_side_main li {
float: left;
}
.html_side_main a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.html_side_main a:hover {
color: #cccccc;
}
/* MAIN */
.html_side_main .main_padding {
padding: 15px;
width: 100%;
}
.html_side_main .noten_stats {
height: 200px;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
border-radius: 5px;
box-shadow: 1px 1px 5px #ddd;
}
.html_side_main .noten_stats_title {
color: #ffffff;
padding: 20px;
font-family: Montserrat-Medium;
}
.html_side_main .punkte_container{
height: 80%;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: baseline;
}
.html_side_main .punkte {
color: #ffffff;
font-size: 50px;
font-family: Montserrat-Bold;
}
.html_side_main .punkte_text {
color: #ffffff;
font-family: Montserrat-Medium;
}
PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.
In isolation of a codepen, this works:
function setStyle(propValue){
console.log(propValue)
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = propValue
}
Thus it is not a js⇄css problem. (as your title suggests)
Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.
Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...
As I heared that the css has a higher priority in the display of elements
Not true. Precedence is from lowest to highest:
Browser default
External style sheet (like yours)
Internal style sheet (commonly in <head>)
Inline style
...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.
Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.
(This is, why isolation aka damping down is good :-)
I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:
.display-none {
display: none;
}
and then add the class via javascript:
login_page.className += " display-none";
That way you will have all your styles in your css and not in your javascript