Develop Reference

Having an issue with my setInterval method whenever I return to the window

I am using a setInterval method to create a banner slideshow for a current website project.
The banner seems to work fine. The jquery transition seems smooth enough, but what I am finding is that when I go to another window tab and then return to the website window after a few minutes, the slideshow kind of breaks its flow, and starts fadingout when it is not supposed to, images begin loading before the fadeout is complete etc.
Is this a browser issue? Or is is it to do with the fact I am using the delay method? Or something else I can not spot?
My code is below. Many thanks for taking the time to respond.
HTML:
<section id="banner">
<div class="row">
<div class="col-md-12">
<img src="banner1.jpeg" class="img-responsive center-block banner-img">
</div>
</div>
</section>
JAVASCRIPT / JQUERY:
$(document).ready(function(){
var bannerImages = [
"banner1.jpeg",
"banner2.jpg",
"banner3.png"
];
var currentImage = 0;
$(".banner-img").fadeIn(500).delay(5000).fadeOut();
// CHANGE THE BANNER IMAGE EVERY FEW SECONDS
setInterval(function(){
if (currentImage > bannerImages.length-1){
currentImage = 0;
}
$(".banner-img").fadeIn().attr("src",bannerImages[currentImage]).delay(5000).fadeOut();
currentImage++;
}, 6000)
})

Try fading out the image inside of the setInterval function then fading in the new image instead of setting a delay on the fade out.

This may or may not be your problem, but you should declare var currentImage as it's currently in the global scope and not being garbage collected, so that running in the background every 5 seconds could be causing you problems. EDIT: looks like you fixed that so nevermind :)
Try this: https://jsfiddle.net/7Ljt5f1x/
(Use the setinteral to fade out the previous image, then fade in the new image on complete)
$(document).ready(function(){
var bannerImages = [
"banner1.jpeg",
"banner2.jpeg",
"banner3.jpeg"
];
var currentImage = 0;
var $bannerimg = $(".banner-img");
$bannerimg.fadeIn(500);
// CHANGE THE BANNER IMAGE EVERY FEW SECONDS
setInterval(function(){
if (currentImage > bannerImages.length-1){
currentImage = 0;
}
$bannerimg.fadeOut("fast", function(){
$bannerimg.fadeIn(500).attr("src",bannerImages[currentImage]);
currentImage++;
});
}, 6000);
});

Fade In / Fade Out background images without white background

I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
Here's my HTML code:
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html

AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
Thus having the structure ready which is the following:
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
Here is the implementation: http://jsbin.com/wisofeqetu/1/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>

If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
Now some JQuery. To appear first image when window load write this:
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.

You may also use jQuery plugin backstretch.

Appearing/disappearing caption every 5 seconds in jQuery

For a very specific project, I need my image captions to appear AND Disappear every X seconds. I managed to make them appear and disappear once, but I need to to "loop". Here's my code :
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="400" height="600">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>
Jquery :
document.createElement('figure');
document.createElement('figcaption');
window.setInterval(function(){$(document).ready(function(){
$('figcaption').css('top','600px');
$('figure')(function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
});
}, 500);
How can I do it ?
Thanks (a lot) in advance !

Try this:
setInterval(function () {
$('figcaption').fadeToggle();
}, 5000);
Fiddle
EDIT
Updated the fiddle to match your markup.

You certainly want to do something like that:
$(document).ready(function() {
var figcaption = $('figcaption');
setInterval(function() {
figcaption.hide().delay(5000).show();
}, 10000);
});​
or:
document.createElement('figure');
document.createElement('figcaption');
$(document).ready(function() {
var figcaption = $('figcaption');
figcaption.css('top', '600px');
window.setInterval(function() {
figcaption
.animate({'top':'600px'}, 2000)
.delay(3000)
.animate({'top':'540px'}, 2000)
;
}, 10000);
});

window.setInterval(function() {
$('figcaption').slideToggle();
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="50" height="50">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>

In your current code, you attach a new method to the document load event every half second. Instead, initialize the interval only once on document load:
$(document).ready(function(){
window.setInterval(function(){
$('figcaption').css('top','600px');
// This call below seems a bit weird. Not sure what you try to accomplish
$('figure')(
function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},
function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
}, 500);
});
I'm not to sure about the code inside that function, but without more context I find it a bit hard to judge whether that will work or not.
Instead of hiding it completely through JavaScript, you can define a transition in CSS as well. You can call toggleClass to add and remove a CSS class to the element, or you can even define an infinite animation in CSS itself. This technique is asked for and demonstrated in this answer.

This is the function can do more than you expected:
function blink(elem, times, speed) {
if (times > 0 || times < 0) {
if ($(elem).hasClass("blink")) $(elem).removeClass("blink");
else $(elem).addClass("blink");
}
clearTimeout(function () {
blink(elem, times, speed);
});
if (times > 0 || times < 0) {
setTimeout(function () {
blink(elem, times, speed);
}, speed);
times -= .5;
}
}
And you can use it as:
$(document).ready(function () {
blink(".test", 4, 500);
});
See complete JSFiddle in: http://jsfiddle.net/jadendreamer/Nx4qS/
Hope this help.
Edit:
For using animate function see this post: How to create a jQuery button with blinking text without changing the background colour?

adding fade to change background with javascript

I have the following code for changing a divs background image with jquery, i need help to add a fade to the code so the image change with some effect
this is the code
jQuery(window).load(function(){
var images = ['blured/1.jpg','blured/2.jpg'];
var i = 0;
var timeoutVar;
function changeBackground() {
clearTimeout(timeoutVar); // just to be sure it will run only once at a time
jQuery('#maincont').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
// call the setTimeout every time to repeat the function
timeoutVar = setTimeout(changeBackground, 6000);
}
// Call it on the first time and it will repeat
changeBackground();
});
Any help will be great!
i need to just change the background image, without fading the inside divs, this is the html
<div class="maincont" id="maincont">
<div class="containersrch">
<h1 class="lagro">some title</h1>
<div class="joinus">
<span>JOIN</span>
</div>
</div>

Maybe this is what you want?
$(function(){
var imgId = $('#maincont'), imgCount = 1, imgLast = 2;
setInterval(function(){
imgId.fadeOut('slow', function(){
if(++imgCount > imgLast)imgCount = 1;
imgId.css('background', "url('blured/"+imgCount+".jpg')");
imgId.fadeIn('slow');
});
}, 6000);
});
Now you can have multiple images, just change imgLast to the last number and make sure they have the correct URLs in your blured folder. Of course, the code above assumes you are using .jpg. I actually recommend the lossless compression of .png, but it won't matter if it's the image was taken as a .jpg.

Javascript hide and show a div in a loop for a text "blink" effect

I recently wanted to make a element in a div with the ID of "test" to have a "blink" effect like most text editors have where the cursor is hidden and then shown, then hidden and shown....(in a loop) I tried to recreate this effect but just couldn't get it to work. Please help!
Here is some code:
<div id="test">
<p> _ </p>
</div>

Something like this?
setInterval(function(){
$("#test p").toggle();
},3000);
blinks every 3 seconds.

Here's a concise, pure JavaScript way.
blink = setInterval(function () {
element = document.querySelector("#test p");
element.style.opacity = (element.style.opacity == 1 ? 0 : 1);
}, 500);
If you want to stop it, run clearInterval(blink).
Here's a working fiddle.

FIDDLE
setInterval(function(){
$("#test p").toggle();
},300);

Here is an example using Javascript
setInterval(function(){
var elem = document.querySelector("#test p");
if(isVisible(elem)) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
},500);
function isVisible(elem) {
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}
(Though knouroozi's answer will stop the contents from shifting around, so I'd suggest that.)
With JQuery it becomes simpler:
setInterval(function(){
$('#test p').toggle();
},500);
(stckrboy's answer covers toggling visibility, rather than 'display', which will prevent the content from shifting around.)

Here's an example using jQuery and setInterval
$(".crsr").each(function(){
var elem=$(this);
setInterval( function() {
if(elem.css('visibility')=='hidden') {
elem.css('visibility','visible')
} else {
elem.css('visibility','hidden')
}
},500)
});
jSFiddle

Throwing my approach into the ring. :) Set up a class that changes the visibility to hidden and then use setInterval and toggleClass to toggle the class off and on.
HTML
<div id="blinkingText">
Blink for me!
</div>
CSS
<style>
.blinkOn {visibility: hidden;}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
setInterval(function() {
$("#blinkingText").toggleClass("blinkOn");
},1000);
});
</script>