We Keep Coding

How can i clearInterval from a popup window

SOLUTION: (Can't post a solution on my own question for some reason...)
I found a solution to my problem by creating a function in my index file which I then called from my popup window.
index:
function clearRefreshStatusInterval() {
clearInterval(refreshStatusInterval);
refreshStatusInterval = setInterval(function(){
console.log("REFRESH");
},1000);
}
popup:
$(window).mousemove(function() {
window.opener.clearRefreshStatusInterval();
});
QUESTION:
I am trying to clear a setInterval-timer from mousemovement in a popup window. It works well in the index file.
This code is in my index file (does work):
var refreshStatusInterval = setInterval(function(){
refreshStatus();
},10000);
$(window).mousemove(function() {
clearInterval(refreshStatusInterval);
refreshStatusInterval = setInterval(function(){
refreshStatus();
},10000);
});
This code is in my popup window (does not work):
$(window).mousemove(function() {
window.opener.clearInterval(window.opener.refreshStatusInterval);
window.opener.refreshStatusInterval = window.opener.setInterval(function(){
window.opener.refreshStatus();
},10000);
});
The timer wont reset for me, anyone know how to do this?

jQuery fade in and fade out loop issue

I am making a results screen which toggles between showing the user their best time/score and their latest time/score. I found a solution using this site but after leaving the website open for a few hours I saw that the timings had gone out of sync. I know that this is hard to test so I thought I would see if any experts on here could help me to optimize or fix my code.
CODEPEN
JSFIDDLE
JS
$(document).ready(function() {
setInterval( function() { resultsTransition(); }, 4000);
function resultsTransition() {
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
}
});

I think your design could be improved (and the out-of-sync problem solved) by simply toggling the opacity of the elements in your resultsTransition method instead of starting a new sequence, which could interfere unpredictably with the interval.
Something like:
var latestTransitionElementVisible = true; //the initial state of your elements
setInterval(resultsTransition, 4000); //note you can just pass the function name
function resultsTransition() {
$('.latest-transition').fadeTo(500, latestTransitionElementVisible ? 0 : 1);
$('.best-transition').fadeTo(500, latestTransitionElementVisible ? 1 : 0);
latestTransitionElementVisible = !latestTransitionElementVisible ;
}

I guess whatever problem/issue you are facing is because of varying animation times .Try the following:
$(document).ready(function() {
setTimeout( function() { resultsTransition(); }, 4000);
function resultsTransition() {
if(!$('.latest-transition').is(':animated') && !$('.best-transition').is(':animated'))
{
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
setTimeout( function() { resultsTransition(); }, 4000);
}
}
});

Automate Exploding Text Jquery Jsfiddle

http://jsfiddle.net/doktormolle/dNXVx/
How can I make this animate automatically?
I'm new to all this so any help is much appreciated!
function fx(o)
{
var $o=$(o);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('position','relative');
$('span',$o).stop().css({position:'relative',
opacity:0,
fontSize:84,
top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
}).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}​

I think you want the animate function to be called without click.. if that is the case you can call the function directly or use a timer for an effect. See below,
Change the span like below,
<span id="animateMe">click here</span>
And this script below the fx inside document ready,
Direct Call:
$(function() {
fx('#animateMe');
});
Timer (after 2 secs)
$(function() {
setTimeout(function () {
fx('#animateMe');
}, 2000); //2000 milli seconds = 2 secs
});
http://jsfiddle.net/dNXVx/483/

Timer Reset Function Not Working!

Hello Guys!
I have been trying to create a simple sample code for my newest jQuery Plugin, but it doesn't seems to be working at all! Can anyone tell where I'm going wrong?, or can anyone provide me a new function to do it. So my problem is that when I mouse over an element classed trigger an another element classed eg should fadeIn(); but if the user takes out the mouse before the element classed eg fades in it should not be fading in anymore, but this is not working at all. I don't not what is getting wrong? Please help me out. (Below is my Problem HTML nad Jquery Code!)
HTML CODE
<div class="trigger">MouseOverMe</div>
<div class="eg">See Me!</div>
JQUERY CODE
function timereset(a)
{
var elem = $('.'+a);
if(elem.data('delay')) { clearTimeout(elem.data('delay')); }
}
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
$('div.eg').delay(1000).fadeIn();
});
$('div.trigger').mouseout(function () {
timereset('eg');
$('div.eg').fadeOut();
});
});
THANKS IN ADVANCE

You don't need that timereset stuff, simply call stop() on the object and the previous effect will stop:
http://api.jquery.com/stop/
Update based on the new comment:
$('div.trigger').mouseout(function () {
$('div.eg').stop().hide();
});

jQuery
$('.trigger').hover(function() {
$('.eg').delay(1000).fadeIn();
}, function() {
$('.eg').stop(true, true).hide();
});
Fiddle: http://jsfiddle.net/UJBjg/1

Another option would be to clear the queued functions like:
$('div.trigger').mouseout(function () {
$('div.eg').queue('fx', []);
$('div.eg').fadeOut();
});
Bear in mind if the fadeOut/In has already started by using stop you could end up with a semi-transparent element.
EDIT
Here's an example: http://jsfiddle.net/Qchqc/

var timer = -1;
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
timer = window.setTimeout("$('div.eg').fadeIn(function() { timer = -1; });",1000);
});
$('div.trigger').mouseout(function () {
if(timer != -1)
window.clearTimeout(timer);
$('div.eg').fadeOut();
});
});

jquery event once all images are loaded (including cached images)?

I have the following function which is for ajaxing in a page and the showing it only once all the images are loaded:
$.get('target-page.php', function(data){
var $live = $('#preview_temp_holder').html(data);
var imgCount = $live.find('img').length;
$('img',$live).load(function(){
imgCount--;
if (imgCount==0){
//DO STUFF HERE ONCE ALL IMAGES ARE LOADED
$('#preview_pane').html($live.children()).fadeIn(800);
$live.children().remove();
}
});
});
The problem comes with cached images not firing the .load() event and thus not decrementing the imgCount.
I know i need to implement Nick Craver's solution but am not sure how. Can anyone help me?

I spent a long time looking for solutions for this. The plugin suggested on the jQuery API page (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) did not work in firefox.
My solution was to loop through each image and only add the load event if it was not already loaded (i.e. cached by the browser). The code below includes a counter that I was using to check that load events were only firing for images not already in the cache:
$(document).ready(function () {
var images = $("img.lazy");
$(".image-wrapper").addClass("loading");
var loadedCount = 0;
images
.hide()
.each(function () {
if (!this.complete) {
$(this).load(function () {
loadedCount++;
console.log(loadedCount);
displayImage(this);
});
}
else {
displayImage(this);
}
});
});
function displayImage(img) {
$(img).fadeIn(300, function () {
$(this).parents(".image_wrapper").removeClass("loading");
});
}
I'm no javascript expert so if you spot any problems with this solution please do let me know. As I say, it works in IE8, Chrome and Firefox (not sure about older versions of IE).

Ok, managed to get them merged:
$.get('target-page.php', function(data){
var $live = $('#preview_temp_holder').html(data);
var $imgs = $live.find('img')
var imgCount = $imgs.length;
$imgs.one('load', function() {
imgCount--;
if (imgCount==0){
//DO STUFF HERE
//ALL IMAGES ARE LOADED
$('#preview_pane').html($live.children()).fadeIn(800);
}
})
.each(function() {
if(this.complete){
$(this).load();
}
});
});
note: a 404-ing image would break this.

Change:
$('img',$live).one('load', function(){
...
});
And after above append:
$live.find('img').each(function() {
if(this.complete) $(this).load();
});
Generally I suggest to reuse $live.find('img') from previous count statement.