I have a popup which opens on click of a button. The button is present in all the pages.
The popup should appear only once.
When a user opens a page and click on button the popup must appear and if he clicks on the same button again popup should not come, and from that page if he redirects to another page and clicks on the same button popup should not appear.
If the browser is closed and opened again the popup must appear and the same conditions must apply again.
These are the cases when a popup should appear and when it should not.
How to achieve this with jquery and PHP
you can create popup show only once on click using sessionStorage in jquery- check working
example here
jsfiddle.net/ayatullahrahmani/p1p2zpx5/
here is jquery Code-
$(document).ready(function () {
$(".open").click(function () {
$(".animateDivWrap").addClass("activePopup");
});
$(".close").click(function () {
$(".animateDivWrap").removeClass("activePopup");
sessionStorage.setItem("myClass", "firstGone");
$(".animateDivWrap").addClass(sessionStorage.myClass);
});
// after first load this class would be added
$(".animateDivWrap").addClass(sessionStorage.myClass);
});
css-
body {
overflow:hidden;
}
.animateDivWrap {
position: absolute;
top: 70px;
right: 0px;
left:0px;
width: 300px;
height: 199px;
background: #f6f6f6;
z-index: 9;
display: none;
/*opacity: 0;*/
border: solid 1px #ddd;
border-radius: 5px;
margin:auto;
}
.animateDivContent {
position:relative;
padding: 10px;
}
.animateDivContent .close {
position: absolute;
right: 5px;
top: 3px;
font-size: 12px;
color: #373434;
opacity: 1;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(400px);
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(400px);
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp{
opacity: 0;
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
.activePopup {
display: block;
/*opacity:1;*/
/*-webkit-animation:bounce 1s infinite;*/
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: fadeInUp;
animation-duration: 1s;
}
.close {
cursor: pointer;
}
.firstGone {
display:none;
}
html-
<button type="button" class="open">open</button>
<div class="animateDivWrap">
<div class="animateDivContent">
<a class="close" href="javascript:void(0)" title="close"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
sessionStorage is the best option for this. as it stores data for that session only. So you can store whether the popup is opene or not.
Just bind the following function as handler function on button click.
function onButtonClick(e)
{
if (sessionStorage.isButtonClicked == undefined) {
sessionStorage.isButtonClicked = true;
// You can do require functionality here e.g. open the popup.
} else {
// do nothing as popup is already opened.
}
}
Related
Hello and thank you in advance for reading my question.
GOAL: Set image so that once it's scrolled into view it transitions smoothly into a set position - but still reacts to :hover. Using #keyframes and a little JavaScript, I set the image to opacity: 0 and it's final opacity to opacity: .85. Then I added a hover effect in CSS to make it's opacity: 1
The issue is once it's finished with it's transition - it disappears - reverting to it's original opacity which is zero. I managed to make it freeze at .85 with animation-fill-mode: forwards, rather than animation-fill-mode: none, but then it won't respond to :hover
And here's a test snippet of the problem in action:
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
animation: center_img 1s 0.5s none;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1;
transform: scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem);
}
100% {
transform: translateY(0);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
If I could get a hand with this that would be wonderful, I'm a bit of a beginner and have already spent a few hours on this, all feedback welcome. Thank you very much.
Solution 1
To understand why the hover effect was not working with the animation-fill-mode: forwards, read this answer.
You can fix that by adding !important property to the hover styles:
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
The problem, in this case, is that the transition will not work for hover.
Solution 2
You could remove the animation entirely and add the final state styles to the shift_frame_center_img class.
But you would still need to use the !important property because of the CSS Specificity.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
transform: translateY(20rem);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
transform: none !important;
opacity: .85 !important;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
This snippet removes the need for fill-mode forwards by setting the img to have opacity 1 as its initial state so it will revert to that at the end of the animation.
The animation itself is altered to take 1.5s rather than 1s with the first third simply setting the img opacity to 0 so it can't be seen. This gives the delay effect.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
opacity: 1;
}
/* APPEND-CHILD */
.features-img-wrapper img {
animation: center_img 1.5s 0s none;
}
/* CHILD ON HOVER */
.shift_frame_center_img:hover {
opacity: 1;
transform: translateY(0) scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
33.33% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
Note: as each transform setting will reset anything that isn't included both tranlateY and scale are included in each setting.
Outside the SO snippet system it was possible to leave the animation settings untouched by chaining another animation to the front which ran for 0.5s and just set the img to opacity: 0. This did not work in the snippet system (it got into a loop of flashing on and off) hence the introduction of one but extended animation.
I want my drawer to animate on the way in, and on the way out and when the animation ends, to turn to display: none but when the drawer is closed, it disappears and doesn't animate out.
const Drawer = ({ closeDrawer, isDrawerOpen }) => {
const [isAnimating, setIsAnimating] = useState()
let drawerClassName
if (isDrawerOpen) {
drawerClassName = "drawer-in"
} else if (!isDrawerOpen && isAnimating) {
drawerClassName = "drawer-animating"
} else if (!isDrawerOpen && !isAnimating) {
drawerClassName = "drawer-out"
}
return (
<>
<div
className={`drawer ${drawerClassName}`}
onAnimationStart={() => setIsAnimating(true)}
onAnimationEnd={() => setIsAnimating(false)}
></div>
<div onClick={closeDrawer}></div>
</>
)
}
CSS:
.drawer {
height: 100%;
width: 60%;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
opacity: 1;
z-index: 3;
transform: translateX(100%);
}
.drawer-in {
animation: 0.7s drawerIn;
transform: translateX(0);
display: block;
}
.drawer-animating {
animation: 0.7s drawerOut;
display: block;
}
.drawer-out {
animation: 0.7s drawerOut;
display: none;
}
#keyframes drawerIn {
0% {
transform: translateX(100%);
}
1% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
#keyframes drawerOut {
0% {
transform: translateX(0);
}
99% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
it's because when you set the drawer-out class to the element display: none; is activated immediately and you don't see the animation.
One solution is to run a setTimeout function within your JavaScript to wait for the animation to finish, then change the elements display property to none. This will allow your 'closing animation' to complete before removing the element. See my snippet below for working example.
Basically what's happening in my example snippet is I'm triggering the closing animation by adding a class associated with the animation. Then I'm setting a time out function that waits for the animation to complete (set time out in milliseconds to match your animation time within your CSS). Once the timeout is complete, the animation class is removed and the element's data attribute is set to closed which will trigger the display none. Hope this helps.
const menu = document.querySelector('.menu');
const menuToggle = document.querySelector('.menu_toggle');
menuToggle.checked=false
menuToggle.addEventListener('change',(e)=>{
menuToggle.disabled=true
let menuState = menu.dataset.menuState
if(menuState==='closed'){
menu.dataset.menuState='opened'
setTimeout(() => {
menuToggle.disabled=false
}, 500);
}else{
menu.classList.add('animate_close')
setTimeout(() => {
menu.classList.remove('animate_close')
menu.dataset.menuState='closed'
menuToggle.disabled=false
}, 500);
}
})
body {
background-color: rgb(235, 235, 235);
}
.menu {
background-color: black;
color: white;
width: fit-content;
}
.menu {
transition: all .5s ease-in-out;
}
.menu[data-menu-state="closed"] {
background-color: red;
display: none;
}
.menu[data-menu-state="opened"] {
animation: openMenu .5s ease-in-out;
transform: translateX(100%);
background-color: green;
}
.menu.animate_close{
background-color: rgb(0, 30, 128);
animation: closeMenu .5s ease-in-out;
opacity: 0;
}
#keyframes openMenu {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
#keyframes closeMenu {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
<body>
<label for="menu_toggle">Menu Toggle</label>
<input id="menu_toggle" type="checkbox" class="menu_toggle">
<div class="menu_container">
<div class="menu" data-menu-state="closed">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
<script src="main.js"></script>
</body>
I'm trying to make a simple page load progress bar with CSS and a bit of JS. I already made a working css, but the problem is the bar shows up after page change, when I would like it to firstly finish the css progress bar animation and then load next page.
HTML animation code:
<div class="progress-css"></div>
CSS animation code:
:root {
--progress-duration: 0.8s;
--progress-height: 2.5px;
--progress-color: rgb(35,163,255);
--progress-color-ending: rgba(35,163,255,0.2);
--progress-shadow: 0 0 3px 2px rgba(0,148,255,0.23);
}
.progress-css {
position: fixed;
height: var(--progress-height);
width: 100%;
background-color: transparent;
z-index: 99999;
box-shadow: none;
transition: 0.8s;
animation: progress-load var(--progress-duration);
-webkit-animation: progress-load var(--progress-duration);
animation-timing-function: ease-in-out;
}
#keyframes progress-load {
0% {
background-color: var(--progress-color);
box-shadow: var(--progress-shadow);
width: 0%;
}
20% {
background-color: var(--progress-color);
width: 20%;
}
25% {
background-color: var(--progress-color);
width: 28%;
}
90% {
background-color: var(--progress-color);
width: 85%;
}
100% {
width: 100%;
background-color: var(--progress-color-ending);
box-shadow: none;
}
}
Now, when I will click on a Redirect tag on a website, it will load the specified page, and then it will display progress animation. I would like it to firstly display progress animation, and then load the next page.
I would be grateful for an answer to my question.
JavaScript has an animationend event that can be used to detect when a keyframe animation is complete. Ideally you would wait to add this listener after any required data (if applicable) is completed loading so it doesn't just arbitrarily advance if loading is still in-progress.
document.querySelector('.progress-css').addEventListener('animationend', e=>{
//go to next page or similar
window.location.href = 'subpage.html';
});
Updated example based on more details from the comments:
const progressBar = document.querySelector('.progress-css');
//add a listener to all of the links; modify the query if it should be restricted to specific links
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault(); //stop the default behavior of navigating to a link when clicking an <a> tag
setupLoadingBar( link.href );
});
});
const setupLoadingBar = url => {
const cleanupLoadingBarAndNavigate = e => {
progressBar.removeEventListener('animationend', cleanupLoadingBarAndNavigate); //removing this each time is important to ensure that it doesn't run multiple times if you don't actually navigate away
progressBar.classList.remove('loading');
alert('Navigate to: '+url);
//uncomment this to actually navigate to the url
//window.location.href = url;
}
progressBar.classList.add('loading');
progressBar.addEventListener('animationend', cleanupLoadingBarAndNavigate);
}
:root {
--progress-duration: 4s;
--progress-height: 2.5px;
--progress-color: rgb(35,163,255);
--progress-color-ending: rgba(35,163,255,0.2);
--progress-shadow: 0 0 3px 2px rgba(0,148,255,0.23);
}
.progress-css {
position: fixed;
height: var(--progress-height);
width: 100%;
background-color: transparent;
z-index: 99999;
box-shadow: none;
transition: 0.8s;
display:none;
}
.loading {
display:block;
animation: progress-load var(--progress-duration);
-webkit-animation: progress-load var(--progress-duration);
animation-timing-function: ease-in-out;
}
#keyframes progress-load {
0% {
background-color: var(--progress-color);
box-shadow: var(--progress-shadow);
width: 0%;
}
20% {
background-color: var(--progress-color);
width: 20%;
}
25% {
background-color: var(--progress-color);
width: 28%;
}
90% {
background-color: var(--progress-color);
width: 85%;
}
100% {
width: 100%;
background-color: var(--progress-color-ending);
box-shadow: none;
}
}
About
Contact
<div class="progress-css"></div>
My purpose is to modify my page to load elements by "flying in". I found this JSFiddle example, and I should now make it to happen on page load, without clicking anything. So it triggers on page load.
$(function() {
$("#add-sidebar-module").on("click", function() {
$("<div />", {
'class': "module",
text: "I'm new here."
}).prependTo("#sidebar");
});
$("#add-article").on("click", function() {
$("<div />", {
'class': "module",
html: "<h1>Title</h1><p>text text text.</p>"
}).prependTo("#main");
});
});
I'm also afraid that there is some kind of issues in what comes to the page loading and the animation. Tips and tricks to make sure it's as smooth as possible would be welcome!
http://jsfiddle.net/PJN6r/
<div class="animate-on-load">
This is animated
</div>
$('.animate-on-load').addClass('module');
As per your request.
I would not suggest triggering a click on page load. Just add the class on load.
This is more smooth effect: enter link description here
.module {
-webkit-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-moz-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-o-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-ms-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
}
#-webkit-keyframes flyin {
from {
opacity: 0;
-webkit-transform: scale(1.4);
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
#-moz-keyframes flyin {
from {
opacity: 0;
-moz-transform: scale(1.4);
}
to {
-moz-transform: scale(1);
opacity: 1;
}
}
#-o-keyframes flyin {
from {
opacity: 0;
-o-transform: scale(1.4);
}
to {
-o-transform: scale(1);
opacity: 1;
}
}
#-ms-keyframes flyin {
from {
opacity: 0;
-ms-transform: scale(1.4);
}
to {
-ms-transform: scale(1);
opacity: 1;
}
}
#keyframes flyin {
from {
opacity: 0;
transform: scale(1.4);
}
to {
transform: scale(1);
opacity: 1;
}
}
body {
padding: 50px;
}
.main, .sidebar {
padding: 1em;
}
.main {
float: left;
width: 60%;
}
.sidebar {
float: right;
width: 20%;
}
.module {
border: 0.5em solid #ccc;
background: #eee;
padding: 1.5em;
margin: 0 0 2em 0;
}
h1 {
margin-top: 0;
}
Check out this jQuery plugin. It animates any element you want when the page loads, so that you don't have to click anything.
Here is a demo of it.
To use this plugin, make sure you first include jQuery on any pages that use it, and include the JavaScript file as well.
Then wrap this tag around all elements you want to fly-in.
<div class="runway">
... fly-in elements go here ...
</div
Finally add either fly-in-right or fly-in-left class to the DOM element you wish to animate.
<img class="fly-in-left" src="..." />
And that should do it! When the element if visible on the page, it will animate a 'fly-in'!
Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)
Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.
I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.
Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}