I need to make it so that the event here removes the element after it fades out but how would I do that? I got it so that the element fades out from a grid that I am using but I want it to be removed completely as well.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
You just need to .remove() it, but you'd want the interval to go for 50 more ms so that there's time for the element to be visible at 0.1 opacity, else it might look a bit off:
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (!op){
clearInterval(timer);
event.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
see this article
you can use
elementID.parentNode.removeChild(elementID);
You are catching the event here. Thats means you can get the target. You can use ev.target.remove() to remove it. Hope its work for you.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
event.target.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
Related
Im working on a site where I created a small slide show of images. The images fadeIn and fadeOut okay along with their captions, but sometimes when it reaches the last image it goes full blank white before showing first image again. Also i added two buttons at bottom to navigate the images and they work as well but when I sometimes use them the images flicker in between transitions and the slide show speeds up and it just gets confusing. Please let me know what to change in my JS code.
var imageDisplayer=0;
//*******IMAGE CAPTION FOR SLIDE SHOW
var imageCaption=[
"Test for image 1..",
"Test for image 2.",
"Test for image 3."
];
function slideShow(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
for(var i=0;i<imagePointer.length;i++ )
{
fadeOut( imagePointer[imageDisplayer]);
}
imageDisplayer++;
if (imageDisplayer >= imagePointer.length)
{
imageDisplayer = 0;
}
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
setTimeout(slideShow, 9000);
}
slideShow();
function buttonSlideShowPrevious(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
fadeOut( imagePointer[imageDisplayer]);
imageDisplayer=imageDisplayer-1;
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
// setTimeout(slideShow, 9000);
}
function buttonSlideShowNext(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
fadeOut( imagePointer[imageDisplayer]);
imageDisplayer=imageDisplayer+1;
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
// setTimeout(slideShow, 9000);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
// element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.025;
}, 10);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
// element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.025;
}, 10);
}
The code I wrote, I made it in order for a certain div to fade in when my window.pageYOffset is more than 400 and it works weird. To begin with, it fades in but it flashes until the opacity is set to 1.0 and I don't know how to fix it. Please help me I don't know which is my mistake. Here is the code:
var navBarVisibility = function () {
if (window.pageYOffset > 400) {
var movies = document.getElementById("movies");
var opacity = 0.1;
var apparence = function () {
if (opacity <= 1.0) {
movies.style.opacity = opacity;
} else {
clearInterval(timer2);
clearInterval(timer);
}
opacity += 0.1;
}
var timer = window.setInterval(apparence, 70);
}
}
var timer2 = window.setInterval(navBarVisibility, 1);
Thank you very much.
It acts that way because you do not check if the code has already run, so it keeps firing the same event over and over when you are past 400.
You need to cancel timer2 when the offset is past 400.
So, this is the code I'm using to set my interval which triggers draw() every 0.1s
var intervalTime = 100;
setInterval(draw, intervalTime);
function draw() {
if( i == 1 ) intervalTime = 50;
}
I want to know how I can change that intervalTime to 50 when i becomes 1. The code above doesn't seem to work like that. It stays at an interval time of 0.1s
var intervalTime = 100;
var interval = setInterval(draw, intervalTime);
function draw() {
if( i == 1 ) {
clearInterval(interval);
interval = setInterval(draw, intervalTime);
}
}
Consider we have a simple cycling Javascript process as:
function test() {
el=document.getElementById("test");
var opacity = 1;
var id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
\\ if(mouseout) {clearInterval(id);} How to do this?
if(opacity == 0) {clearInterval(id);}
}, 500);
}
document.getElementById("test").
addEventListener('mouseover', function(){
test();
});
Upon moveover event, the process initiates and continues until reaching the if condition. How we can define another if condition to stop the process by another event.
In the current example, how we can stop the process (reducing the opacity) upon mouseout event.
Declare your id variable outside the function. Then you can call clearInterval(id) from your mouseout handler.
Note that you don't really need the test() function, you can put its contents directly in your mouseover handler:
var id,
el = document.getElementById("test");
el.addEventListener('mouseover', function(){
var opacity = 1;
id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
if(opacity == 0) {clearInterval(id);}
}, 500);
});
el.addEventListener('mouseout', function() {
clearInterval(id);
});
var el = document.getElementById("test"),
opacity = 1,
id;
el.addEventListener('mouseover', function(){
id = setInterval(function() {
opacity = opacity - 0.1;
el.style.opacity= opacity;
if(opacity == 0) {clearInterval(id);}
}, 500);
});
el.addEventListener("mouseout", function() {
clearInterval(id);
});
I am using the following code on a website to imitate smooth scrolling:
function scrollWindow() {
// window.scrollBy(1040,0)
var timerID = setInterval(function() {
window.scrollBy(104, 0);
if( window.pageXOffset >= 1040 ) clearInterval(timerID);
}, 10);
}
However, after clicking Scroll (the scrollWindow function) the page scrolls 1040 like it should.
Any subsequent time, it does not work, unless i manually scroll back to the beginning.
Would i be right in thinking that if( window.pageXOffset >= 1040 ) is canceling it because although it hasn't moved 1040, it is past that point on the page?
If so, how can i solve this?
Yes, your assessment is correct; but it could be corrected with a twist in the approach:
function scrollWindow() {
var scrolledSoFar = 0;
var scrollStep = 104;
var scrollEnd = 1040;
var timerID = setInterval(function() {
window.scrollBy(scrollStep, 0);
scrolledSoFar += scrollStep;
if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
}, 10);
}
Update
Another pitfall in the code is that you are executing scrollBy before checking for the condition. So on your page, even after you have scrolled past 1040, clicking scroll will move the page by one scrollStep amount. To prevent that, this order is better:
function scrollWindow() {
var scrolledSoFar = 0;
var scrollStep = 104;
var scrollEnd = 1040;
var timerID = setInterval(function() {
if( scrolledSoFar < scrollEnd ) {
window.scrollBy(scrollStep, 0);
scrolledSoFar += scrollStep;
} else {
clearInterval(timerID);
}
}, 10);
}