In my web site I need to pop up a dummy 'loading' spinning wheel when click a button and vanish after some time. It's just a dummy page. I would be much obliged if anyone can explain how to do such a thing. Can I do this with javascript or jQuery?
Thanx in advance
Have a div/image in the right place you need, hide it first time the page loaded. like
<input type="button" id="button"/>
<div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>
and in your jquery, set a handler for the click event of button to show or hide the div
$(document).ready(function(){
$('#button').click(function(){
$('#load').show();
setTimeout(function() {$('#load').hide()}, 2000);
});
});
setTimout can be used to hide the div after some time.
check the workign example here
you can do it by ajax or simply jquery.
here is the ajax way
$.ajax({
type: "POST",
data: serializedDataofthisform,
dataType: "html", /* or json */
url: "your url",
/* ajax magic here */
beforeSend: function() {
$('#loaderImg').show(); /*showing a div with spinning image */
},
/* after success */
success: function(response) {
/* simply hide the image */
$('#loaderImg').hide();
/* your code here */
}
});
html
<div id="loaderImg"><img src="path" alt=""/></div>
Javascript
by time out function :- setTimeout()
Here's another example that doesn't use an image.
// Author: Jared Goodwin
// showLoading() - Display loading wheel.
// removeLoading() - Remove loading wheel.
// Requires ECMAScript 6 (any modern browser).
function showLoading() {
if (document.getElementById("divLoadingFrame") != null) {
return;
}
var style = document.createElement("style");
style.id = "styleLoadingWindow";
style.innerHTML = `
.loading-frame {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 4;
}
.loading-track {
height: 50px;
display: inline-block;
position: absolute;
top: calc(50% - 50px);
left: 50%;
}
.loading-dot {
height: 5px;
width: 5px;
background-color: white;
border-radius: 100%;
opacity: 0;
}
.loading-dot-animated {
animation-name: loading-dot-animated;
animation-direction: alternate;
animation-duration: .75s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes loading-dot-animated {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`
document.body.appendChild(style);
var frame = document.createElement("div");
frame.id = "divLoadingFrame";
frame.classList.add("loading-frame");
for (var i = 0; i < 10; i++) {
var track = document.createElement("div");
track.classList.add("loading-track");
var dot = document.createElement("div");
dot.classList.add("loading-dot");
track.style.transform = "rotate(" + String(i * 36) + "deg)";
track.appendChild(dot);
frame.appendChild(track);
}
document.body.appendChild(frame);
var wait = 0;
var dots = document.getElementsByClassName("loading-dot");
for (var i = 0; i < dots.length; i++) {
window.setTimeout(function(dot) {
dot.classList.add("loading-dot-animated");
}, wait, dots[i]);
wait += 150;
}
};
function removeLoading() {
document.body.removeChild(document.getElementById("divLoadingFrame"));
document.body.removeChild(document.getElementById("styleLoadingWindow"));
};
document.addEventListener('keydown', function(e) {
if (e.keyCode === 27) {
removeLoading();
}
}, false);
<html>
<button onclick="showLoading()">Click me</button>
<p>Press Escape to stop animation.</p>
</html>
Related
How can I change the animation duration onclick? This is what I've done, I created two buttons, one with an animationduration of 10s while the other has an animationduration of 20s. The duration regardless of which button I click is the same, 10 seconds, as it is in the class section. How can I get depending on the button I click two different durations? Please use normal Javascript, no Jquery. Thank you! I also need to use the document.GetElementById().classname =""; as it is in the code.
function tenseconds() {
animation();
var sd = document.getElementById('ghost').className = 'earth';
sd.style.animationDuration = "10s";
}
function twentyseconds() {
animation();
var sd = document.getElementById('ghost').className = 'earth';
sd.style.animationDuration = "20s";
}
function animation() {
document.getElementById('ghost').className = 'earth';
}
<!DOCTYPE html>
<html>
<head>
<style>
.earth {
position: relative;
animation: move 10s linear;
background: red;
height: 20px;
width: 20px;
}
#-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}
}
</style>
</head>
<body>
<div id="ghost"> </div>
<button onclick="tenseconds();">10 seconds </button>
<button onclick="twentyseconds()"> 20 seconds </button>
</body>
</html>
Updated to use an animation, data attributes etc. Customize as needed. NOT supported in Edge, IE perhaps others. Leave to you to investigate possible ways to fix that. Review OLD edit for the original "fix"
I added another element and button so you could see how it might be used.
var myAnimation = {
keyframes: [
// keyframes
{
transform: 'translateX(0px)'
},
{
transform: 'translateX(300px)'
}
],
options: {
// timing options
// ms of duration default 1 second
duration: 1000,
iterations: 1, //forever would be Infinity
easing: "linear"
}
};
function animation(target, duration, visual) {
let sd = document.getElementById(target);
sd.className = visual;
myAnimation.options.duration = duration * 1000;
sd.animate(myAnimation.keyframes, myAnimation.options,visual);
}
function setup() {
let classThings = document.getElementsByClassName("animate-button");
let myFunction = function() {
let duration = this.dataset.duration;
let visual = this.dataset.visual;
let target = this.dataset.target;
animation(target, duration, visual);
};
for (var i = 0; i < classThings.length; i++) {
classThings[i].addEventListener('click', myFunction, false);
}
}
(function() {
setup();
})();
<!DOCTYPE html>
<html>
<head>
<style>
.fire {
position: relative;
background: red;
height: 20px;
width: 20px;
}
.water {
position: relative;
background: blue;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="ghost"></div>
<div id="billy"></div>
<button class="animate-button" data-duration="10" data-target="ghost" data-visual="fire">10 seconds</button>
<button class="animate-button" data-duration="20" data-target="ghost" data-visual="fire">20 seconds</button>
<button class="animate-button" data-duration="5" data-target="billy" data-visual="water">5 seconds billy</button>
</body>
</html>
I created a little function that takes the animation time in seconds as an argument. Read the comments in the code for explanation.
function animation(duration) {
// select whatever element you are trying to animate
let target = document.getElementById('ghost');
// change the animationduration before starting to animate
target.style.animationDuration = `${duration}s`;
// add the animating class and start the animation
target.classList.add('animating');
// create a timeout to remove the animating class from your animated element
setTimeout(() => {
target.classList.remove('animating');
}, `${duration*1000}`);
}
#ghost{
position: relative;
background: red;
height: 20px;
width: 20px;
}
.animating {
animation: move 10s linear;
}
#-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}
}
<!DOCTYPE html>
<div id="ghost"> </div>
<button onclick="animation(10);">10 seconds </button>
<button onclick="animation(20);"> 20 seconds </button>
I'm using the following code to fadein/fadeout images every second which works fine but I would like to fade the images in and out every 1/2 second. I can change the setInterval to 500 but this simply causes a bit of a mess. I clearly need to redfine fadein and fadeout.
I have bootstrap loaded so I'm guessing the functions are defined within the bootstrap js but how do I respecify their timing?
var $els = $('div[id^=image]'),
i = 0,
len = $els.length;
var start = 1;
var end = 999999999999999;
jQuery(function () {
$els.slice(1).hide();
spin = setInterval(function () {
$els.eq(i).fadeOut(function () {
i = Math.floor(Math.random() * len);
$els.eq(i).fadeIn();
});
start = new Date().getTime();
if (start > end) {
clearInterval(spin);
}
}, 1000);
{% for m in myusers %}
if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';}
{% endfor %}
});
Since you are using jQuery, why not use fadeOut/fadeIn or fadeToggle?
$(document).ready(function() {
setInterval(function() {
$('.a1, .a2').stop().fadeToggle(500);
}, 500);
});
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 1px;
display: inline-block;
}
.a1,
.a2 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: blue;
}
.a2 {
display: none;
background-color: red;
}
.wrapper2 .a1 {
display: none;
}
.wrapper2 .a2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="wrapper wrapper2">
<div class="a1"></div>
<div class="a2"></div>
</div>
var box = document.getElementById('box');
function fadeOutIn(elem, speed ) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
} // end if
}, speed/50 );
} // end fadeOut()
fadeOutIn(box, 2000 );
Hello please see my solution . It is your helpful or not.
Thanks.
I want to make fractal tree and if i press left click i suppossed to be add new div and if i press right click it supposed to be decrease div, but the left click function didn't work, its supposed to be recursive but it just add one div and if i press left click again nothing happen and the right click also didn't work, all of the div disappear. this is my code
<head>
<style type="text/css">
div {
position: absolute;
background-color: #e21d27;
opacity: 0.8;
transition: 2s;
}
div#start {
width: 100px;
height: 100px;
transform: translate(300%, 300%);
}
div div {
width: 100%;
height: 100%;
}
div div:nth-child(1) {
transform: translate(-42%, -105%) rotate(-37deg) scale(0.8, 0.8);
}
div div:nth-child(2) {
transform: translate(55%, -91%) rotate(53deg) scale(0.6, 0.6) ;
}
div:hover {
transition: 1s;
opacity: 1;
}
</style>
</head>
<body>
<div id="start"></div>
<script>
var coba =27;
var leftClick = document.getElementById("start");
var rightClick = document.getElementById("start");
leftClick.onclick = function(){
for ( var i = 0; i< coba; i++ ) {
var di = document.createElement('div');
leftClick.appendChild(di);
}
}
rightClick.oncontextmenu = function(){
for ( var i = 0; i< coba; i++ ) {
var removedi = document.getElementById("start");;
removedi.parentNode.removeChild(removedi);
}
}
</script>
</body>
thank you so much for your help
Your rightclick function is removing the whole "start" div. removedi is set to that div and then you are calling removeChild on its parent, causing it to be removed. That's probably why everything is getting removed when you right click. Instead, you should remove child nodes of the start div.
You probably want something like:
var start = document.getElementById('start');
for (var i = 0; i < start.childNodes.length; i++) {
var child = start.childNodes[i];
start.removeChild(child);
}
I'm not sure why your left-click handler is not doing what you want.
I have created the following code that on page load adds opacity: 1 to all divs on the page. In doing so all the images are seen on pageload, but I want each to fade in slowly and after one has completely loaded/is visible I want the 2nd image to load exactly the same then followed by the third.
How can I accomplish this via the code below; what needs to be changed/added? Please note it must use pure Javascript; no CSS3 or jQuery as the proprietary framework I'm working in requires pure JS.
var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');
function fadeIn() {
imageOne.style.opacity = '1';
imageTwo.style.opacity = '1';
imageThr.style.opacity = '1';
}
#imageOne {
background: url('https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg');
background-repeat: no-repeat;
width: 50px;
height: 50px;
margin-right: 20px;
float: left;
opacity: 0;
}
#imageTwo {
background: url('http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png');
background-repeat: no-repeat;
width: 50px;
height: 50px;
margin-right: 20px;
float: left;
opacity: 0;
}
#imageThr {
background: url('http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png');
background-repeat: no-repeat;
width: 50px;
height: 50px;
float: left;
opacity: 0;
}
<body onload="fadeIn()">
<div id="wrapper">
<div id="imageOne"></div>
<div id="imageTwo"></div>
<div id="imageThr"></div>
</div>
</body>
You can use CSS transitions, which is faster and won't require jQuery.
.fadeIn {
transition: opacity 1.25s;
}
Add the class fadeIn to your image elements, and now it'll fade.
To make it fade one after the other, use JavaScript timers to space out setting opacity to 1. Example:
var elements = [ /* Image elements to fade */ ];
for (var i = 0; i < elements.length; i++) {
setTimeout(function() {
elements[i].style.opacity = 1;
}, 1250 * i);
}
You can use callback function of fadeIn to load other image
function fadeIn() {
$("#imageOne").fadeIn("fast",function(){
$("#imageTwo").fadeIn("fast", function(){
$("#imageThr").fadeIn("fast");
});
});
}
This is what I came up with so far. Unfortunately, I haven't figure how to have them fade in, as the below just makes them appear one after the other. Though it's pure Javascript.
Any suggestions?
var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');
function fadeIn(element) {
element.style.opacity += 0.9;
if (element.style.opacity < 1) {
setTimeout(function() {
fadeIn(element);
}, 100);
}
}
setTimeout(function() {
fadeIn(document.getElementById("imageOne"));
}, 1000);
setTimeout(function() {
fadeIn(document.getElementById("imageTwo"));
}, 5000);
setTimeout(function() {
fadeIn(document.getElementById("imageThr"));
}, 10000);
So, I've got this -webkit-animation rule:
#-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
And some CSS defining some of the animation rules on my box:
#box{
-webkit-animation-duration: .02s;
-webkit-animation-iteration-count: 10;
-webkit-animation-timing-function: linear;
}
I can shake the #box like this:
document.getElementById("box").style.webkitAnimationName = "shake";
But I can't shake it again later.
This only shakes the box once:
someElem.onclick = function(){
document.getElementById("box").style.webkitAnimationName = "shake";
}
How can I re-trigger a CSS animation via JavaScript without using timeouts or multiple animations?
I found the answer based on the source code and examples at the CSS3 transition tests github page.
Basically, CSS animations have an animationEnd event that is fired when the animation completes.
For webkit browsers this event is named “webkitAnimationEnd”. So, in order to reset an animation after it has been called you need to add an event-listener to the element for the animationEnd event.
In plain vanilla javascript:
var element = document.getElementById('box');
element.addEventListener('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
}, false);
document.getElementById('button').onclick = function(){
element.style.webkitAnimationName = 'shake';
// you'll probably want to preventDefault here.
};
and with jQuery:
var $element = $('#box').bind('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
});
$('#button').click(function(){
$element.css('webkitAnimationName', 'shake');
// you'll probably want to preventDefault here.
});
The source code for CSS3 transition tests (mentioned above) has the following support object which may be helpful for cross-browser CSS transitions, transforms, and animations.
Here is the support code (re-formatted):
var css3AnimationSupport = (function(){
var div = document.createElement('div'),
divStyle = div.style,
// you'll probably be better off using a `switch` instead of theses ternary ops
support = {
transition:
divStyle.MozTransition === ''? {name: 'MozTransition' , end: 'transitionend'} :
// Will ms add a prefix to the transitionend event?
(divStyle.MsTransition === ''? {name: 'MsTransition' , end: 'msTransitionend'} :
(divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
(divStyle.OTransition === ''? {name: 'OTransition' , end: 'oTransitionEnd'} :
(divStyle.transition === ''? {name: 'transition' , end: 'transitionend'} :
false)))),
transform:
divStyle.MozTransform === '' ? 'MozTransform' :
(divStyle.MsTransform === '' ? 'MsTransform' :
(divStyle.WebkitTransform === '' ? 'WebkitTransform' :
(divStyle.OTransform === '' ? 'OTransform' :
(divStyle.transform === '' ? 'transform' :
false))))
//, animation: ...
};
support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();
return support;
}());
I have not added the code to detect “animation” properties for each browser. I’ve made this answer “community wiki” and leave that to you. :-)
You have to first remove the animation, then add it again. Eg:
document.getElementById("box").style.webkitAnimationName = "";
setTimeout(function ()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}, 0);
To do this without setTimeout remove the animation during onmousedown, and add it during onclick:
someElem.onmousedown = function()
{
document.getElementById("box").style.webkitAnimationName = "";
}
someElem.onclick = function()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}
Following the suggestion from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips, remove and then add the animation class, using requestAnimationFrame to ensure that the rendering engine processes both changes. I think this is cleaner than using setTimeout, and handles replaying an animation before the previous play has completed.
$('#shake-the-box').click(function(){
$('#box').removeClass("trigger");
window.requestAnimationFrame(function(time) {
window.requestAnimationFrame(function(time) {
$('#box').addClass("trigger");
});
});
});
http://jsfiddle.net/gcmwyr14/5/
A simple but effective alternative:
HTML:
<div id="box"></div>
<button id="shake-the-box">Shake it!</button>
css:
#box{
background: blue;
margin:30px;
height:50px;
width:50px;
position:relative;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}
#box.trigger{
display:table;
}
#-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
#-moz-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
jQuery:
$('#shake-the-box').click(function(){
$('#box').toggleClass('trigger');
});
Demo:
http://jsfiddle.net/5832R/2/
Issues:
I don't know if it works on Firefox, because the animation doesn't seem to work there...
Clone works pretty good on paused Karaoke:
On IE11 had to force a reflow (R. Krupiński's shorter version).
$('#lyrics').text("Why does it hurt when I pee?");
changeLyrics('3s');
function changeLyrics(sec) {
str = 'lyrics '+ sec + ' linear 1';
$('#lyrics').css( 'animation', str);
$('#lyrics').css( 'animation-play-state', 'running' );
$('#lyrics').replaceWith($('#lyrics').clone(true));
}
or you can use the following:
function resetAnimation(elm) {
$('#'+elm).replaceWith($('#'+elm).clone(true));
}
Reset the value first. Use reflow to apply the change without using timeout:
function shake() {
var box = document.getElementById("box");
box.style.animationName = null;
box.offsetHeight; /* trigger reflow */
box.style.animationName = "shake";
}
#keyframes shake {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#box {
position: absolute;
width: 75px; height: 75px;
background-color: black;
animation-duration: .02s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
button {
position: absolute;
top: 100px;
}
<div id="box"></div>
<button onclick="shake()">Shake</button>
In contrast to the accepted answer that recommends animationEnd, this method resets the animation even when it's still in progress. This might be or might be not what you want.
An alternative would be to create a duplicate #keyframes animation and switch between the two:
function shake() {
var box = document.getElementById("box");
if (box.style.animationName === "shake")
box.style.animationName = "shake2";
else
box.style.animationName = "shake";
}
#keyframes shake {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#keyframes shake2 {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#box {
position: absolute;
width: 75px; height: 75px;
background-color: black;
animation-duration: .02s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
button {
position: absolute;
top: 100px;
}
<div id="box"></div>
<button onclick="shake()">Shake</button>
Is there an issue with using setTimeout() to remove the class and then read it 5ms later?
svg.classList.remove('animate');
setTimeout(function() {
svg.classList.add('animate');
}, 10);
With your javascript, you could also add (and then remove) a CSS class in which the animation is declared. See what I mean ?
#cart p.anim {
animation: demo 1s 1; // Fire once the "demo" animation which last 1s
}
1) Add animation name to the #box.trigger in css
#box.trigger{
display:table;
animation:shake .2s 0 linear 1;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}
2) In java-script you cannot remove the class trigger.
3) Remove the the class name by using setTimeOut method.
$(document).ready(function(){
$('#shake-the-box').click(function(){
$('#box').addClass('trigger');
setTimeout(function(){
$("#box").removeClass("trigger")},500)
});
});
4) Here is the DEMO.