I am not good with Javascript and would appreciate any help here. I have a written a css that display announcement when webpage loads up with a close button to hide the entire css and its contents using Jquery animate.
I would like to use localstorage to keep it hidden once clicked till after a specific period of time, lets say 24hrs, so that when user reloads page, it doesn't show till after the specified period of time.
My code is
$('.cta-floating_close').click(function() {
$('.cta-floating_component').each(function() {
$(this).animate({
top: '-200px',
}, 500 );
});
});.cta-floating_component {
position: fixed;
left: auto;
top: 9rem;
right: 2rem;
z-index: 1000;
display: none;
max-width: 16rem;
padding: 1rem 2rem;
border-radius: 1rem;
background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486));
background-image: linear-gradient(90deg, #b671e4, #f01486);
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
color: #fff;
}
.cta-floating_close {
position: absolute;
left: auto;
top: -7px;
right: 0rem;
bottom: auto;
font-size: 1.8rem;
cursor: pointer;
}
.cta-floating {
position: relative;
z-index: 3000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="cta-floating"><div class="cta-floating_component" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div class="cta-floating_close">X<i class="las la-times-circle"></i></div></div></div>How do i implement this? Thanks in anticipation
On close click, you can set the time until it should be hidden to the localStorage.
In this example it's basically now plus 10 seconds (adjust how you need it).
Then setInterval to periodically check if that time has been reached or not.
The same on $(document).ready in case the viewer has left the page and came back again.
$('.cta-floating_close').click(function() {
const now = new Date();
let then = new Date();
then.setTime(now.getTime()+ (10*1000)); //10 seconds
localStorage.setItem('showAt', then);
setInterval(ShowButton, 1000)
$('.cta-floating_component').each(function() {
$(this).animate({
top: '-200px',
}, 500 );
});
});
$(document).ready(function(){
console.log('ready')
ShowButton()
setInterval(ShowButton, 1000)
})
function ShowButton(){
if(new Date(localStorage.getItem('showAt')) < new Date()){
const element = document.getElementsByClassName('cta-floating_component')[0]
element.style.display = 'block';
element.style.top = '';
}else{
document.getElementsByClassName('cta-floating_component')[0].style.display = 'none';
}
}.cta-floating_component {
position: fixed;
left: auto;
top: 9rem;
right: 2rem;
z-index: 1000;
display: none;
max-width: 16rem;
padding: 1rem 2rem;
border-radius: 1rem;
background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486));
background-image: linear-gradient(90deg, #b671e4, #f01486);
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
color: #fff;
}
.cta-floating_close {
position: absolute;
left: auto;
top: -7px;
right: 0rem;
bottom: auto;
font-size: 1.8rem;
cursor: pointer;
}
.cta-floating {
position: relative;
z-index: 3000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="cta-floating"><div class="cta-floating_component" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div class="cta-floating_close">X<i class="las la-times-circle"></i></div></div></div>