this code snippet shows an animated password input field. If you click in the input field (onFocus) an toggle eye icon appears to show or hide the password. After you leave the input field focus (onBlur) the eye icon disappers. Now my problem is, that the toggle eye icon is not clickable right now. I don't know how to solve his.
Can anybody help me?
Thanks in advance
function showeye() {
var string = '<i class="glyphicon glyphicon-eye-open form-control-feedback"></i>';
document.getElementById('showhide').innerHTML = string;
}
function hideeye() {
var string = '';
document.getElementById('showhide').innerHTML = string;
}
var $inputItem = $(".js-inputWrapper");
$inputItem.length && $inputItem.each(function () {
var $this = $(this),
$input = $this.find(".formRow--input"),
placeholderTxt = $input.attr("placeholder"),
$placeholder;
$input.after('<span class="placeholder">' + placeholderTxt + "</span>"),
$input.attr("placeholder", ""),
$placeholder = $this.find(".placeholder"),
$input.val().length ? $this.addClass("active") : $this.removeClass("active"),
$input.on("focusout", function () {
$input.val().length ? $this.addClass("active") : $this.removeClass("active");
}).on("focus", function () {
$this.addClass("active");
});
});
// toggle password visibility
$('#password + .glyphicon').on('click', function () {
$(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
$('#password').togglePassword(); // activate the hideShowPassword plugin
});
<style>#import url('https://fonts.googleapis.com/css?family=Lato');*,*:before,*:after{box-sizing: border-box;}html,body{display:flex;align-items:center;justify-content:center;}.wrapper{width:400px; max-width:80%;}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<style type="text/css">
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 0.3em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.formRow--input {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px #95989a;
border-radius: 4px;
color: #2c3235;
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.formRow--input-wrapper {
position: relative;
display: block;
width: 100%;
}
.formRow--input-wrapper.active .placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover) ~ .placeholder {
color: #fec8c9;
}
.formRow--input-wrapper .formRow--input:focus, .formRow--input-wrapper .formRow--input:hover {
border-color: #fd999a;
}
.formRow .placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: #95989a;
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#password + .glyphicon {
cursor: pointer;
pointer-events: all;
}
#wrapper {
max-width: 500px;
margin: auto;
padding-top: 25vh;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.1.1/hideShowPassword.min.js"></script>
<div class="wrapper">
<fieldset class="formRow">
<div class="formRow--item">
<br /><br /><br /><br />
<label for="password" class="formRow--input-wrapper js-inputWrapper">
<div class="form-group has-feedback">
<input type="password" class="form-control formRow--input js-input" name="password" id="password" placeholder="Password" onFocus="showeye();" onBlur="hideeye();">
<div id="showhide"></div>
</div>
</label>
</div>
</fieldset>
</div>
Change your field-icon css to this
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
display: none
}
And add this to your jquery
$("#password-field").focusin(function () {
$(".field-icon").show();
});
$("#password-field").focusout(function () {
$(".field-icon").hide();
});
Well you can do something like this. Check if the icon is visible, if Yes -> hide it, else -> show it. And hide it at first in the CSS.
var pswIcon = $(".toggle-password")
$("#password-field").on('focus blur', function() {
$(pswIcon).is(":visible") ? $(pswIcon).hide() : $(pswIcon).show()
})
$(pswIcon).click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
}
.container{
padding-top:50px;
margin: auto;
}
.fa.toggle-password {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Check it out once.
/*$(document).ready(function() {
$('.inputcontainer input').click(function() {
$(this).parent('.inputcontainer').addClass('show');
//$('.toggleplaceholder').show();
});
$(document).click(function() {
$('.inputcontainer').removeClass('show');
//$('.toggleplaceholder').hide();
});
});*/
$(document).ready(function(){
$('.inputcontainer').click( function(e) {
e.preventDefault(); // stops link from making page jump to the top
e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
$(this).addClass('show');
});
$('.toggleplaceholder').click( function(e) {
e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
});
$('html').click( function() {
$('.inputcontainer').removeClass('show');
});
});
.toggleplaceholder {
display: none;
}
.show .toggleplaceholder {
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputcontainer">
<input type="password" placeholder="password">
<span class="toggleplaceholder"><i class="fas fa-eye"></i></span>
</div>
Related
I have an HTML page responsible for creating new users on my website.
After creating the user, the website must show a pop-up saying the user was created successfully.
Everything works fine, except that I had to configure an "onsubmit= return false" because I didn't find any other way to display the pop-up without the page redirecting immediately after the submission.
Now the form doesn't save the new users that are being created, so I'm trying to change the form value to true...
How can one do that? returning true after the pop-up closes.
Here is my code so far-
document.getElementById("accountForm").addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup() {
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
document.getElementById("accountForm").setAttribute("onsubmit", "true");
window.location.replace("/login/");
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" onsubmit="return false" method="post" id="accountForm">
<form onsubmit="return false" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
You have invalid HTML, nested form tags with duplicate IDs
You need to submit the form, but if you you actually submit the form, why not show the popup when you return
Here is how to stop and submit when the form is closed
const form = document.getElementById("accountForm")
form.addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup(e) {
e.preventDefault(); // stop submission
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.submit();
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
Finally, I found a solution.
Used an event listener on the submit button to prevent the default course of action, then showed the pop-up.
Afterward, removed the pop-up and told the form what action needs to be done and to submit.
This is how it looks!
<script>
const form = document.getElementById("accountForm");
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function closePopup(){
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.action = "/create/created_user";
form.submit()
}
document.getElementById("accountForm").addEventListener("submit", function(event){
event.preventDefault();
blur.classList.toggle('active');
popup.classList.add("open-popup");
});
</script>
# POPUP HTML CONFIGURATION
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with the job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
#FORM CONFIGURATION
<form method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
I have a problem with the verification of a form in html, what I want is to prevent the page from reloading when submitting the form, because the idea is that the modal closes and another one opens on the right side of the screen, for the I was looking at it and I had to add action="javascript:void(0);" to form But now when typing in the fields, it automatically loads the test links without waiting to hit the button. I would like to know why this happens. Apart from knowing how to close and open the modal from the code. The modals are from bootstrap.
The Username is not checking correctly what is written in the field, because when writing e, which is what is expected, it continues to enter the else. I have also removed the action from the form due to a response a friend gave me, but it still doesn't work. Why is the .getElementById not returning the text of the corresponding field?I have a problem with the verification of a form in html, what I want is to prevent the page from reloading when submitting the form, because the idea is that the modal closes and another one opens on the right side of the screen, for the I was looking at it and I had to add action="javascript:void(0);" to form But now when typing in the fields, it automatically loads the test links without waiting to hit the button. I would like to know why this happens. Apart from knowing how to close and open the modal from the code. The modals are from bootstrap.
The Username is not checking correctly what is written in the field, because when writing e, which is what is expected, it continues to enter the else. I have also removed the action from the form due to a response a friend gave me, but it still doesn't work. Why is the .getElementById not returning the text of the corresponding field?
const Username = document.getElementById("Username");
const password = document.getElementById("input-pass");
const passwordreal = `32°32′46″ N, 16°31′31″ W`
const form = document.getElementById("Formulario");//Añadido debido a una respuesta
Username.addEventListener("input", function (event) {
if (Username=="e") {
if (password==passwordreal){
location.href='https://www.youtube.com/c/OnlineTutorials4Designers/videos'//Links de prueba
}else{
location.href='https://www.youtube.com/channel/UCe8xYIQ3m5hzJ0M2fzp9AEw/videos'
}
} else {//Sigue llegando a este else
location.href='https://www.youtube.com/c/MrBeast6000'
}
});
form.addEventListener("submit", function (event) {
e.preventDefault()
});//Añadido debido a la respuesta, no funciona.
:root{
--input-color: #80868B;
--border-color: #DADCE0;
}
body {
background-image: url("https://64.media.tumblr.com/bd1b0d977b3e43cc5645297d5322662c/tumblr_ndyybljlWc1rvnh7zo1_r1_500.gif");
overflow: hidden;
height: 100vh;
background-size: cover;
background-position: center;
}
/* Centrar elemento dentro de main */
.main {
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
width: 1404px/*550px*/;
height: 658px/*315px*/; line-height: 50px; /* Con «line-height» con el mismo valor numérico de la altura centras horizontalmente el texto */
}
.video{
width: 1370px;
height: 770px;
}
.icon {
position: absolute;
right: 0;
/* top: 0; */
bottom: 0;
width: 3vw;
height: 97vh;
}
.input {
position: relative;
background-color: var(--container-color);
padding: 1.35rem 1.25rem;
border-radius: .5rem;
display: flex;
align-items: center;
column-gap: .75rem;
}
.input__lock, .input__icon {
font-size: 1.25rem;
z-index: 1;
}
.input__lock, .input__password {
color: var(--white-color);
}
.input__icon {
color: var(--first-color);
cursor: pointer;
position: absolute;
right: 0.5vw;
top: 1.5vh;
}
.input__password {
background: transparent;
border: none;
outline: none;
font-size: 14px;
z-index: 1;
}
.input__password::placeholder {
color: var(--white-color);
}
.input__overlay {
width: 32px;
height: 32px;
background-color: var(--white-color);
position: absolute;
right: .9rem;
border-radius: 50%;
z-index: 0;
transition: .4s ease-in-out;
}
/* Transition effect */
.overlay-content {
width: 100%;
height: 100%;
border-radius: .5rem;
right: 0;
}
.overlay-content ~ .input__lock {
color: var(--container-color);
}
.overlay-content ~ .input__password,
.overlay-content ~ .input__password::placeholder {
color: var(--text-color);
}
.form{
width: 360px;
padding: 4rem 2rem;
border-radius: 1rem;
}
.form__title{
font-weight: 400;
margin-bottom: 3rem;
}
.form__div{
position: relative;
height: 48px;
margin-bottom: 1.5rem;
}
.input__icon {
color: var(--first-color);
cursor: pointer;
}
.form__input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: var(--normal-font-size);
border: 1px solid var(--border-color);
border-radius: .5rem;
outline: none;
padding: 1rem;
background: none;
z-index: 1;
color: #f0f0f0;
}
.form__label{
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 .25rem;
background-color: var(--bs-dark-rgb);
color: var(--input-color);
font-size: var(--normal-font-size);
transition: .3s;
}
.form__button{
display: block;
margin-left: auto;
padding: .75rem 2rem;
outline: none;
background-color: transparent;
color: #fff;
font-size: var(--normal-font-size);
border-radius: .5rem;
cursor: pointer;
transition: .3s;
}
.form__button:hover{
box-shadow: 0 10px 36px rgba(0,0,0,.15);
}
/*Input focus mover arriba label*/
.form__input:focus + .form__label{
top: -.5rem;
left: .8rem;
color: var(--first-color);
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
background-color: #212529;
}
/*Input focus mantener arriba label*/
.form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label{
top: -.5rem;
left: .8rem;
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
background-color: #212529;
}
/*Input focus*/
.form__input:focus{
border: 1.5px solid var(--first-color);
}
.bx2 {
font-family: boxicons!important;
font-weight: 400;
font-style: normal;
font-variant: normal;
/*line-height: 3.5;*/
text-rendering: auto;
/*display: inline-block;*/
text-transform: none;
-webkit-font-smoothing: antialiased;
position: absolute;
/* right: 23px; */
left: 19rem;
top: 0.80rem;
-moz-osx-font-smoothing: grayscale;
}
.img-content{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.img-content:hover{
cursor: pointer;
}
/*====================================================================================*/
.box2 img {
object-fit: fill;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/estilo1.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,600" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Prueba</title>
<!--=============== BOXICONS ===============-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="icon">
<ion-icon name="reorder-four-outline" size="large"></ion-icon>
</div>
<div class="main">
</div>
<!--Modal-->
<div class="modal fade" id="uploads" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog bg-dark">
<div class="modal-content bg-dark">
<div class="modal-header bg-dark">
<h5 class="modal-title bg-dark" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="card text-white bg-dark mb-3" style="max-width: 80rem;">
<h3 style="color:#ffffff" class="card-header"><i class="far fa-image" aria-hidden="true"></i>Login</h3>
<div class="card-body">
<form id="Formulario" target="_self" method="POST" enctype="multipart/form-data" autocomplete="off" onKeyPress="if (event.which == 13) return false;">
<br>
<div class="form__div">
<input id="Username" type="text" class="form__input" placeholder=" " autofocus name="Email">
<label for="" class="form__label">Username</label>
</div>
<div class="form__div">
<div class="input__overlay" id="input-overlay"></div>
<input type="password" placeholder=" " class="form__input" id="input-pass" name="Password" onKeyPress="if (event.which == 13) return false;">
<label for="" class="form__label">Password</label>
<i class='bx bx-hide input__icon' id="input-icon"></i>
</div>
<br>
<script>
/*=============== SHOW / HIDDEN INPUT ===============*/
const showHiddenInput = (inputOverlay, inputPass, inputIcon) =>{
const overlay = document.getElementById(inputOverlay),
input = document.getElementById(inputPass),
iconEye = document.getElementById(inputIcon)
iconEye.addEventListener('click', () =>{
// Change password to text
if(input.type === 'password'){
// Switch to text
input.type = 'text'
// Change icon
iconEye.classList.add('bx-show')
}else{
// Change to password
input.type = 'password'
// Remove icon
iconEye.classList.remove('bx-show')
}
// Toggle the overlay
overlay.classList.toggle('overlay-content')
})
}
showHiddenInput('input-overlay','input-pass','input-icon')
</script>
<br>
<div class="form-group">
<button class="btn btn-outline-light">
<i class="fa fa-upload" aria-hidden="true"></i>Subir Imagen
</button>
<script src="./js/ValidacionInicio.js"></script>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fin Modal-->
</body>
</html>
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()">' + mylist + '</li>');
});
});
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementsByTagName("LI").style.visibility = "visible";
} else {
document.getElementById("myUL").style.visibility = "hidden";
}
}
#container {
text-align: center;
margin: auto;
width: 400px;
border: 1px solid #ccc;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.header:after {
content: "";
display: table;
clear: both;
}
#myUL {
width: 50%;
margin-left: auto;
margin-right: 27%;
}
.claim {
position: absolute;
right: 0;
top: 0;
}
#check {
margin-right: -190px;
margin-left: -190px;
margin-top: 9px;
}
<html>
<head>
<title>Login </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body>
<div class="hero">
<div class="container">
<h1 class="display-2 text-center">To-Do</h1>
<div class="row">
<form id="form" class="col-lg-6 col-8 mx-auto">
<div class="input-group">
<input id="input" class="form-control" placeholder="Enter a new task here">
<span>
<button id="btn" type="button" class="btn btn-primary" >Add</button>
</span>
</div>
</div>
<ul id="myUL">
<li>Hit the gym </li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
</ul>
<div class="row">
<button id="btnClr" type="button" class="btn btn-primary mx-auto btnHide"> Remove Complete </button>
</div>
</form>
</div>
</div>
</body>
</html>
**I want to run a line through the text once it is selected and I am not sure how to do that. I have pasted most of my code above and I tried to toggle the visiblity of the list in order to make sure if the checking function works or not. The checking function works. I just want some ideas of how should i strike through the text once the checkbox next to the box is selected. **
you can refer this article to done this task here. Anyway I try to use it and it works fine. Hope this one can give you some insight.
Add label on your jQuery code, <label>' + mylist + '</label> and looks something like this:
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()"><label>' + mylist + '</label></li>');
});
});
And add this line to your CSS:
input:checked+label {
text-decoration: line-through;
text-decoration-color: #fff;
}
I need to show clear X button in chrome with type Password
I am trying
input[type="password"] {
-webkit-appearance: searchfield;
}
input[type="password"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
<input type="password" placeholder="enter text here..." />
If you want native/pure CSS. This should work only in Chrome.
.password {
-webkit-text-security: disc;
}
<input type="search" class="password" placeholder="enter text here..." />
Please check this code.
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
var $inp = $(this).find("input:password"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=password]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clearable">
<input type="password" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
For input[type='password'] X icon is not supported. You have to manually take care of icon and click event or you can try with this
.close-icon {
border: 0 solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: relative;
z-index: 1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
color: black;
cursor: pointer;
}
.search-box:not(:valid)~.close-icon {
display: none;
}
<form>
<input type="password" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
I am new in html, css and I am getting error when user enter invalid input into the input box then label of particular input field goes down but when user enter
correct input then its work fine.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<form id="form">
<div class="group">
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
I have tried this
<form id="form">
<div class="group">
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
.group {
margin-top: 40px;
position: relative;
margin-bottom: 45px;
}
input {
font-size: 22px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label.labeling {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
input:focus ~ label.labeling,
input:valid ~ label.labeling {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 309px;
}
.bar:before,
.bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
$(document).ready(function() {
$("#form").validate({
rules: {
name: {
required: true
},
email: {
required: true
}
},
messages: {
minlength: "your name at least 4 characters long",
email: "Please enter a valid email address"
}
});
});
You have to use some JS too to here as there is no :empty css property for an input box.(using :invalid will mean your placeholder setup will not work!)
Check out this fiddle and let me know your feedback. Thanks!
Used this css:
input.invalid-input ~ label.labeling {
top: -20px;
font-size: 14px;
color: red;
}
and added some js too:
$("input").each(function() {
var $this = $(this);
$this.on("change", function() {
if ($(this).is(':invalid') && $(this).val() != "") {
$(this).addClass("invalid-input");
} else {
$(this).removeClass("invalid-input");
}
});
});