I am wordpress user and I have a website. Its' bounce rate is high so I want a loader that will show a div onclick button after specific time period finish.
Note: when the time period will start it must show a loader in circle to user but the time period should be completed in background. User should not see seconds stuff like that only see a loader.
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById('content').style.display='block';
} else {
width++;
elem.style.width = width + '%';
}
}
}
#myProgress {
width: 110%;
float:center;
background-color: #ddd;
}
#myBar {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
#content{
display:none;
}
#button{padding:1em;
margin:auto;}
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Download Movie</button>
<div id="conten"><br>
<p>hello loader is successful</p>
</div>
<script src="build/app.js?v=4" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114581422-1"></script>
Inside your function frame(), you are setting the DOM element with ID content to be visible document.getElementById('content').style.display='block'; and also in the CSS as #content.
But in the HTML, you have defined the ID of the div tag to be conten instead of content... (you missed the ending t in the html).
Edit: You have mentioned that you need a circular loader animation instead of the progress bar. Just replace the progress bar with a loader. You could create a simple circular loader using just html and CSS. When the progress is not yet 100%, display the loading animation. On completion, just hide it.
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById('loader').style.display = 'none';
document.getElementById('content').style.display = 'block';
} else {
width++;
document.getElementById('loader').style.display = 'block';
}
}
}
#myProgress {
width: 110%;
float: center;
background-color: #ddd;
}
#myBar {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
#content {
display: none;
}
#button {
padding: 1em;
margin: auto;
}
.loader {
border: 8px solid #000000; /* black */
border-top: 8px solid #ffffff; /* white */
border-radius: 50%;
width: 45px;
height: 45px;
animation: spin 2s linear infinite;
display: none;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader" id="loader">
</div>
<br>
<button onclick="move()">Download Movie</button>
<div id="content"><br>
<p>hello loader is successful</p>
</div>
<script src="build/app.js?v=4" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114581422-1"></script>
Related
THE WHOLE CODE IN JSFIDDLE
I have been struggling to effectively remove the code and css created in the function Seifenblasen_blasen()
function Seifenblasen_blasen(){
btn1.style.display = 'none';
document.getElementById("text").innerHTML="Bubble"
const section = document.querySelector('section')
const createElement = document.createElement('spawn')
var size = Math.random() * 60;
createElement.style.width = 30 + size + 'px';
createElement.style.height = 30 + size + 'px';
createElement.style.left = Math.random() * innerWidth + "px";
section.appendChild(createElement);
setTimeout(() => {
createElement.remove()
},8000)
}
const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
created CSS:
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section.text{
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
background-color:#1F69FA;
pointer-events: none;
border: none;
}
section spawn {
position: absolute;
bottom: -80px;
background: transparent;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
section spawn:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.25) translate(-70%, -70%);
background: radial-gradient(#fff, transparent);
opacity: 0.6;
border-radius: 50%;
}
#keyframes animate {
0% {
transform: translateY(0%);
opacity: 1;
}
99% {
opacity: 1;
}
100% {
transform: translateY(-2000%);
opacity: 0;
}
section span {
margin-top: 700px;
font-size: 1em;
color: #333;
margin: 0 auto;
font-family: consolas;
background-color: #1F69FA;
border: none;
position: absolute;
}
HTML:
<section id="section">
<div class="content">
<button id="btn"></button>
<button id="btn1"></button>
</div>
</section>
to then execute the next function function next(). This removal is needed because when I don't remove the elements from the first function the second wont work. I could just do document.head.innerHTML = "" but that would then also remove the css needed for the button appearing in the next function. So then I tried to make variables with const
const btn = document.getElementById('text');
const btn1 = document.getElementById('text1');
const section = document.querySelector('section')
// in function Seifenblasen_blasen()
btn1.style.display = 'none';
// in function next()
section.style.display = 'none';
btn.style.display = 'none';
btn1.style.display = 'block';
to hide and show only parts of the css without removing the css entirely to keep the styling intact, but now nothing works anymore.(the button on the next Screen doesn't show up at all and the first button does not contain any styling) My endgoal is that I can essentially switch between two screens one showing the bubbles and one the bouncy balls and when I click on the button it goes on. (for example start is bubbles. I click -> Bounce, click again -> back to Bubbles and so on)
I am creating a little game that should be like a 2d version of "guitar hero" (if you don't know what "guitar hero" is don't worry, it was just to give context). I have a red square creator function called squareCreator that adds each new square created a CSS class of .newMostLeftNote. Afterward, I want each one of those squares to fall down (like gravity) using the function fallingMostLeftNote. The problem is that the margin-top that function adds to the square generated by the squareCreator adds to every single square at the same time (even before the square is created), so a square could be created when the .newMostLeftNote CSS class has a margin-top of 700 and it appears way at the bottom.
How can I make it so that every square that falls, but starts falling after they appear?
Notice that in this image, every margin-top CSS property for every new generated square is exactly the same.
var mostLeftNoteMarginTop = 0;
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
$(".newMostLeftNote").css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
proc = setInterval(fallingMostLeftNote, 5);
.newMostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 400px;
position: absolute;
}
.mostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 300px;
position: absolute;
}
.middleNote {
height: 100px;
width: 100px;
background-color: blue;
margin-left: 600px;
position: absolute;
}
.mostRightNote {
height: 100px;
width: 100px;
background-color: green;
margin-left: 900px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Score: 0</h1>
<div class="middleNote"></div>
<div class="mostLeftNote"></div>
<div class="mostRightNote"></div>
<div class="scoreLineTop"></div>
<div class="scoreLineButtom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
Update
var squareQuantity = [];
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
squareQuantity.push(this.newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
squareQuantity[2].css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
Instead of using javascript to update your margin-top, you could use CSS animations. Each new square will animate independently.
Here's an example for your use case:
function addSquare() {
var squaresElement = document.getElementById("squares");
var squareElement = document.createElement("div");
squareElement.className = "square";
squaresElement.append(squareElement);
}
#squares {
display: flex;
}
.square {
height: 100px;
width: 100px;
margin-right: 10px;
background-color: red;
animation-name: fall;
animation-duration: 4s;
animation-timing-function: linear;
}
/* The animation code */
#keyframes fall {
from {margin-top: 0px;}
to {margin-top: 300px;}
}
<button onclick="addSquare()">Add square</button>
<div id="squares"></div>
My approach is giving a css variable while creating divs for transform delay. If you need more complex movements, you can use the same logic for animation instead of transform.
<div class="parent"></div>
.parent {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.lets-try {
flex: 1;
background: #000;
height: 60px;
margin-right: 5px;
margin-left: 5px;
transition: all 0.5s ease-in-out var(--delay);
}
.lets-try.is-falling {
margin-top: 100px;
}
let parent = document.querySelector(".parent");
let numOfSquares = 12;
for (let i = 0; i < numOfSquares ; i++) {
let delay = i * 0.2;
let div = document.createElement('div');
div.setAttribute('class', 'lets-try');
div.setAttribute('style', `--delay:${delay}s`);
parent.appendChild(div);
}
setTimeout(() => {
let items = document.querySelectorAll(".lets-try");
[...items].forEach(item => {
item.classList.add("is-falling")
})
}, 1)
Hey I have an inline javascript code that adds a class to an element and makes it slide up in the screen. But it suddenly stopped working and I don't know why. Here's the HTMl and JS:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".converter").addClass("atcbottomactive");
} else {
$(".converter").removeClass("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: #eeeeee;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: green; height: 1500px; width: 100%;"></div>
<div class="converter"><div class="ccontent">...</div></div>
Here's the link
Thanks in advance :)
In fact, trying to use it without including JQuery gives you the error. You can solve this easily with "JavaScript" without using jQuery.
var element = document.querySelector(".converter");
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
padding: 20px 20px 200%;
background: blue;
color: white;
}
.converter.atcbottomactive {
background: green;
}
<div class="converter">
<div class="ccontent">Scroll me: 400px</div>
</div>
I want to add a fade in / fade out effect to a hidden block (id = "help"). How can I animate a block using pure css? Also, I want to animate the link (id = "show) after clicking. Please help and give me some examples.
See my code:
var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");
var helpDiv = document.getElementById("help");
helpDiv.style.display = 'none';
hideElem.style.visibility = 'hidden';
showElem.onclick = function() {
showElem.style.visibility = 'hidden';
hideElem.style.visibility = 'visible';
helpDiv.style.display = 'block';
};
hideElem .onclick = function() {
hideElem.style.visibility = 'hidden';
showElem.style.visibility = 'visible';
helpDiv.style.display = 'none';
};
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
SHOW
HIDE
<div id="help"></div>
</body>
</html>
Try This:
$(document).ready(function(){
$("#show").click(function(){
$('.help').addClass('sh');
$(this).css('opacity',0)
$("#hide").css('opacity',1)
})
$("#hide").click(function(){
$('.help').removeClass('sh');
$(this).css('opacity',0)
$("#show").css('opacity',1)
})
})
#hide, #show, .help {
transition: all 1s;
}
.help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
opacity: 0;
}
#hide {
opacity: 0;
}
.sh {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
SHOW
HIDE
<div class="help" class="sh"></div>
In case you're using jQuery:
jsfiddle: https://jsfiddle.net/0j9qbj7p/4/
HTML
SHOW
HIDE
<div id="help">Text here</div>
CSS
#hide, #help{
display: none;
}
#help{
background-color: blue;
height: 400px;
}
jQuery
$showElem = $('#show');
$hideElem = $('#hide');
$helpElem = $('#help');
$showElem.click(function(){
$helpElem.slideDown();
$hideElem.show();
});
$hideElem.click(function(){
$helpElem.slideUp();
$hideElem.hide();
});
In order to use animations with pure CSS, you have to use '#keyframes' to control the opacity ( in order to simulate fade in / fade out effect) of the box.
Just add this to the top of the CSS file:
#keyframes FadeAnimation {
from{
opacity:0;
}
to {
opacity:1;
}
}
But afterwards, you also have to show what item you want to animate by adding this line to your code:
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
background:grey /* it is important to give a background color*/
animation-name: FadeAnimation; /* the name of the keyframes */
animation-duration:0.5s /* the duration time */
animation-iteration-count:1; /* how many time to repeat */
}
You can do the same with the words in the box.
I have 2 DIVs in a flexbox container, where they both start of side by side. By removing one of the divs, the other one becomes centered within the container.
I cant seem to find a way of making an animated transition from centered/uncentered. Is there any way of doing this?
HTML:
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>
CSS:
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
JS:
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
$('#a').fadeOut(500);
}
else
{
$('#a').fadeIn(500);
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
$('#b').fadeOut(500);
}
else
{
$('#b').fadeIn(500);
}
displayed[1] = !displayed[1];
}
}
Here is a jsfiddle for what I have so far:
https://jsfiddle.net/uvyLh8m9/6/
The reason for this is that your function fadeIn first make decrease opacity without letting disappear the block, and only then, lets it disappear.
I would do it this way : which means, letting fade out manually and during the same time decreasing the width. Optionally you could call Element.style.display = 'none'; after 500ms using setTimeout(function(){/*code here*/}, 500);
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
//$('#a').fadeOut(500);
document.getElementById('a').style.opacity = 0;
document.getElementById('a').style.width = '0px';
}
else
{
//$('#a').fadeIn(500);
document.getElementById('a').style.opacity = 1;
document.getElementById('a').style.width = '200px';
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
//$('#b').fadeOut(500);
document.getElementById('b').style.opacity = 0;
document.getElementById('b').style.width = '0px';
}
else
{
//$('#b').fadeIn(500);
document.getElementById('b').style.opacity = 1;
document.getElementById('b').style.width = '200px';
}
displayed[1] = !displayed[1];
}
}
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a, #b {
-webkit-transition:opacity 500ms, width 500ms;
-moz-transition:opacity 500ms, width 500ms;
transition:opacity 500ms, width 500ms;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>