Develop Reference

how to loop fadeout Need change div img

I need loop this script, but i don't know how to do this...
$(zaj).ready(function(){
$("#zaj1").fadeOut(6000);
$('#zaj2').delay(7000).fadeOut(6000);
$('#zaj1').delay(7000).fadeIn(6000);
});
And I want to loop this. This is changing background img for div.

Try:
$(zaj).ready(function(){
var flag = 1;
do{
$("#zaj1").fadeOut(6000function(){
$('#zaj2').delay(7000).fadeOut(6000, function(){
$('#zaj1').delay(7000).fadeIn(6000);
});
});
}while(flag ==1);
});
but again, it do what you ask but you could find better ways... like:
$(zaj).ready(function(){
setInterval(function(){
$("#zaj1").fadeOut(6000, function(){
$('#zaj2').fadeOut(6000, function(){
$('#zaj1').fadeIn(6000);
});
});
}, 19000);
});

Cleaner code so it has clean recursive loop
https://jsfiddle.net/egwmpsa7/
function start() {
$("#first").fadeOut(1000, function() {
$('#second').delay(1500).fadeOut(1000);
$('#first').delay(1500).fadeIn(1000, function() {
$('#second').delay(1500).fadeIn(1000, start);
setTimeout(start, 1500)
});
})
}
start();
<div id="first">first</div>
<div id="second">second</div>

my solution:
function() {
$('#zaj1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
$('#zaj2').fadeIn(1000).delay(2000).fadeOut(1000);
})
}
$(document).ready(function(){
setInterval(fades, 8000);
fades();
});
HTML:
<p id='zaj1' style="display: none;">
zaj1
</p>
<p id='zaj2' style="display: none;">
zaj2
</p>
demo: https://jsfiddle.net/gjfg22bz/4/

This can be done for quick scaling as you add more possible images. All you have to do is customize the variables here at the top, and you're done. The function will handle the rest.
var images = ['#zaj1', '#zaj2']; // Add as many as you want
var delayTime = 1000; // The time the image shows before starting the fade process
var fadeTime = 6000; // How fast the fadein/out should happen
var currentIndex = 0;
function loopOverImages() {
$(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function () {
++currentIndex;
if (currentIndex == images.length) {
currentIndex = 0;
}
$(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
});
}
loopOverImages(); // Call immediately to start the process
Check out the really simple code snippet to help illustrate how simple this can be:
var images = ['#zaj1', '#zaj2', '#zaj3'];
var currentIndex = 0;
var delayTime = 2000;
var fadeTime = 1000;
function loopOverImages() {
$(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function() {
++currentIndex;
if (currentIndex == images.length) {
currentIndex = 0;
}
$(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
});
}
loopOverImages();
div {
width: 100px;
height: 100px;
display: none;
}
#zaj1 {
background-color: rebeccapurple;
display: block;
}
#zaj2 {
background-color: #f08e86;
}
#zaj3 {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="zaj1"></div>
<div id="zaj2"></div>
<div id="zaj3"></div>

Select the elements to be looped through.
Initiate a variable for storing which element is visible now
Loop through using setInterval
update 'current' after each run
$("document").ready(function(){
var elements=$("#zaj1, #zaj2, #zaj3");
current=0;
elements.eq(current).fadeIn(6000);
setInterval(function(){
var next=current+1>elements.length-1?0:current+1;
elements.eq(current).fadeOut(6000);
elements.eq(next).fadeIn(6000);
current=next;
},7000);
});
[id^=zaj]{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zaj1">One</div>
<div id="zaj2">Two</div>
<div id="zaj3">Three</div>

stop blinking text javascript

I have made a short script, where a text is blinking. But I cannot really figure out how I can stop the blinking after fx 3 blinks. Does anybody know how I can add that to my script?
Best Regards Julie
HTML
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
CSS:
.flash{
background: yellow;
}
.noflash{
background: white;
}
JS:
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');

function blink(selector, repeat){
if(!repeat) return;
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, repeat - 1);
});
});
}
blink('.blink', 3);
So you can control how many times it will blink.

You can build chain of effects without recursion:
function blink(selector){
var chain = $(selector);
for (var i = 0; i < 3; i++) {
chain = chain.fadeOut('slow').fadeIn('slow');
}
}
blink('.blink');

You could try something like this (untested):
function blink(selector, count){
count = count || 1;
if (count <= 3) {
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, ++count);
});
});
}
}

Make an achor tag non-clickable for while and make it clickable again

How can I make an anchor tag clickable after few seconds ? I made it non-clickable but now can't make it clickable again.
(Note: there will be no id used for the tag)
Heres my html and javascript:
function neww(id,time){
var sec,min,hr;
var i=(time*1);
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.onclick=function(){return false}; // its working here
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
if(id.onclick==false){id.onclick=function(){return true};} // but its not working
clearInterval(neew);
}
},1000);
}
Html:
Ready
-Thanks in advance.
SOLVED:
I just removed the 'onclick' attribute from the anchor, so the timer function gets no barrier until the timer completes. Thank you everybody for your effort which helped me to solve this.
Thiss for the link is alive but that doesn't interfere the timer function:
function neww(id,time){
var link=id.getAttribute("onclick");
id.removeAttribute("onclick");
var sec,min,hr;
var i=(time*1);
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
id.setAttribute("onclick",link);
clearInterval(neew);
}
},1000);
}
And thiss for the link is dead while the timer is running:
function neww(id,time){
var link=id.getAttribute("onclick");
var linkk=id.getAttribute("href");
var sec,min,hr;
var i=(time*1);//+60;
var neew=setInterval(function(){
if(i>0){
i--;
if(i>=60){
min=parseInt(i/60);
sec=i%60;
if(min>=60){
hr=parseInt(min/60);
min=min%60;
}else{
hr=0;
}
}else{
min=0;
hr=0;
sec=i;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hr<10){
hr="0"+hr;
}
id.removeAttribute("onclick");
id.removeAttribute("href");
id.style.color="red";
id.style.backgroundColor="#ffffff";
id.innerHTML=hr+':'+min+':'+sec;
}
if(i==0){
id.innerHTML="Ready";
id.style.color="#ffffff";
id.style.backgroundColor="green";
id.setAttribute("onclick",link);
id.setAttribute("href",linkk);
clearInterval(neew);
}
},1000);
}

Here I am giving you one idea. please modify, according to your need. Hope it help.
After three minutes, it will create the link.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Ready
</body>
</html>
jQuery:
$(function(){
var link = $('.mynewclass').attr('href');
$('.mynewclass').removeAttr('href');
setTimeout(function(){
$('.mynewclass').attr('href', link);
}, 3000);
});
Javascript:
I am using the javascript getElementsByClassName method. if you are using older browser then i think it will not work. please check the browser support.
window.onload = function () {
var elem = document.getElementsByClassName('mynewclass'),
urlLink = elem[0].getAttribute('href'),
emptyURL = elem[0].removeAttribute('href');
setTimeout(function () {
urlLink = elem[0].setAttribute('href', urlLink);
}, 3000);
}
Here is the jsbin link - http://jsbin.com/dawit/2/

In Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Delay Click</title>
</head>
<body>
Ready |
Ready |
Ready |
<script>
var enableLinks = false;
setTimeout(function(){
enableLinks = true;
}, 5000); //add delay of 5 seconds = 5000 miliseconds
function clickHandler(e){
var el = e.target;
if(!enableLinks){
e.preventDefault();
}else{
//add rest of your logic here
console.log("it's working");
}
}
var anchors = document.querySelectorAll(".mynewclass");
for(var i=0; i< anchors.length; i++){
if (anchors[i].addEventListener) {
anchors[i].addEventListener('click', clickHandler, false);
} else if (anchors[i].attachEvent) {
anchors[i].attachEvent('onclick', clickHandler);
}
}
</script>
</body>
</html>

How to repeat a div in every minute

This is my code. Here the div is animated after 5 sec and hidden after another 5 sec. I need to repeat this every 5 sec. That means every 5 second the div will animate and disappear after another 5 second.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript" src="jquery.animate-colors.min.js"></script>
<script>
$(window).load(function(){
$('#div').delay(5000).fadeIn(function() {
$(this).text('Some other text!').css({'text-align':'center',})
});
$("#div").animate({
left:'450px',
opacity:'0.5',
height:'250px',
width:'250px',
border:'3px solid',
borderColor: 'darkolivegreen',
backgroundColor: '#cccc'
})
$('#div').delay(5000).fadeOut();
});
</script>
</head>
<body>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;">Please login</div>
</body>
</html>

You could use the setInterval() method in javascript.
Summary
Calls a function or executes a code snippet repeatedly, with a fixed
time delay between each call to that function.
MDN Documentation

I've just wrapped your code in the "fader" function, then on document load, setInterval will run every 10 seconds.
<script>
function fader () {
$('#div').delay(5000).fadeIn(function() {
$(this).text('Some other text!').css({'text-align':'center',})
});
$("#div").animate({
left:'450px',
opacity:'0.5',
height:'250px',
width:'250px',
border:'3px solid',
borderColor: 'darkolivegreen',
backgroundColor: '#cccc'
})
$('#div').delay(5000).fadeOut();
};
$(function () {
setInterval(fader,10000);
})
</script>

<div id="blinkText"></div>
<script>
// Takes text to blink and id of element to blink text in
function blinkText(text, id) {
// Blink interval
setInterval(blinker, 5000);
// Flag to see what state text is in (true or false)
var flag = true;
// Number of times to blink text
var blinkNum = 10000;
var i = 1;
//you can select whole div by ajax
var divID = document.getElementById(id);
function blinker() {
if (i < blinkNum) {
if (flag) {
divID.innerHTML = text;
flag = false;
} else {
divID.innerHTML = "";
flag = true;
}
i++;
} else {
// Delete if it's still showing
divID.innerHTML = "";
// Stop blinking
clearInterval(blinker);
}
}
}
blinkText("Hello World", "blinkText");
</script>

How do I create a fade picture slideshow with jQuery?

I have the following jQuery code below I am trying to use (I know it's not optimized, but I do not think that is the issue; feel free to optimize it though):
$(document).ready(function(){
var cur = 0;
function slideshow() {
$("#imgdisp").fadeOut(400);
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
setTimeout(slideshow,4000);
}
slideshow();
})
With the following HTML file:
<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>
What I am trying to create is a slideshow that does the following (in order):
1) fade out current image
2) remove the current image
3) append a new image (called home_2.jpg, and it goes up to home_3.jpg)
4) fade in
5) wait four seconds to repeat with the next image
However, when I try to run this code, it appends the new image before fading out, so the image appears abruptly, fades out, then fades in, and waits four seconds before it repeats. My questions are:
1) How do I fix this code such that it changes the image while the div is faded out?
2) Is there a way to have the image fade immediately to the next image?
Thanks in advance to everyone who contributes :)

Try this:
$(document).ready(function(){
var cur = 0;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
setTimeout(removeCurrent, 4000);
}
function removeCurrent(){
$("#imgdisp").fadeOut(400);
slideshow();
}
slideshow();
});

You can use NivoSlider a jQuery plugin available here

Try this one:
$(document).ready(function(){
var cur = 1;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
setTimeout(function(){
$("#imgdisp").fadeOut(400, function(){
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
});
slideshow();
}, 4000);
}
slideshow();
});

on top of dunli some modification can do what you are looking for -
$(document).ready(function(){
var cur = 0;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img style='display:none' src='image_path/home_"+cur+".jpg' />");
$("#imgdisp img").fadeIn(400);
setTimeout(removeCurrent, 4000);
}
function removeCurrent(){
$("#imgdisp img").fadeOut(400);
slideshow();
}
slideshow();
});