We Keep Coding

Map data example with slider in d3

I tried to implement a basic slider function to this example
var slider = d3.slider()
.axis(false).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
temp = moment(value,"x").utc().format("MM");
console.log(temp);
//tempVal = moment(temp).unix()*1000;
dataChoro = countries.properties.filter(function(d){
return d.properties[attributeArray[temp]]
});
});
d3.select('#slider3').call(slider);
But I can't read countries. What do I have to change to make it running? I try to use the play function of this example but instead of the button playing I'd like to use the slider to trigger the events
function animateMap() {
var timer; // create timer object
d3.select('#play')
.on('click', function() { // when user clicks the play button
if(playing == false) { // if the map is currently playing
timer = setInterval(function(){ // set a JS interval
if(currentAttribute < attributeArray.length-1) {
currentAttribute +=1; // increment the current attribute counter
} else {
currentAttribute = 0; // or reset it to zero
}
sequenceMap(); // update the representation of the map
d3.select('#clock').html(attributeArray[currentAttribute]); // update the clock
}, 2000);
d3.select(this).html('stop'); // change the button label to stop
playing = true; // change the status of the animation
} else { // else if is currently playing
clearInterval(timer); // stop the animation by clearing the interval
d3.select(this).html('play'); // change the button label to play
playing = false; // change the status again
}
});
}
Gist Any tips?

When you want to use the same code of your clock you can try this
var slider = d3.slider()
.axis(false).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
temp = moment(value,"x").utc().format("MM");
if(currentAttribute < attributeArray.length-1) {
console.log(currentAttribute);
currentAttribute = temp-1; // increment the current attribute counter
} else {
currentAttribute = 0; // or reset it to zero
}
sequenceMap(); // update the representation of the map
d3.select('#clock').html(attributeArray[currentAttribute]); // update the clock
});
d3.select('#slider3').call(slider);

jQuery increment variable in recursive function

There are other questions with almost the same title as this but they don't seem to answer my question.
I am trying to make a simple javascript function that uses jQuery to fade div blocks in and out one after the other, and goes back to the first div once it get's to the end. This should continue while the user is on the page, much like a slideshow.
There are 5 'slides' or divs to be shown and hidden in sequence. They have the classes 'content1', 'content2', 'content3' etc.
$(document).ready(function() {
var slide = 1;
nextSlide(slide);
function nextSlide(slide) {
$('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);
if(slide > 5) {
slide = 1;
} else {
slide++;
}
nextSlide(slide);
};
});
This does not fade each div in and out in sequence, what it actually does is fade all of the slides in and out simultaneously.
How do I get it to reference each slides class in turn and then loop back to the first slide?
Many thanks.

Your function will recurse immediately, dispatching all of the animation requests around the same time.
To stagger them, you should recurse with a timeout:
$(document).ready(function() {
var slide = 1;
nextSlide();
function nextSlide() {
$('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);
if(slide > 5) {
slide = 1;
} else {
slide++;
}
setTimeout(nextSlide, 2000); // second param is delay in ms
};
});
This will cause the next call to occur after 2000ms. Thanks to closure, your slide variable should be captured and will persist its value between calls.

No need for a timeout. Simply call the next iteration as a callback of the last fadeTo method:
$(document).ready(function() {
var slide = 1;
nextSlide(slide);
function nextSlide(slide) {
$('.content' + slide.toString())
.fadeTo(2000, 1.0)
.delay(5000)
.fadeTo(2000, 0.0, function(){
if(slide > 5) {
slide = 1;
} else {
slide++;
}
nextSlide(slide);
});
};
});
http://jsfiddle.net/3L09b505/

How can I stop/pause a function from another function?

I have a simple jquery-ui slider which I am continuously automatically looping through values. I successfully have a button which starts the movement, but I forget how I can pause/stop the movement when another button is pressed? I know this is something really simple, but am having an absolute mind blank and google is not giving me what I want. (probably because i'm searching for the wrong wording). What can do I put in the pauseSlider function to ... pause the slider!
function scrollSlider() {
var slideValue;
slideValue = $("#slider").slider("value");
if (slideValue >= 0) {
if (slideValue == 2013) {
slideValue = -1;
}
$("#slider").slider("value", slideValue + 1);
console.log($("#slider").slider("value"));
setTimeout(scrollSlider, 1000);
}
}
$('#startSlider').click(function() {
scrollSlider();
});
$('#pauseSlider').click(function() {
//What do I put in here?
});

setTimeout returns a random number which you'll have to store in a variable and then use it to clear the setTimeout in $('#pauseSlider')'s click handler.
var id;
function scrollSlider() {
// (...) code
id = setTimeout(scrollSlider, 1000);
// (...) more code
}
$('#pauseSlider').click(function() {
clearTimeout(id);
});

HTML5 Progress Bar Pause when in another tab

My progress bar loader which i'm using to display a sorten amount of seconds while my page is loading in Javascript is having some trouble.
If i click another tab while its counting it will pause, and will only resume when you go back.
How would i go by allowing it to count even though you're in another tab
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (800/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate); $(".demo-wrapper").remove(); $("#details").fadeIn("slow"); $("#motion1").html("Report for Registration."); $("#motion").remove();
}
if (value == 1) {
$("#motion").html("Loading Page..");
}
if (value == 86) {
$("#motion").html("Connecting..");
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
Here's an example http://jsfiddle.net/w977Q/

Maybe have a look at the accepted answer here: How can I make setInterval also work when a tab is inactive in Chrome?
It appears this is basically a function of the browser not wanting to use processing power on tabs that aren't in focus.

Hope this helps you
setInterval('yourFunction();', 1000); // this will work even on other tab
and
setInterval(yourFunction, 1000); // this will run only if on current tab

onmouseover stop slideshow help

This is a function for a slideshow,onmouseover i want it to stop. Instead of stopping the slideshow onmouseover, it speeds up?? How can i correct this to stop onmouseover?
<body onload="nextslide();">
function nextslide() {
// Hide current slide
var object = document.getElementById('slide' + current); //e.g. slide1
object.style.display = 'none';
// Show next slide, if last, loop back to front
if (current == last) {
current = 1;
} else {
current++;
}
object = document.getElementById('slide' + current);
object.style.display = 'block';
var timeout = setTimeout(nextslide, 2500);
object.onmouseover = function(){
clearTimeout( timeout );
}
object.onmouseout = nextslide;
}

I tried your code and the only problem I can see is on "onmouseout" there is an immediate transition to next slide. I would change that line like this:
object.onmouseout = function() {
timeout = setTimeout(nextslide, 2500);
}
I disagree with Jared, "timeout" is defined there because you are using nested functions and inner functions have access to outer functions scope. You should never omit var when defining variables.