We Keep Coding

JS variables getting "stuck" on new page with turbolinks

First, let me apologize for the complexity of this question, I can't really break it down more simply as the complexity might be part of the cause. But this logic makes the active link for the page light up and flicker.
Using turbolinks, on the first page everything works fine, but when we switch to another page, things start going haywire. The link that previously had the class of active from the previous page will still be saying its passed in argument of active is true, even though it no longer has a class of active.
With turbolinks disabled, everything works as expected.
function flicker(elem, active) {
var delay = Math.random() * (2000) + 130;
console.log($(elem).data('name') + ": " + active + ': ' + $(elem).hasClass('active'));
if (active == true) {
// We need specific timers for each link so each can operate with its own
// separate "thread" and be toggled independently of the others.
// Using window['foo'] to handle dynamic variable names.
window['timer-' + $(elem).data('name')] = setTimeout(function() {
window.setTimeout(function() {
$(elem).addClass('powered');
}, 20) // Controls length of flicker.
flicker(elem, true);
$(elem).removeClass('powered');
}, delay);
} else {
clearTimeout(window['timer-' + $(elem).data('name')]);
}
};
$(document).on('turbolinks:load', function() {
// Initiate the current, active link.
$('.navbar a.active').each(function() {
window['timer-' + $(this).data('name')]; // Instantiating dynamic variable.
flicker($(this), $(this).hasClass('active'));
});
});
Stay with me. So where I have the console log on line 3, on the first page, that will output as expected. For example:
nav-1: true: true
will repeatedly get output with each flicker, indicating that the first link active argument from line 1 is true and that it has a class of true.
But if I click on the second link to go to the next page, then console will repeatedly log:
nav-1: true: true
nav-2: true: true
Even though, in this case, nav-1 does not have a class of active.

Turns out, I was able to fix this just by resetting all flickering effects on page load.
$('.navbar a').each(function() {
flicker($(this), false);
});
Works with turbolinks now.

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/

JavaScript Text Transition

I am attempting to make a slideshow out of text, wherein one piece of text fades out, and another fades in, and so on. I have it working for the most part, but there is a small issue.
When the page is first loaded, all of the pieces of text are displayed at once. Each one fades in turn, and once they have all faded once they function as I want. I have used:
(function langFade() {
var lang = $('.lang, .first');
var langIndex = -1;
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
as described here, but this is causing the problem described above. I've attempted using CSS to hide all but the first piece of text when the site is loaded, but this isn't doing the trick. My suspicion is that the issue is with the HTML - it is rather different to the demo. I have created a fiddle to demonstrate what I mean.
Is there any way of fixing this, either through modifying the JavaScript, or the HTML?

Try to hide the others at first with .not(':eq(0)').hide()
(function langFade() {
var lang = $('.lang, .first'),
langIndex = -1;
lang.not(':eq(0)').hide();
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
Can also use .not(':first').hide() which may be a little easier to read.

Just hide them initially. And this can be done in pure CSS. Add following class:
h2.first, h2.lang {
display: none
}
Demo: http://jsfiddle.net/XbWJS/2/

Fixing Javascript animation timings in inactive tabs with real time fix

So I have a fiddle with two pulsing animations running at different times.
http://jsfiddle.net/JuFxn/16/
The code for the pulse is here. There is more in the fiddle so please check it out.
function fadeItIn() {
var child;
child = 4;
setTimeout(fadeIn, 3000);
function fadeIn() {
$("#child" + child).fadeIn(175);
--child;
if (child >= 0) {
// Continue fading in
setTimeout(fadeIn, 175);
} else {
// Start fading out
++child;
setTimeout(fadeOut, 175);
}
}
function fadeOut() {
$("#child" + child).fadeOut(175);
++child;
if (child <= 4) {
// Continue fading out
setTimeout(fadeOut, 175);
} else {
// Start over again
setTimeout(fadeIn, 3000 - 1575);
}
}
}
The issue I'm having is that when the tab becomes inactive, the timings of the two pulses desync and go off pretty far from each other. I did some research and found this
How can I make setInterval also work when a tab is inactive in Chrome?
They seem to fix the problem by implementing a real world counter in and adding the value of the counter during each cycle and having the div move based on the distance generated by the counter. Would implementing something like that fix the problem I am having? How would I even use it? I think the problem is arising from the use of the setTimeout on the second function.
setTimeout(fadeItInDoom, 500);
If I take out the setTimeout and make it so the two pulses execute at the same time, the timings never go off.

So I ended up figuring out a fix to make it stay in sync.
http://jsfiddle.net/bwCmk/
I changed the animation code entirely so that it is running in jQuery. The fix however comes in how I dealt with changing to the next animation. I just made a different function for each pulsing element and had the next one called at the end of the previous function. So:
FunctionA {
code
functionB();
}
FunctionB {
code
functionC();
}
etc
it worked. Just putting this up so that if anyone else makes something along these lines, they can find a fix for it. Thanks to everyone who answered.

Can't see problem in JS

I want that when mouse is over an image, an event should be triggered ONCE, and it should be triggered again only after mouse is out of that image and back again, and also at least 2 seconds passed.
If I leave my mouse over the image,it gets called like every milisecond,and by the logic of my function once you hover on the variable 'canhover' becomes 0 until you move mouse out
This code seems to have a bug and I cant see it. I need a new pair of eyes, but the algorithm is kinda logical
Working code :
<script type="text/javascript">
var timeok = 1;
function redotimeok() {
timeok = 1;
}
//
function onmenter()
{
if (timeok == 1)
{
enter();
timeok = 0;
}
}
//
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}
//
$('#cashrefresh').hover(onmenter,onmleave);
function enter(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}
function leave(){
$("#cashrefresh").attr("src","images/reficon.png");
}
</script>

I don't know if this will solve your entire problem (since we don't have a detailed description of what it is), but instead of:
$('#cashrefresh').hover(onmenter(),onmleave());
try:
$('#cashrefresh').hover(onmenter,onmleave);
And the same thing here:
setTimeout(redotimeok, 2000); // just the function name
Also, I don't see where you ever set timeok to zero. Do you mean to set timeok = 0 in onmenter()?

There are two methods in jquery for your problem:
.mouseenter() and .mouseleave()
Check out the demos there.
EDIT:
I thought hover was for mouseover and mouseout, sorry for confusion.
I checked your code again. And it seems that you're changing the image when mouse gets over the image, which forces browser to load the new image and the old image disappears for a very little while till the new one appears and i think this must be triggering both handlers continuosly and you're getting this behaviour.
Try not to change the source of the image, comment out that line and instead console.log("some message") there and see if the message is repeated as much as .load() was fired before.
Hope this helps.

Try changing onmleave function as follows:
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}