multiple countdowns on same page with jquery - javascript

i'm having a little problem with jquery/javascript countdown and i'm hoping you can help me.
so, i have timer function, which has a one parameter, called selector (jquery selector) ..
function timer(selector) {
self = $(selector);
var sec = parseInt(self.find('span.timeout').text());
var interval = setInterval(function() {
sec--;
if (sec >= 0) {
self.find('span.timeout').text(sec);
} else {
setInterval(interval);
}
}, 1000);
}
in, html i have something like this.
<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>
multiple elements with same class and different id's
and the usage of the function is like this:
$("body").on('click', '.element', function() {
timer(this);
});
on the first click it works just fine, timer counts down.
but when i click on the second div with same class, first counter stops and the second goes from the previous second.
so, how can i do multiple countdowns on same page with js/jquery, so i could click on both elements and both timers work fine?
demo: http://jsfiddle.net/zKTkj/

You forgot to declare self with var. As a result, self became a global variable. You were overwriting this global ("shared") variable when the second timer was being created. So, both timers were from then on, at the same time, ouputting to the second element, causing glitches.
You probably meant clearInterval(interval).
http://jsfiddle.net/zKTkj/1/

Related

Dom manipulation not working

I wrote the below code to remove an element with class rc-anchor-pt (if it is present in the DOM) after 5 seconds,
checkContainer();
counter = 1;
function checkContainer () {
alert("checkContainer");
$('.rc-anchor-pt').remove();
$('.rc-anchor-logo-portrait').append('Privacy & Terms');
if($('.rc-anchor-pt').is(':visible')){ //if the container is visible on the page
var privacy = $('.rc-anchor-pt').find('a');
} else {
if (counter === 1)
{
setTimeout(checkContainer, 5000); //wait 50000 ms, then try again
counter++;
}
}
}
But the below line is not removing the element from the DOM. Can you please tell me what is the reason. Thanks in advance.I am running inside document.ready only The element is present in the page –
$('.rc-anchor-pt').remove();
I am not really sure what you are trying to accomplish with your code. You have stated in your question that you wish to remove an element from the DOM after 5 seconds...You should be able to accomplish that with the following code:
$('.rc-anchor-logo-portrait').append('<br>Privacy & Terms');
setTimeout(function(){
$('.rc-anchor-pt').remove();
}, 5000);
The way you have your code laid out, the rc-anchor-pt class will never be visible. It would really have no purpose then. If you want the append function to run after 5 seconds as well, just put it in the setTimeout function.
Here is a fiddle: https://jsfiddle.net/1399u65t/3/

Get html from element from iFrame every 10 seconds

So i've been looking around for a while for a possible solution to make a javascript, jquery which searches in the iFrame for a certain class or id element. Then takes out the html inside of it. (example. <a id="link">Here's a link</a> ). then makes it a string out of it and also replay this function every 5 second or so. Is there anyone who know a good solution to this or a tutorial?
I've tried the function var inf = $('#iframeid').contents().find('#theid').html();but it didn't gave any success.
Try this:
function GetFrameData() {
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var inf = frameBody.find('#theid').html();
});
}
// Call the function every 5 seconds
setInterval(GetFrameData, 5000);

jQuery addClass removeClass with timer

I have an issue with a 'Latest News' module. Please have a look at http://www.proudfootsupermarkets.com/ to see an example of the module (it's the div close to the top of the page which has a large image in it).
At the moment I have it set up so that when a user clicks on a tab the main article shows. The jQuery for this is:
jQuery(document).ready(function() {
$(".moduletable.latestnews article:first-child").addClass("atfront")
$(".moduletable.latestnews article").click(function(){
$(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront");
$(this).css("zIndex",100).addClass("atfront").removeClass("atback");
});
});
This is all quite simple and straight forward. The problem that I am having is that I want the articles to change automatically after a few seconds. This would then go in an infinite loop starting with article 1 and then after a couple of seconds showing article 2 etc etc...
I am sure that this is fairly simple but I have just about exhausted my knowledge of JavaScript. Thank you for any help that you are able to give :)
I have created a jsfiddle http://jsfiddle.net/Bempv/
You can use setTimeout to change the article in front. If you select the article with the class ".atfront" and then use the .next() selector you should get the functionality you are looking for
$(function(){
var articleToggler = function articleToggler(){
var front = "atfront",
back = "atback";
return function(){
var selection = $(".moduletable.latestnews")
.find("article.atfront")
.addClass(back)
.removeClass(front);
next = selection.next("article");
next = next.length ? next : $(".moduletable.latestnews")
.find("article").first();
next.addClass(front)
.removeClass(back);
console.log(selection.length,next[0])
setTimeout(articleToggler(),1000); //changes every second
};
};
//start the rotation
(articleToggler())();
});
The setTimeout will call the function passed as the first argument once the timeout expires. The timeout argument is in miliseconds so the above code wait for 1 second before calling the function. Since the above function adds it self as the callback this will repeat indefinately

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.
Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

How can I add a page indicator to this jquery div carosel I made?

I put together this quick carousel that I'm using to cycle through different divs that contain graphs and other various data. I would like to have something indicating which "page" or div you are currently viewing.
Here is an example of what I'm currently doing to iterate through the divs.
http://jsfiddle.net/d6nZP/64/
My plan is to have a row of dots that have either a active or none active state depending on which page is indicated in the row. But even a basic page counter would work at this point.
Any help would be greatly appreciated, Thanks!
here is a simple pager for your carousel, enjoy it ;)
http://jsfiddle.net/d6nZP/65/
Created something you can use http://jsfiddle.net/BadBoyBill/8yHmy/
$("div[id^=marquee]:gt(0)").hide();
function startTimer(){
i = setInterval(rotate, 2000);
return i;
}
var intID = startTimer();
function stopTimer(){
clearInterval(intID);
}
function rotate(){
reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
}
$("div[id^=marquee]").each(function(){
$("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
$(".indicator:first").addClass("indicator-on");
});
$("a[id^=indicator]").click(function(e){
var index = $("a[id^=indicator]").index(this);
//alert(index);
$("div[id=marquee]").hide();
$("div[id=marquee]").eq(index).show();
$("a[id=indicator]").removeClass("indicator-on");
$("a[id=indicator]").eq(index).addClass("indicator-on");
stopTimer();
intID = startTimer();
e.preventDefault();
});
$("a[id=indicator], div[id=marquee]").mouseenter(function(){
stopTimer();
//alert("mouseenter");
}).mouseleave(function(){
stopTimer();
intID = startTimer();
//alert("mouseexit");
});
The easiest way to do this would be to put something in the content divs themselves that acts as a counter, i.e. in the first div put "1/3", in the next "2/3", etc. That method, of course, would have the disadvantage of not being very responsive to change. A better option is to keep a separate variable that keeps track of which element is visible, then when the "next" button is clicked, the variable is incremented, then a check is run to see if that index exists. If not, you loop back the beginning. The opposite, of course, with the previous button.

Categories