I've created an X button to close a form with Javascript but it's not working and I can't figure out why. Once I open it I can't close.
I'm just putting here the code for the button and the form, not the whole page behind it. Hope someone can help me.
html
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
css
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
JavaScript
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
document.querySelector(".fas fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.dispay = "none";
});
https://codepen.io/joanaoli09/pen/JjYoZoa
First your click position and X were different. Though you was attaching event on i but was clicking on X. In these case place X as a text of i. Secondly it has to be document.querySelector(".fas.fa-times") instead of document.querySelector(".fas fa-times") and thirdly use classList.toggle instead of adding class to style attribute
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector(".fas.fa-times").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('flex');
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
.flex {
display: flex;
}
.fas.fa-times {
width: 20px;
height: 20px;
border: 1px solid green;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
u have two mistake about closing event. one of them is your class name u need to write fa-times another one u wrote dispay it is wrong
document.querySelector(".fa-times").addEventListener("click", function() {
console.log("casa")
document.querySelector(".modal").style.display = "none";
});
The problem is in your second event listener:
you are trying to get element by ".fa fa-times" which is not a valid selector for your cross element.
Just replace ".fa fa-times" with ".fa.fa-times or ".fa-times" and it should work perfectly.
document.querySelector(".fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.display = "none";
});
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
First of all getting elements by general classes like fas fa which third party libraries provide (in this case font-awesome) is not a good practice. Because it's possible to use the same classes for another element in page. I suggest using an id for this situation or a specific class. Another problem is that we usually use <button> for actions not <i>.<i> tag is not action ready so by clicking on it you actually click on its content(X) not the tag. Now the problem in ur code is that when you set display:flex in your JS the element gets the style and when you document.querySelector(".modal").style.dispay = "none"; you don't clear the previous style (display:flex) so both of them are applied. You should clear display:flex then apply display:none or make a class like d-flex which toggels by click.
In HTML
<div class="close">
<i id="close-btn" class="fas fa-times">X</i>
</div>
In CSS
.d-flex
{
display:flex !important;
}
In Js
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector("#close-btn").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('d-flex');
}
Related
I m making some project.
When I click "number1" button, I thought "number2" and "drag-zone" box is removed at once
But It's not happened. I have to click "number1" to three time to remove "the number2" and "drag-zone"
I want to remove that at once. What's my problem in my code?
I don't know How could I remove NodeList at once
let list = document.getElementsByClassName("boxDrop");
function remove(num) {
if (num === 0) {
for (let i = 0; i < list[1].childNodes.length; i++)
list[1].removeChild(list[1].childNodes[i]);
}
}
* {
align-items: center;
text-align: center;
justify-content: space-evenly;
}
button {
border: none;
background-color: transparent;
font-size: 20px;
border-radius: 10px;
}
button:hover {
background-color: rgb(252, 211, 77);
}
.thumbDropBox {
display: flex;
border: 3px solid rgb(209, 178, 2);
padding: 15px;
margin-top: 100px;
cursor: pointer;
}
.drop-zone {
display: flex;
border: 3px dashed rgb(253, 196, 39);
margin: 10px;
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
font-weight: bold;
border-radius: 14px;
}
.drop-zone__over {
border-style: solid;
}
.drop-zone__input {
display: none;
}
.drop-zone__thumb {
background-color: rgb(235, 235, 235);
height: 100%;
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.drop-zone__thumb::after {
content: attr(data-label);
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background-color: rgb(192, 192, 192);
position: absolute;
bottom: 0;
}
.question {
display: inline-block;
padding: 20px;
font-size: 30px;
}
<div class="thumbDropBox">
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(0)">Number1</button>
</div>
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(1)">Number2</button>
</div>
</div>
<span class="question">Whose is the Better?</span>
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
for adding a little popup to a login i´m using jquery to append a div and its content to the page after the user clicks on the button. I don´t know why, but everytime i click the button, the div appears normally but disappears again immediately. Please help.
The Problem is all about the Forgot Password button.
Here is the code:
let form = $('form');
let passwordRequest = $('<button>');
passwordRequest.text('Forgot password?');
passwordRequest.attr('id', 'passwordRequest');
passwordRequest.appendTo(form);
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#logIn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #fff;
border-radius: 20px;
box-shadow: 2px 5px 40px rgb(201, 201, 201);
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
h2 {
font-size: 20px;
font-weight: 300;
margin-top: 10px;
}
input[type=text],
input[type=password] {
padding: 10px;
width: 300px;
margin: 10px;
border-radius: 3px;
border: 1px solid rgb(221, 221, 221);
font-size: 14px;
transition: 200ms;
}
input[type=submit] {
padding: 5px 15px;
margin-top: 30px;
font-size: 16px;
font-weight: 600;
outline: none;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgb(114, 114, 114);
transition: 100ms;
}
#passwordRequest {
font-size: 14px;
text-decoration: none;
color: rgb(62, 184, 255);
margin-top: 20px;
border: none;
outline: none;
cursor: pointer;
background-color: transparent;
transition: 100ms;
padding: 5px;
}
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
<div id="logIn">
<h1>Login</h1>
<form>
<h2>Username</h2>
<input id="username" type="text">
<h2>Password</h2>
<input id="userPassword" type="password">
<input id="submitButton" type="submit" value="Login">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
https://codepen.io/colintessarzick/pen/GRoMEWm
<button> is by default type="submit" (even without the type) -
The issue you're experiencing is the form actually being submitted.
Use type="button", or with your jQuery script:
const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});
Example:
let form = $('form');
const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#logIn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #fff;
border-radius: 20px;
box-shadow: 2px 5px 40px rgb(201, 201, 201);
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
h2 {
font-size: 20px;
font-weight: 300;
margin-top: 10px;
}
input[type=text],
input[type=password] {
padding: 10px;
width: 300px;
margin: 10px;
border-radius: 3px;
border: 1px solid rgb(221, 221, 221);
font-size: 14px;
transition: 200ms;
}
input[type=submit] {
padding: 5px 15px;
margin-top: 30px;
font-size: 16px;
font-weight: 600;
outline: none;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgb(114, 114, 114);
transition: 100ms;
}
#passwordRequest {
font-size: 14px;
text-decoration: none;
color: rgb(62, 184, 255);
margin-top: 20px;
border: none;
outline: none;
cursor: pointer;
background-color: transparent;
transition: 100ms;
padding: 5px;
}
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
<div id="logIn">
<h1>Login</h1>
<form>
<h2>Username</h2>
<input id="username" type="text">
<h2>Password</h2>
<input id="userPassword" type="password">
<input id="submitButton" type="submit" value="Login">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!
This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>
You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
i couldnt find a better tittle because its a specific error of my site, that i will provide a link to see it and his code.
The issue is when i scroll, there is a script that when the bar touches the top of the browser, the bar will remain there, but that make the slideshow make a little jump and the bars cuts part of the slideshow.
See it here: http://optential.co.nf/
Code:
$(window).bind('scroll', function () {
var h = $('.header').height();
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
} else {
$('.mail2, .optimize').removeClass('fixed');
}
});
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: cover;
position: absolute;
}
.controls {
width:100%;
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundos.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
#pc {
height: 600px;
width: 50%;
float: left;
background-size: 100%
background-repeat:no-repeat;
background-image: url("img/pc.jpg");
}
#pctexto {
height: 600px;
width: 50%;
float: left;
background-size: cover;
background-color: blue;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: 100%;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
<div id="pc">
</div>
<div id="pctexto">
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" action="form/contactengine.php">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
</body>
</html>
The css of the bar is "mail2", of the slideshow is "slider" and "controls".
Hope someone can help.
When you apply .fixed, you are taking the menu element out of the flow. This is because it is changing from position: relative to position: fixed. That's why the elements below it are jumping up 100px . To complete the effect you're after, you will need to compensate for the missing 100px.
OPTION 1
You can apply a margin-top to the #slider element below:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#slider').css('margin-top', '100px');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#slider').css('margin-top', '0px');
}
OPTION 2
You can add an element with 100px of height into the flow.
In your HTML, add this below the .mail2 element
<div id="menu-block" style="height: 100px; display: none;">
And add this to your JS:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#menu-block').css('display', 'block');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#menu-block').css('display', 'none');
}
In this particular case, both ways will work the same. In other situations, only one technique will be suitable. Hope this helps!
Considering the bar is a fixed height of 100px, you could add a rule like so:
.fixed + #slider {
padding-top: 100px;
}
or if other pages have more dynamic layouts, you could use .fixed + *
It is because as soon as you make it be position:fixed it no longer takes up space on the page, so the content under it jumps up to fill the space.
I have come across this in the past, and my solution was to put another div under the bar that is going to get fixed. It needs to be the same height as the div that is going to become fixed. Make it display:none and then change it to display:block when you toggle the bar to be fixed, that way it appears right when the fixed bar stops taking up space on the page. This should stop it from jumping.