I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle()
$(".form-div-top").animate({
duration: 200
});
$(".form-div-top").fadeIn( "slow", function() {
// Animation complete
});
})
});
jQuery's toggle method accepts a duration in milliseconds as the first argument.
$(".form-div-top").toggle(300);
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle(300);
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
On my own I can suggest a solution using the toggleClass() method:
...
$(".form-div-top").toggleClass("form-div-top_show");
...
It is necessary to create an additional class for the block activity:
.form-div-top_show {
opacity: 1;
}
And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with opacity: 0:
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggleClass("form-div-top_show");
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
.form-div-top_show {
opacity: 1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
Related
I'm having difficulty implementing localStorage on my site (https://www.reclaimdesign.org).
What I am trying to do is:
Newsletter subscription pop-up on each page - this works fine
Click X to close the subscription pop-up - this also works fine
Remember the closed state of the window so that all other pages visited on our site don't have the pop-up and irritate the user after they have closed the pop-up already - this is not working. Not even a little bit.
My thinking was to set a variable with localStorage and then refer to the variable to see if the windows should be displayed or not. It is highly likely that my logic and syntax are at best sketchy, so if anyone could please guide me in the correct method this would be much appreciated.
The code I have been tinkering with for the subscription pop-up looks like this:
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
$(window).on("load", function() {
if(localStorage.getItem("popState") == 'hide'){
//$(".signup").hide();
$(".signup").css("display", "none");
}
else if (localStorage.getItem("popState") != 'hide'){
$(".signup").css("display", "block");
}
});
}
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
Yes your getSignup is not called correctly.
Here you can see the alternative solution without jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
if (localStorage.getItem("popState") == 'hide') {
//$(".signup").hide();
document.querySelector('.signup').style.display = 'none';
} else if (localStorage.getItem("popState") != 'hide') {
document.querySelector('.signup').style.display = 'block';
}
}
window.addEventListener("load", getSignup);
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks very much for your input guys. I got it working with the following (for anyone who might come up against the same issue)...
HTML:
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
CSS:
.signup {
bottom: 2%;
display: none;
margin-right: -15px !important;
max-width: 280px;
position: fixed;
right: 2%;
z-index: 9999;
}
.signup-header {
background: #539c22;
border-radius: 10px 10px 0 0;
color: #ffffff;
font-family: 'Carrois Gothic', sans-serif;
font-size: 20px;
padding: 25px 15px;
text-transform: uppercase;
}
.signup-container {
background-color: #6db240;
border-radius: 0 0 10px 10px;
color: #ffffff;
padding: 15px;
}
.closebtn {
color: #ffffff;
cursor: pointer;
font-size: 30px;
position: absolute;
right: 15px;
top: 5px;
}
.closebtn:hover {
color: #6db240;
}
.signup-container .button {
background-color: #539c22;
border: 0 none;
border-radius: 5px;
color: #ffffff !important;
cursor: pointer;
font-size: 15px;
height: 32px;
line-height: 32px;
margin: 0 15px 0 0 !important;
text-align: center;
transition: all 0.23s ease-in-out 0s;
width: 100% !important;
}
.signup-container .button:hover {
opacity: 0.7;
}
.signup-container .mc-field-group input {
display: block;
padding: 8px 0;
text-indent: 2%;
width: 100%;
}
.signup-container input {
border: 1px solid #d0d0d0;
border-radius: 5px;
cursor: auto;
font-family: 'Open sans', sans-serif;
font-size: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
JQuery:
$(document).ready(function() {
$('.signup').css('display', 'block');
$PopUp = $('.signup');
var hide = JSON.parse(localStorage.getItem('hide'));
if (hide) {
$PopUp.hide();
} else {
// initialize value in case it hasn't been set already
localStorage.setItem('hide', false);
}
$('.closebtn').click(function() {
$('.signup' ).hide();
// toggle the boolean by negating its value
var hide = JSON.parse(localStorage.getItem('hide'));
localStorage.setItem('hide', !hide);
});
});
I want my 'sales bar' to slid-up after the user click the close 'x' button.
it was all working fine -with the close button - but then I added a form, and if I put the close button inside the form (to get it in-line) then the slideUp only last a second, and the bar slides back down - it should stay 'gone'.
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
</style>
</head>
<body>
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast');
});
}
});
</script>
</body>
</html>
(credit to https://www.buildersociety.com/threads/hellobar-free-alternative-devseries.1519/)
To be clear; If I make this modification (below) moving the close button outside the form. The behavior is correct. But the button is below the form
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button>
</div>
</form>
×
How about hide() after slideUp()?
$('.top-general-alert').slideUp('fast').hide('fast');
EDIT: form buttons cause page reload. Add type=button or type=reset will do work.
Full example below:
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast').hide('fast');
});
}
});
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button type="reset" class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>
You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.
You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>
Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>
you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)
I am trying to create a login form. Here is the example..
.log {
margin-top: 40px;
margin-left: 30px;
margin-right: 30px;
position: relative;
}
.log input[type="text"] {
font-size:13px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.log input[type="password"] {
font-size:13px;
padding: 5px 10px 5px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.inputlog:focus { outline:none;}
.log label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left: 5px;
top: 5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input.inputlog:focus ~ label, input.used ~ label {
top: -20px;
color: #4a89dc;
}
.bar {
position:relative;
display:block;
width:100%;
}
.bar:before, .bar:after {
content:'';
height:2px;
width: 0;
bottom:1px;
position:absolute;
background: #1ba4df;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after {
width:50%;
}
<div class="form-desc">
<div class="lock-icon">
<img src="assets/img/icon/padlock.png">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password">
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div class="login-btn">
<h4>LOGIN</h4>
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
</div>
Here now if click on the fields, the border bottom color is change to Blue.
Suppose if the fields are empty and if I am click on the login button, How to change of the border bottom color Blue to Red? Means it should show these are required field like that.
I need only the border color change to Red.
Thank you.
Try this code.
Plunker LINK
HTML
<div class="log">
<input id="user" class="inputlog" type="text" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input id="pwd" class="inputlog" type="password" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
JS
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
CSS
.makeRed{
border-bottom: 1px solid red !important;
}
using this jQuery
$('form').find('input').each(function(){
if($(this).prop('required')){
$(this).parent().find('.bar')addClass('red-bar');
} else {
$(this).parent().find('.bar')removeClass('red-bar');
}
});
and CSS
.bar.red-bar:before, .bar.red-bar:after {
background: red;
}
Hope, this will help to get idea to solve your problem, HTML with edited login button
<div class="form-desc">
<div class="lock-icon">
<img src="">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div>
<input class="login-btn" type="submit" value="login">
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
JQuery
$(".login-btn").on("click",function(){
var text = $("input[type='text']");
var pass = $("input[type='password']");
if(!text.val()){
text.css("border","2px solid red");
}
if(!pass.val()){
pass.css("border","2px solid red");
}
});
This work for me
var Error_Flag = false;
$('.Signin_Form').find('input').each(function(){
if($(this).attr('required')){
if($(this).val() == ''){
$(this).css({'border': '1px solid #FFB74D'});
Error_Flag = true;
}
else
{
$(this).css({'border':''});
}
}
});
$('.Signin_Form input').on('keyup',function(event) {
if($(this).val() != ''){
$(this).css({'border':''});
}
});
if(Error_Flag){
return;
}
How can i use this code so that it affects multiple input fields.
So when someone clicks on a button every input get's that value added to the original.
But the added value has to toggle on and off.
HTML
<button id="toggle1" onclick="myFunction1()" class="1">Circle On</button>
<button id="toggle2" onclick="myFunction2()" class="2">Square On</button>
<button id="toggle3" onclick="myFunction3()" class="3">Border On</button>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
<li>
<div class="icon icon-arrow-d"></div>
<input id="text" type="text" readonly="readonly" value="arrow-d">
</li>
Script
document.getElementById('toggle1').onclick = function() {
var txt = ' circle',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle2').onclick = function() {
var txt = ' square',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
document.getElementById('toggle3').onclick = function() {
var txt = ' border',
area = document.getElementById('text');
area.value = area.value.indexOf(txt) != -1 ? area.value.replace(txt, '') : area.value + txt;
}
Try it!
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["#mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
Your all input ID values are same ,
if you want to change all input when click try with it jquery
look it
<pre>https://jsfiddle.net/6xyasx7u/</pre>
I have the answer.
$('#toggle1,#toggle2,#toggle3').click(function() {
toggleText(this.innerHTML.toLowerCase());
});
function toggleText(text) {
$(".text").each(function() {
var totalArray = [' circle', ' square', ' border'];
if ($(this).val().indexOf(text) != -1) {
var regex1 = new RegExp(text, "");
$(this).val($(this).val().replace(regex1, ""));
console.log("After replacing " + $(this).val());
} else {
//console.log( "After replacing " + $(this).val() );
$(this).val($(this).val() + "" + text);
//console.log( "After replacing " + $(this).val() );
}
totalArray.splice(totalArray.indexOf(text), 1);
console.log(totalArray);
var regex2 = new RegExp(totalArray.join("|"), "");
console.log(regex2);
$(this).val($(this).val().replace(regex2, ""));
});
}
$(document).ready(function() {
$("button.cirkel").click(function() {
$(".icon").removeClass("border");
$(".icon").removeClass("square");
$(".icon").toggleClass("circle");
$("button.cirkel").toggleClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").removeClass("on");
});
$("button.vierkant").click(function() {
$(".icon").removeClass("border");
$(".icon").toggleClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").toggleClass("on");
$("button.rand").removeClass("on");
});
$("button.rand").click(function() {
$(".icon").toggleClass("border");
$(".icon").removeClass("square");
$(".icon").removeClass("circle");
$("button.cirkel").removeClass("on");
$("button.vierkant").removeClass("on");
$("button.rand").toggleClass("on");
});
$("#uitleg-toggle").click(function() {
$("#uitleg").toggleClass("zichtbaar");
});
$("input:text").focus(function() {
$(this).select();
});
});
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
ul {
padding: 0;
margin: 10px 0 0 0;
}
li {
list-style-type: none;
display: block;
left: 0;
margin: 5px 0 5px 0;
postiton: relative;
float: left;
}
button {
width: 100px;
border-radius: 7px;
height: 40px;
font-size: 20px;
border: 0px;
margin: 10px 10px 10px 0;
color: #FFF;
background-color: #D95021;
border: 3px outset #EA6C40;
display: block;
float: left;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #F9794D;
}
.on {
background-color: #5DC55D !important;
color: #FFF !important;
border: 3px outset #6BD46B;
}
.icon {
height: 66px !important;
width: 66px !important;
margin: 0 auto;
font-size: 55px !important;
padding: 10px !important;
text-align: center;
}
input {
border-radius: 10px;
padding: 10px;
border: 1px solid #dedede;
font-size: 16px;
text-transform: uppercase;
}
.circle {
border-radius: 80px !important;
display: block;
border: 3px solid #FF0066;
background-color: #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.circle:hover {
background-color: #FFF;
border: 3px solid #FF0066;
color: #FF0066 !important;
}
.square {
border-radius: 10px !important;
display: block;
background-color: #FF0066;
border: 3px solid #FF0066;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FFF !important;
}
.square:hover {
background-color: #FFF;
border: 3px solid #FF0066;
background-color: #FFF;
color: #FF0066 !important;
}
.border {
border-radius: 80px !important;
border: 3px solid #FF0066;
display: block;
background-color: #FFF;
transition: all 0.5s cubic-bezier(.74, -1.16, .2, 2.16) 0s;
cursor: pointer;
text-decoration: none;
color: #FF0066 !important;
}
.border:hover {
background-color: #FF0066 !important;
color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click to add a class to see how it looks with a extra classname.</h3>
<button id="toggle1" class="cirkel">Circle</button>
<button id="toggle2" class="vierkant">Square</button>
<button id="toggle3" class="rand">Border</button>
<div style="clear:both;"></div>
<ul class="glyphs css-mapping">
<li>
<div class="icon lm-home">1</div>
<input id="text" class="text" type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon lm-notes">2</div>
<input id="text" class="text" type="text" readonly="readonly" value="notes">
</li>
<li>
<div class="icon lm-info">3</div>
<input id="text" class="text" type="text" readonly="readonly" value="info">
</li>
<li>
<div class="icon lm-support">4</div>
<input id="text" class="text" type="text" readonly="readonly" value="support">
</li>
<li>
<div class="icon lm-check">5</div>
<input id="text" class="text" type="text" readonly="readonly" value="check">
</li>
<li>
<div class="icon lm-cross">6</div>
<input id="text" class="text" type="text" readonly="readonly" value="cross">
</li>
<li>
<div class="icon lm-min">7</div>
<input id="text" class="text" type="text" readonly="readonly" value="min">
</li>
<li>
<div class="icon lm-full">8</div>
<input id="text" class="text" type="text" readonly="readonly" value="full">
</li>
<li>
<div class="icon lm-menu">9</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu">
</li>
<li>
<div class="icon lm-menu-list">10</div>
<input id="text" class="text" type="text" readonly="readonly" value="menu-list">
</li>
<li>
<div class="icon lm-dots">11</div>
<input id="text" class="text" type="text" readonly="readonly" value="dots">
</li>
<li>
<div class="icon lm-star">12</div>
<input id="text" class="text" type="text" readonly="readonly" value="star">
</li>
<li>
<div class="icon lm-zoom">13</div>
<input id="text" class="text" type="text" readonly="readonly" value="zoom">
</li>
<li>
<div class="icon lm-excl-mark">14</div>
<input id="text" class="text" type="text" readonly="readonly" value="excl-mark">
</li>
<li>
<div class="icon lm-question">15</div>
<input id="text" class="text" type="text" readonly="readonly" value="question">
</li>
<li>
<div class="icon lm-arrow-rd">16</div>
<input id="text" class="text" type="text" readonly="readonly" value="arrow-rd">
</li>
<li>
<div class="icon lm-s-arrow-r">17</div>
<input id="text" class="text" type="text" readonly="readonly" value="s-arrow-r">
</li>
<li>
<div class="icon lm-reset">18</div>
<input id="text" class="text" type="text" readonly="readonly" value="reset">
</li>
</ul>
</div>