I have a heavy process that requires several seconds to complete.
That's why I've added an animated loading page to make the wait acceptable.
<style>
.modal_gif {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('static/loading.gif')
50% 50%
no-repeat;
background-size: 80%, auto;
}
body.loading .modal_gif {
overflow: hidden;
}
body.loading .modal_gif {
display: block;
}
</style>
<script>
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
</script>
However, the gif weigh about 1MB and it is not displayed after the first request: there is only a semi-transparent veil on the screen.
The second and following requests are working well, which makes me think that it is a gif loading problem.
I'd like the animated loading gif to be always displayed when requested, even for the first request.
Do you know how to preload a gif animated file as hidden and display it even for the first request?
You can try preloading it using a dummy img tag (with visibility hidden, not display none). If we're at it, you can in the first place:
.modal_gif {
visibility: hidden;
display: block;
pointer-events: none;
}
body.loading .modal_gif {
visibility: visible;
overflow: hidden;
}
or even play with opacity 0 or opacity 1, the key here is pointer-events: none; so the image is clickable through.
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
How to stop/start CSS animation
Background-Info
I'm trying to make a loader for my website where when someone makes a search to my API it will popup the loader then after the table gets built it will stop the loading animation. I'm not good with javascript and I'm just trying to create this side project so I don't completely know how this stuff works. I did see another stack overflow post about this topic but it didn't apply to me because the way they called the CSS animation was different
I followed a tutorial for this loader here he shows how to stop it but he doesn't show how to start it, but it doesn't stop for me
What I tried
Like I was saying above I'm not good with javascript so I wasn't sure what i should try but like in the video I tried to make the CSS display = None and also i tried to remove the HTML entirely ( you can see it below in the code)
End goal
My end goal is to have a javascript function like start_loading() and stop_loading() I can call to stop and start the loading at any time
Code
function start_load() {
let spinnerWrapper = document.querySelector('.spinner-wrapper')
console.log(document.querySelector('.spinner-wrapper'))
window.addEventListener('load', function() {
spinnerWrapper.style.display = 'none';
// spinnerWrapper.parentElement.removeChild(spinnerWrapper)
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.spinner-wrapper {
width: 100%;
height: 100%;
/* background-color: #151515; */
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 8rem;
height: 8rem;
border-radius: 50%;
}
.spinner::before,
.spinner:after {
content: "";
position: absolute;
border-radius: 50%;
}
.spinner:before {
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, #212529 0%, white 100%);
animation: spin .5s infinite linear;
}
.spinner:after {
width: 90%;
height: 90%;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
/*Simulate page content*/
.main-content {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/random/4000x4000") center no-repeat;
background-size: cover;
}
<body onload="verifySession(), start_load()">
<div class="spinner-wrapper">
<div class="spinner">
</div>
</div>
const start_load = function () {
document.querySelector('.spinner-wrapper').style.display = "block"
}
const end_load= function () {
document.querySelector('.spinner-wrapper').style.display = "none"
}
You can change .spinner-wrapper by any class you want. Those function will set fisrt html tag have .spinner-wrapper class to display : block or display : none
Hope this help for you
Your question is not very clear on when you want to start and stop the loader but from my understanding you have an api and you want the loader to show when someone calls your api so in this particular case you want to work with DOM event listeners (at least when you start your search by a click of a button or when you press enter on your keyboard) you can read more on event listeners here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and here:
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
As for stopping the event you will want to call the stop function once data are returned from your API
I've created a little codesandbox for you with two buttons to start and stop the loader as a simple example of how to use event listeners which you can find here: https://codesandbox.io/s/happy-rain-e9w3mz
Hi i'm trying to make it so when someone hovers on an image it makes the play button turn up only on that image, I have a few different effects on the image so I've had to make it so that when i hover one class it shows another one with it too using java, only problem is I have 9 images that need to show the play button on hover indivudally but when I hover over 1 image it shows the play icon on all of the images at once,
Is there an easier way to do this so that the play icon only shows when I'm hovering the one specific image?
Javascript:
$(".portbg1").hover( function () {
$(this).addClass("active");
$(".playbutton").addClass("active");
}, function (){
$(this).removeClass("active");
$(".playbutton").removeClass("active");
});
HTML:
<div class="port_item"><div class="playbutton"></div><div
class="portbg1"><div class="port_item_title" data-modal="#modalOne"> .
<h4>Showreel</h4></div></div></div>
There's also portbg2, portbg3, portbg4 etc... portbg9
CSS:
.playbutton {
position: absolute;
background-image: url(IMAGES/openicon.png);
background-size: 80px 80px;
background-repeat: no-repeat;
background-position: center center;
width: 80px;
height: 80px;
left: 50%;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1;
opacity: 0;
overflow: hidden;
transition: all 0.2s;
}
.playbutton:hover {
opacity: 1;
}
.active {
opacity: 1;
}
Just doing :
$(this).siblings('.playbutton').addClass("active");
doing the same on remove class.
So finally would be:
$(this).addClass("active").siblings('.playbutton').addClass("active");
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
I have a list of products and when i click in each product shows a popup but this popup shows in top of the page and the opacity is not in all screen.
My popup:
$('.image-sample').click(function(data)
{
var image = $(this).attr('data-image');
$.get("/sample-image/"+ image, function(data)
{
$(".popup").html('');
$(".popup").append(data);
$('.opacity').show();
$('.popup').show();
closeNews();
});
});
.popup
{
position: absolute;
width: 100%;
height: 100%;
display: none;
z-index: 1000 !important;
overflow: hidden;
}
.opacity
{
position: absolute;
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 998;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<div class="opacity"></div>
It allow scroll when popup shows and shouldn't.
What i want is center the popup in screen and have the opacity in all screen.
What is my problem?
Thank you
Opacity animation issue: if you use display:none in css animation with opacity wouldnt work so i advice use in jquery not the $('.popup').show(); but fadeIn and fadeOut - $('.opacity').fadeIn(300);
Use position: fixed; not the absolute for the popup blocks (.popup, .overflow);
The scrolling you can hide toggling with jquery to the body class or style which hides overflow and setting max-height:100%;