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);
});
});
Related
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>
I want to validate a login form. It iss working fine when I validate just mobile numbers. If I validate both mobile and password, then only the last one is working – rest is not working well. Can anybody help me, what is wrong in this code?
What I tried:
function loginValidation() {
if ($('[name="mobileNo"]').val() == '') {
$('.validation_error').text('Mobile number is reuired').addClass('validation_active');
} else {
$('.validation_error').text('').removeClass('validation_active');
}
if ($('[name="loginPassword"]').val() == '') {
$('.validation_error').text('Password is reuired').addClass('validation_active');
} else {
$('.validation_error').text('').removeClass('validation_active');
}
setTimeout(function() {
$('.validation_error').text('').removeClass('validation_active');
}, 3000);
};
.validation_error {
position: fixed;
bottom: 20px;
width: 80%;
height: auto;
text-align: center;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: #ee2e24;
z-index: 10000;
color: #fff;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 2px 4px 39px #333;
transition: all 0.45s;
transform: translateY(100px);
}
.validation_active {
transform: translateY(0px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div id="loginBox">
<div class="form-group">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-phone"></i></span>
</div>
<input type="text" class="form-control" placeholder="Mobile No" name="mobileNo">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="loginPassword">
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block btn-lg" onclick="loginVelidation();">Login</button>
</div>
</div>
<div class="validation_error"></div>
Now is password is reuired is display when i click on login button. But first i want to validate mobile is reuired
Can you try like below :
function loginVelidation()
{
if ($('[name="mobileNo"]').val() == '') {
$('.validation_error').text('Mobile number is reuired').addClass('validation_active');
}
else if ($('[name="loginPassword"]').val() == '') {
$('.validation_error').text('Password is reuired').addClass('validation_active');
else {
$('.validation_error').text('').removeClass('validation_active');
}
setTimeout(function() {
$('.validation_error').text('').removeClass('validation_active');
}, 3000);
};
Your code is right but you are overriding the error message $('.validation_error') if you want to show both errors then you to create separate error holder element.
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 have to put two dates (Start and End of task).
I would like to guarantee that the user cannot send wrong data.
My problem is, after my possible solution, the user cannot type inside date_end.
I created two javascript to do this, but I'm not javascript experienced to be sure exactly how to do this.
function datestart(value) {
document.getElementById("date_end").value = value;
}
function dateend(value) {
var vdatestart = document.getElementById("date_start").value;
if (value < vdatestart) {
document.getElementById("date_end").value = vdatestart;
}
}
.col-30 {
float: left;
width: 30%;
margin-top: 6px;
}
.col-70 {
float: left;
width: 70%;
margin-top: 6px;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.row:after {
display: table;
clear: both;
}
<div class="container">
<form name="form1" action="datetime1.php" method="post">
<div class="row">
<div class="col-30">
<label>Start Date and Time from Start:</label>
</div>
<div class="col-70">
<input type='datetime-local' name='date_start' id='date_start' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="datestart(this.value);" onclick="datestart(this.value);" />
</div>
</div>
<div class="row">
<div class="col-30">
<label>End Date and Time:</label>
</div>
<div class="col-70">
<input type='datetime-local' name='date_end' id='date_end' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="dateend(this.value);" onclick="dateend(this.value);" />
</div>
</div>
<div class="row">
<input type="submit" name="submit" value="Send">
</div>
</form>
</div>
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 :)