hey i have a setInterval function [see below] inside a an each function for all divs with class, my problem is to manage each divs differently
please help
var div_holder = $('div.products_each');
div_holder.each(function(i){
var vari= setInterval(function() {
//do something here
},1000/60)
});
and i could close this by
$(document).on("mouseenter", ".products_each_all",function(){
$(this).children('div._title').css('margin-left',"0px");
clearInterval(vari);
})
this Clear all setInterval call [effects all div action]
My question is how to manage each classes setinterval differently
thanks in advance
use .data() to store the interval reference of each element individually.
var div_holder = $('div.products_each');
div_holder.each(function (i) {
var vari = setInterval(function () {
//do something here
}, 1000 / 60)
$(this).data('vari', vari)
});
$(document).on("mouseenter", ".products_each_all", function () {
$(this).children('div._title').css('margin-left', "0px");
//each products_each element will have a data item called vari which holds the interval reference, you can use it to clear it later
var div_holder = $('div.products_each');
div_holder.each(function (i) {
clearInterval($(this).data('vari'));
});
})
you can achieve it like this:
$.each($(".products_each"), function (index, value) {
var vari = setInterval(function() {
// do what ever you want with value
// it is your div : $(value).hide();
}, 1000/60);
});
Related
Wow.. to get real information about 'this' is not easy as google basically ignores the word.
The code opens an image from a database using the information from thumbnail.. the onlick works, and the hover code works, but I can't figure out how to get 'this' from the mouseenter to be used in the showModal function.
function showModal() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
var altLong = $(this).attr("alt");
var altSplit = altLong.split("#");
$(".picTitle").text(altSplit[0]);
var srclong = $(this).attr("src");
var srcshort = srclong.split("_");
var srcextension = srclong.split(".");
$(".big").attr("src", srcshort[0]+'.'+srcextension[1]);
}
$(".small").click(showModal);
var timer;
$(".small").mouseenter(function() {
timer = setTimeout(function(){
$(this).showModal(); // **<--this is the line that doesnt work**
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
also if you could explain why you would use $(this) as a jquery object instead of just 'this' and how they differ, that would be great. Thanks in advance~!
There are two separate aspects to this.
Getting the right this in the setTimeout callback
Calling showModal with that this
#1 is addressed by this question's answers. You have several options, the simplest in this case (for now) probably being to use a variable:
$(".small").mouseenter(function() {
var _this = this; // ***
timer = setTimeout(function(){
$(_this).showModal(); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
...but that code still won't work, because showModal isn't a property of jQuery objects, it's a standalone function. To call it with a specific this, you'd use Function.prototype.call:
$(".small").mouseenter(function() {
var _this = this;
timer = setTimeout(function(){
showModal.call(_this); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
(Alternately, change showModal to accept the element as a parameter and then just pass it as an argument.)
More on this in this question's answers as well, as well as this (old) post on my anemic little blog.
this will also work if you could change your showModel function like this :
$.fn.showModal = function() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
...
}
and inside timer method
$(this).showModal();
I'm building something that fades an array of texts in and out.
This is my work so far: http://jsfiddle.net/9j7U6/
I'm fading texts in and out, but the timing is off when I see it rendered.
$("#wantPlaceholder").fadeOut().html(wants[i]).fadeIn(2000).delay(3000);
What is the right way to do it?
Use a callback. The callback will be called once the animation is done. The following code fades out the element. When it is fully faded out the HTML is modified and then it is faded in again.
$("#wantPlaceholder").fadeOut(1000, function(){
$(this).html(wants[i]);
$(this).fadeIn(2000);
});
Edit: Well, the looping could be done something like this:
(function myLoop(items, index) {
index = (items.hasOwnProperty(index) ? index : 0);
$("#wantPlaceholder").delay(3000).fadeOut(1000, function () {
$(this).html(items[index]);
$(this).fadeIn(1000, function () {
myLoop(items, index + 1);
});
});
}(wants, 0));
First the text need to be changed in the fadeOut() handler
function rotateWants() {
var i = 0;
var wantsLength = wants.length;
function fade() {
$("#wantPlaceholder").delay(5000).fadeOut(function () {
$(this).html(wants[i]);
i++;
if (i >= wantsLength) {
i = 0
};
}).fadeIn(2000, fade);
}
fade();
}
Demo: Fiddle
I the given code, I am using setInterval() and clearInterval() methods.
Here are two buttons for setInterval() and two for clearInterval(), if I click both setInterval() buttons, then the clearInterval() buttons doesn't work.
HTML:
<div id="a"></div>
<button id='bt1'>start</button>
<button id='bt2'>Stop</button>
<button id='bt3'>Start</button>
<button id='bt4'>Stop</button>
Javascript:
var Graph = {
graph: null,
start: function (i) {
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
Fiddle: Fiddle
As the other answers, the first timer ID is overwritten. Try to store the IDs separately in an array or at least as separate variable names. Here is one adjustment using an array:
var Graph = {
graph: [0, 0], /// turn this into an array
start: function(id, i) { /// add a new parameter here
this.graph[id] = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function (id) { /// add parameter here as well
window.clearInterval(this.graph[id]);
}
};
$('#bt1').click(function(){
Graph.start(0, 1); /// set index 0 with this timer id
});
$('#bt2').click(function(){
Graph.stop(0); /// stop using id at index 0
});
$('#bt3').click(function(){
Graph.start(1, 1); /// etc.
});
$('#bt4').click(function(){
Graph.stop(1);
});
Your i variable may be subject to the same thing depending on what you try; I haven't addressed that here.
Hope this helps.
You only have a single variable to store the result of both calls to setInterval, i.e. you are overwriting it on the second call so the first timer can't be cleared.
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar = setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
You can also refer to this answer
If you click the #bt1 button and then the #bt3 button, the second start() function call will overwrite the graph variable in the Graph object. So the ID value returned by first setInterval() call is lost, you cannot clear the first timer.
Just put the following line of code before the setInterval() call in the start() method. This will stop the previous running timer:
if (this.graph) { this.stop(); }
Like this:
var Graph = {
graph: null,
start: function (i) {
if (this.graph) { this.stop(); }
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
I am trying to create div's on demand which then timeout and are then hidden and removed from the dom.
The display property of "load_bar" is set to none so that I can use the last selector to get a reference to the instance I have just created.
It is important that this solution can create several div's which are running on their own timeout clock
$(document).ready(function () {
$('#add').click(function () {
var t = Math.random()*20;
alert(t);
var destination = $('input').val();
$('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
$('.load_bar:last').show().delay(t).hide().remove();
});
});
Every thing works to create divs when I remove .delay().hide().remove();
However when I add this the div is not shown at all
Create proper elements, that way you'll have a reference to the element within the function:
$(document).ready(function () {
$('#add').click(function () {
var t = (Math.random()*20)*1000,
destination = $('input').val(),
div = $('<div />', {'class':'load_bar', text: destination});
$('#holding_pen').append(div);
div.show(1).delay(t).hide(1, function() {
$(this).remove();
});
});
});
Also, hide() and show() does not work with the animation queue and subsequently not with delay() unless a duration is given, and that's why the element is never shown, delay() doesn't work and the element is hidden right away.
EDIT:
Also, remove() is not an animated method, so it doesn't work with delay(), but hide() a useful callback for that, see edited code above.
FIDDLE
The problem is because delay is used to stop jQuery animation queue, which both show and hide do not use. Therefore your div is being shown and them immediately hidden. Use setTimeout instead:
$('#add').click(function () {
var destination = $('input').val();
$('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
$('.load_bar:last').show();
setTimeout(function() {
$('.load_bar:last').hide();
}, Math.random() * 20 * 1000); // * 1000 = seconds
});
Example fiddle
The delay() function only applies to actions queued on the element.
$(document).ready(function () {
$('#add').click(function () {
var t = Math.random()*20;
alert(t);
var destination = $('input').val();
$('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
$('.load_bar:last').show().delay(t).queue(function( nxt ) {
$(this).hide().remove();
nxt(); // continue the queue
});
});
});
$(document).ready(function () {
$('#add').click(function () {
var t = Math.random()*20;
alert(t);
var destination = $('input').val();
$('#holding_pen').innerHTML='<div class="load_bar">'+destination+'</div>';
});
});
Could someone tell me why in the first alert(items.index($(this))) = 1 and the second alert(items.index($(this))) = -1. How does this value get changed within the other function?
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
alert(items.index($(this)));
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($(this)));
$('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
});
// window.location.hash = $(this).attr('tab');
});
});
this refers to current object.
In first version,
this is an item of $('#v-nav>ul>li') list.
While in second version,
this is DOM object selected by $('#v-nav>div.tab-content')
If you want to retain the previous value of this, then cache it in a variable.
(Caching $(this) is a very good practise, as you always save a function call).
When you use $(this) you actually passes this into $ function.
$(function () {
var items = $('#v-nav>ul>li').each(function () {
var $this = $(this);
$this.click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$this.addClass('current');
alert(items.index($this));
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($this));
$('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
});
// window.location.hash = $(this).attr('tab');
});
});
Inside the callback function for the animation, this is not the element that you clicked, it's the element being animated.
"The callback is not sent any arguments, but this is set to the DOM
element being animated."
http://api.jquery.com/fadeOut/
(And if it hadn't been set to the animated element, it would have been a reference to the window object.)
Copy the reference to a variable outside the animation call:
var t = this;
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($(t)));
$('#v-nav>div.tab-content').eq(items.index($(t))).fadeIn("slow");
});
You have to consider the context of each "this", each of the callbacks has a distinct "this" variable. If you want to keep the original this around, do something like:
var self = this;