Hi I want to add delay in jquery. I was trying to put $('.fade_test').delay(5000); It is working but div last three is no next to start one.
Link to a jsfiddle
HTML
<div class="fadein">
<div class="fade_test">one <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">two <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">three <button id="toggler" class="playin">Pause</button></div>
</div>
CSS
.fadein { position:relative; height:332px; width:500px; }
.fadein .fade_test { position:absolute; left:0; top:0; }
JS
var pauseplay;
function startFader() {
$x = $(".fade_test:visible").fadeOut(1000);
$next = $x.next();
if ($next.length == 0)
$next = $(".fade_test:first-child");
$next.fadeIn(1000);
$('.fade_test').delay(5000);
}
function stopFader(){
window.clearInterval(pauseplay);
console.log("stop");
}
$('.fadein .fade_test:gt(0)').hide();
pauseplay= window.setInterval(startFader, 2000);
var $button = $('.fadein #toggler');
$button.toggle(function() {
stopFader();
$(this).toggleClass('playin pausin');
$(this).text("Play");
}, function() {
$(this).toggleClass('pausin playin');
$(this).text("Pause");
pauseplay= window.setInterval(startFader, 2000);
});
Any help would be most appreciated
Not JQuery but you could use Javascript's very simple setTimeout(fn,milliseconds);
here is another post explaining
function foo(){
alert('foo');
}
setTimeout(foo,1000);
Related
I have two divs on called #loading and one called #main;
<div id="loading"></div>
<div id="main"></div>
What I'm trying to achieve is with using javascript, show #loading for five seconds then after the five seconds hide the #loading div and show the #main div. The #main div is default hidden and once the #loading div is hidden the #main div shows.
I'm assuming that to achieve this would be a mixture of css and javascript; hopefully you understand what I'm trying to achieve and can help me accomplish what I'm trying to achieve.
Thankyou.
Your css would be:
#main {
display:none;
}
The JS would be:
setTimeout(function() {
document.getElementById('main').style.display = 'block';
document.getElementById('loading').style.display = 'none';
}, 5000);
Maybe this could help you out without the use of CSS. Only pure Jquery.
$("#loading").show();
$("#main").hide();
setTimeout(function() {
$("#loading").hide();
$("#main").show()
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">loading here..</div>
<div id="main" class="hidden">This is main content</div>
Use setTimeout.
window.onload = function() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("main").style.display = "block";
}, 5*1000);
}
#main {
display: none;
}
<div id="loading">loading</div>
<div id="main">main</div>
Hope this helps
function loading(dur) {
if (window.busy) {return;}
document.getElementById('loading').style.display = "block";
document.getElementById('main').style.display = "none";
window.busy = setTimeout(function () {
document.getElementById('loading').style.display = "none";
document.getElementById('main').style.display = "block";
window.busy = 0;
}, dur);
}
loading(5000);
Personaly I would avoid using ID's here as they polute the global.
You can do this nicely with CSS and classes..
var holder = document.querySelector('.holder');
setTimeout(function () {
holder.classList.remove('isloading');
}, 5000);
.loading {
display: none;
}
div.isloading .loading {
display: block;
}
.main {
display: none;
}
div:not(.isloading) .main {
display: block;
}
<div class="holder isloading">
<div class="loading">Loading</div>
<div class="main">Main</div>
</div>
I'm very new to jQuery and I know there has to be a faster and smaller amount of code to do this. So, what I have here are two divs. Div one will show a class in a different div. and Div two will hide this element once a user is done and clicks div two. I feel like my jquery code is way too long for this. Here's my JSFIDDLE . https://jsfiddle.net/g812sqry/
<div class="container">
<div>
<p id="one">Div One</p>
</div>
<div>
<p id="two">Div Two</p>
</div>
</div>
#one {
width:60px;
background-color:green;
padding:10px;
cursor:pointer;
}
#two {
width:60px;
background-color:green;
padding:10px;
display:none;
cursor:pointer;
}
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
});
$('#one').click(function () {
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
});
$('#two').click(function () {
$('#one').show();
});
});
Try using .toggle()
$(document).ready(function () {
var elems = $("#one, #two");
elems.click(function () {
elems.toggle()
});
})
jsfiddle https://jsfiddle.net/g812sqry/4/
You can club the click events for both the selectors.
$(document).ready(function () {
$('#one, #two').click(function () {
$('p').show();
$(this).hide();
});
});
Check Fiddle
This way better.
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
$('#one').show();
});
});
You are already calling the $('#divID').click() function no need to call it a second time for both #one and #two DIV's
$(document).ready(function () {
$('#one').click(function () {
$(this).hide();
$('#two').show();
});
$('#two').click(function () {
$(this).hide();
$('#one').show();
});
});
#one {
width:60px;
background-color:green;
padding:10px;
cursor:pointer;
}
#two {
width:60px;
background-color:green;
padding:10px;
display:none;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div>
<p id="one">Div One</p>
</div>
<div>
<p id="two">Div Two</p>
</div>
</div>
Try this. Eliminates the need on dependency on ids.
$('p').click(function () {
$('p').toggle();
});
https://jsfiddle.net/g812sqry/5/
Fiddle : http://jsfiddle.net/gLLvux07/
I am creating a countdown using javascript. its working fine when i click the button.
The issue is,
if I click the button when countdown running, it will not start from 0.
I am trying to clear interval in the beginning of function, but not working.
HTML :
<style>
.container {
width:50px;
height:25px;
overflow:hidden;
margin-top:100px;
margin-left:100px;
border:2px solid #ddd;
}
.count {
-webkit-transition: all 1;
-moz-transition: all 1;
transition: all 1;
}
</style>
<div class="container">
<div class="count">
<div>0</div>
</div>
</div>
<div style="text-align:center">
<input type="button" onclick="countdown();" value="Click Me" />
</div>
Javascript Code :
function countdown() {
clearInterval();
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++){
$(".container .count").append("<div>"+i+"</div>");
}
var count1 = 0;
var topmove = -10;
counting = setInterval(function(){
$(".container .count").css({'-webkit-transform': 'translateY('+topmove+'px)'});
count1 = count1+1;
topmove = topmove-10;
if(count1>40) {
clearInterval(counting);
}
},100);
}
Just define counting in global scope & do clearInterval(counting); in starting of function itself. You are not passing parameters to clearInterval.
DEMO
clearInterval requires a parameter telling the script which countdown to stop. Try something like this:
var counting;
function countdown() {
if (typeof counting === 'number') clearInterval(counting);
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++)
$(".container .count").append("<div>"+i+"</div>");
var count1 = 0,
topmove = -10;
counting = setInterval(function(){
$(".container .count").css({
'-webkit-transform': 'translateY('+topmove+'px)'
});
count1 = count1+1;
topmove = topmove-10;
if (count1>40){
clearInterval(counting);
}
},100);
}
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself
I followed a tutorial to create a simple javascript slideshow but I am having a strange bug... The first 2 cycles work perfectly, but once the counter resets the slideshow begins showing the previous slide quickly then trying to fade in the correct slide. Any idea what is causing this?
I have 3 images (named Image1.png, Image2.png, and Image3.png) in a folder for my simple slideshow and 3 divs set up like this:
<div id="SlideshowFeature">
<div id="counter">
3
</div>
<div class="behind">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
<div class="infront">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
</div>
My javascript looks like this
var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc
function changeImage() {
imagesInShow = "3";
currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imagesInShow) {
nextImage = 1;
}
else {
nextImage = currentImage + 1;
}
currentSrc = $(".infront img").attr("src");
nextSrc = "SlideShow/image" + nextImage + ".png";
$(".behind img").attr("src", currentSrc);
$(".infront").css("display", "none");
$(".infront img").attr("src", nextSrc);
$(".infront").fadeIn(1000);
$("#counter").html(nextImage);
setTimeout('changeImage()', 5000);
}
$(document).ready(function () {
changeImage();
});
EDIT:
Also here is my CSS
#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;
}
#SlideshowFeature div
{
width: 800px;
height:300px;
position:absolute;
}
#counter
{
display:none;
}
The problem seem to be in your HTML structure (and not in your JS):
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
I think you meant to put image1.png and then image2.png
.infront must be in front and .behind must be behind
.behind {
z-index: 1;
}
.infront {
z-index: 255;
}
And I also moved re-scheduling logic to fadeIn callback:
$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});
$("#counter").html(nextImage);
//setTimeout('changeImage()', 2500);
Looks good for me now.