Develop Reference

How to trigger an action after setTimeout JavaScript

jsfiddle
I'm creating a function named preLoader() and I'm using setTimeout() cause I want to make it run for one time only.
When the preloader() function finish, I want to hide:
<div class="loader">
<h2 id="loading">0%</h2>
<h3 id="pleaseWait"></h3>
</div>
and show:
<div class="mainContent"></div>

Since you're using animate(), You don't really have to use both setTimeout and setInterval. Simply hide/unhide content in a complete callback of the animation.
function preLoader(){
// animating numbers
var arrayPleaseWait = ['P','L','E','A','S','E', ' ' , 'W','A','I','T','.','.','.'];
var searchReturn = '';
var current = null;
var wait = $('#pleaseWait');
$('body').css({
'backgroundColor':'#E2F7FA'
});
$('.mainContent').hide();
$('#loading').animate({
someValue: 100
},{
duration: 10000,
easing:'swing',
step: function() {
var l = Math.round(Math.round(this.someValue) * (arrayPleaseWait.length-1) / 100) || 0;
if(current != l){
searchReturn = searchReturn + arrayPleaseWait[l];
wait.text(searchReturn + '|');
current = l;
}
$(this).text(Math.round(this.someValue) + '%');
},
complete : function(){
$('.loader').hide();
$('.mainContent').show();
}
});
}
preLoader();
JSfiddle demo

this is the HTML code:
<div class="loader">
<h2 id="loading">0%</h2>
<h3 id="pleaseWait">pleaswait</h3>
</div>
<div class="mainContent" hidden="true">ok</div>
JavaScript:
var executed = false;
setTimeout(function() {
if(!executed) {//the same of if(executed == false)
var loader = document.getElementsByClassName('loader')[0];
var mainContent = document.getElementsByClassName('mainContent')[0]
loader.hidden = "true";//hide the loader
mainContent.removeAttribute("hidden");//show the mainContent
executed = true;
}
}, 1000);

jquery fade in images

I am trying to fade in and out images with jquery but it's not working, I am missing something out.
see the script below:
var count = 1;
setInterval(function() {
count = (jQuery(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
//alert (count);
jQuery(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);
And here is the HTML code.
<div class="slideshow">
<div class="hover">
<a href="#">
<img src="#" />
<div class="mainportfo_title">title</div>
</a>
</div>
<div class="hover">
<a href="#">
<img src="#" />
<div class="mainportfo_title">title</div>
</a>
</div>
</div>

You can use JQuery get() and works on this code, taht is definitely improvable:
var i = 0;
setInterval(function() {
var target = $("img").get(i);
var next = $("img").get(++i);
$(target).fadeIn( "slow", function() {
$(target).fadeOut( "slow", function() {
$(next).fadeIn();
});
});
if(i >= $("img").size()) {
i = 0;
}
}, 3000);

do you want to do this?: jsfiddle demo
var count = 1;
setInterval(function() {
count = (jQuery(".slideshow:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
jQuery(".slideshow:nth-child("+count+")").fadeIn();
}, 2000);

You have to target your .hover elements otherwise the .nth-child will select the wrong element.
var count = 1;
setInterval(function () {
count = ($(".slideshow .hover:nth-child(" + count + ")").fadeOut().next().length == 0) ? 1 : count + 1;
console.log(count);
$(".slideshow .hover:nth-child(" + count + ")").fadeIn();
}, 2000);
fiddle

8 image change on mouse hover and return to default when left

i have an 8 img elements in my page -
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
On hover it should change from 1_1 to 1_2 till 1_8 and then 1_1 again. On mouse out it should show the default pic i.e 1_1. Like this i have 2_1, 3_1 till 8_1.
The javascript function for mousehover is -
function mousehover(x){
for(var i=2; i<9; i++){
x.src = x.src.replace('images/rotator/1_' + i + '.jpg');
}
}
function defaultImg(x){
x.src = x.src.replace("images/rotator/1_1.jpg");
}
Somehow this mouse hover func does not work. And how do i get the defaultImg for all the images on mouse out. I am stuck here. Any ideas?

Try the following.Should work:
var timer;
var i=2;
function mousehover(x){
x.src = 'images/rotator/1_' + i + '.jpg';
i++;
timer = setTimeout(function(){mousehover(x)},2000);
}
function defaultImg(x){
i=2;
clearTimeout(timer);
x.src = "images/rotator/1_1.jpg";
}

You can pass the first number as parameter in the function calls.
<img onmouseover="mousehover(this, 1)" onmouseout="defaultImg(this, 1)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this, 2)" onmouseout="defaultImg(this, 2)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
And the JavaScript would be:
var interval;
function mousehover(x, y) {
var i = 1;
interval = setInterval(function() {
i++;
if (i > 8) {
clearInterval(interval);
i = 1;
}
x.src = 'images/rotator/' + y + '_' + i + '.jpg';
}, 500);
}
function defaultImg(x, y) {
clearInterval(interval);
x.src = 'images/rotator/' + y + '_1.jpg';
}
For more performance, I would combine all images into one big sprite, and play with the background-position instead of loading a new image each time.

Something in these lines should work:
var element = document.querySelector("#switch");
element.addEventListener('mouseover', function() {
this.src = "http://placehold.it/400x300";
});
element.addEventListener('mouseout', function() {
this.src = "http://placehold.it/200x300";
});
Fiddle

You need something like this:
//TIP: Insert listeners with javascript, NOT html
x.addEventListener('mouseover', function () {
var count = 1,
that = this,
timer;
timer = setInterval(function () {
if (count < 8) {
count++;
} else {
count = 1;
}
that.src = 'images/rotator/1_' + count + '.jpg';
}, 500);
function onMouseOut() {
that.src = 'images/rotator/1_1.jpg';
that.removeEventListener('mouseout', onMouseOut)
}
this.addEventListener('mouseout', onMouseOut);
});

Slider image id

I have a small problem with a small jQuery script that my slide images. The script itself works very well, its purpose being to scroll through the images indeed "fade", a classic.
The problem is that if I want to use it for another block on the page, well it no longer works properly .. The problem is certainly located at the id, but can not make it work.
Here is the script:
function slider() {
function animate_slider(){
$('.slider #'+shown).animate({
opacity:0 // fade out
},1000);
$('.slider #'+next_slide).animate({
opacity:1.0 // fade in
},1000);
//console.log(shown, next_slide);
shown = next_slide;
}
function choose_next() {
next_slide = (shown == sc)? 1:shown+1;
animate_slider();
}
$('.slider #1').css({opacity:1}); //show 1st image
var shown = 1;
var next_slide;
var sc = $('.slider img').length; // total images
var iv = setInterval(choose_next,3500);
$('.slider_nav').hover(function(){
clearInterval(iv); // stop animation
}, function() {
iv = setInterval(choose_next,3500); // resume animation
});
$('.slider_nav span').click(function(e){
var n = e.target.getAttribute('class');
//console.log(e.target.outerHTML, n);
if (n=='prev') {
next_slide = (shown == 1)? sc:shown-1;
} else if(n=='next') {
next_slide = (shown == sc)? 1:shown+1;
} else {
return;
}
animate_slider();
});
}
window.onload = slider;
Any idea ? Thank you all :)

i am not sure of what u want to do, but if you want reusibality :
EDIT : i ve modified assuming that your 2 slides are independant
this is a quick solution, as mentioned #David Barker, it would be more clean to do a jQuery plugin
JS :
var sliderTop = "#slider.top";
var sliderBottom = "#slider.bottom";
function slider(el) {
function animate_slider(el){
$(el + shown).animate({
opacity:0 // fade out
},1000);
$(el + next_slide).animate({
opacity:1.0 // fade in
},1000);
//console.log(shown, next_slide);
shown = next_slide;
}
function choose_next(el) {
next_slide = (shown == sc)? 1:shown+1;
animate_slider(e);
}
$(el + ' #1').css({opacity:1}); //show 1st image
var shown = 1;
var next_slide;
var sc = $(el + ' img').length; // total images
var iv = setInterval(choose_next,3500);
$(el + '_nav').hover(function(){
clearInterval(iv); // stop animation
}, function() {
iv = setInterval(choose_next,3500); // resume animation
});
$(el + '_nav span').click(function(e){
var n = e.target.getAttribute('class');
//console.log(e.target.outerHTML, n);
if (n=='prev') {
next_slide = (shown == 1)? sc:shown-1;
} else if(n=='next') {
next_slide = (shown == sc)? 1:shown+1;
} else {
return;
}
animate_slider(el);
});
}
window.onload = function() {
slider(sliderTop);
slider(sliderBottom);
}
HTML :
<div id="slider" class="top">
<h2>Nos partenaires</h2>
<img id="1" src="" alt="">
<img id="2" src="" alt="">
<img id="3" src="" alt="">
</div>
<div class="slider_nav">
<span class="prev">Précédent</span><!--
--><span class="next">Suivant</span>
</div>
<div id="slider" class="bottom">
<h2>Nos partenaires</h2>
<img id="1" src="" alt="">
<img id="2" src="" alt="">
<img id="3" src="" alt="">
</div>
<div class="slider_nav">
<span class="prev">Précédent</span><!--
--><span class="next">Suivant</span>
</div>

make progress bar on images loading with bootstrap/jquery

I try to make a progress bar with bootstrap css on images loading. For this, I use the following script :
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script type="text/javascript">
var n=0;
var c=0;
$('img').each(function() {
n++;
var tmpImg = new Image() ;
tmpImg.src = $(this).attr('src') ;
tmpImg.onload = function() {
c++;
};
});
var interval = setInterval(function() {
percent = n/100;
loaded = c/percent;
// for displaying purposes
setBar(getBar()+50)
// feed loaded var to the progressbar
if (loaded == 100) {
clearInterval(interval);
}
}, 1);
function setBar(n) {
var bar = document.getElementById('fabbar');
bar.style.width = n+'%';
}
function getBar() {
var bar = document.getElementById('fabbar');
return parseInt(bar.style.width);
}
</script>
</head>
<body>
<div class="progress progress-info progress-striped active">
<div class="bar" id='fabbar' style="width: 20%"></div>
</div>
But this doesn't work, i.e the progress bar doesn't progress. How could I do that ?

Try this (demo):
$(function () {
var n = 0,
$imgs = $('img'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
});