Develop Reference

Adding Delay to title change on Blur JQuery

I'm looking to add a few seconds delay before the title change but can't seem to get it to work. I believe it involves 'setTimeout', but can't quite figure it out.
$(function() {
var pageTitle = $('title').text();
$(window).blur(function () {
$('title').text(`WAIT! COME BACK! ${pageTitle}`)
});
$(window).focus(function() {
$('title').text(pageTitle);
});
});

$(function() {
var pageTitle = $('title').text();
$(window).blur(function() {
setTimeout(function() {
$('title').text(`WAIT! COME BACK! ${pageTitle}`);
}, 3000);
});
$(window).focus(function() {
setTimeout(function() {
$('title').text(pageTitle);
}, 3000);
});
});

Try using the delay() function:
$(function() {
var pageTitle = $('title').text();
$(window).delay(800).blur(function () {
$('title').text(`WAIT! COME BACK! ${pageTitle}`)
});
$(window).focus(function() {
$('title').text(pageTitle);
});
});

clearInterval() not working javascript

I have the following code. This is what I tried to clear the interval, but it didn't work. Kindly help me.
$(document).ready(function(){
var intervalId;
$(window).focus(function(){
var intervalId = setInterval(function(){
console.log('working');
}, 5000);
});
$(window).blur(function(){
clearInterval(intervalId);
});
});

Do not redeclare intervalId, then it becomes a local scope to the focus function:
$(window).focus(function() {
intervalId = setInterval(function() {
console.log('working');
}, 5000);
});
Consider this part:
$(document).ready(function() {
var intervalId;
$(window).focus(function() {
// intervalId is not the same as the `window.intervalId`
// The scope changes.
var intervalId = setInterval(function() {
//------^^^---------- Remove this var.
});
});
});

Run a function after each function

For some reason, I can't get a function to run after the each function is complete. This is what I tried and the each function works perfectly but it does not run the other function when it is complete.
var delay = 0;
$('h1 span').each(function() {
var $span = $(this);
setTimeout(function() { $span.addClass('visible'); }, delay+=1000, function(){
$('header').addClass('visible');
});
});

If i understand your expected behaviour, you can use following logic inside delayed function:
var delay = 0;
$('h1 span').each(function () {
var $span = $(this);
setTimeout(function () {
$span.addClass('visible');
// if $span is last of 'h1 span' matched set
if ($span.is($('h1 span').last())) {
$('header').addClass('visible');
}
}, delay += 1000);
});
-DEMO-

I think what you want to do is this http://jsfiddle.net/gon250/8mdodywe/
setTimeout() function doesn't support two callbacks.
$.when($('span').each(function() {
$(this).addClass('visible');
})).then(function(){
$('header').addClass('visible');
});

I guess that's what you want:
var delay = 0;
$('h1 span').each(function() {
var $span = $(this);
setTimeout(function() { $span.addClass('visible'); }, delay+=1000);
});
setTimeout(function() { $('header').addClass('visible'); }, delay);
Check it out: http://jsfiddle.net/zsm4xegr/

I'm assuming, you want two timeouts? From your Code it seems you would like to execute the first timeout after "delay 0". In that case simply execute the first "callback" and set a timout for the second.
If you do indeed want two timeouts (each after 1000ms):
$('h1 span').each(function() {
var $span = $(this);
setTimeout(
function() {
$span.addClass('visible');
setTimeout(
function() {
$('header').addClass('visible');
},
1000
);
},
1000
);
});

Jquery stop animation on mouseover

A bit of JQuery taken from http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ which should give a nice old-twitter style notification.
How do I edit the code below to stop the div hiding on a mouseover?
UPDATE: I still want the div to slideup after the mouseover has finished.
$(function () {
var $alert = $('#alert');
if($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 5000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});

If I'm understanding correctly (which I'm probably not), you want something like this:
var alerttimer, alertBox = $('#alert');
function resetTimeout() {
if (alerttimer) {
clearTimeout(alerttimer);
}
alerttimer = setTimeout(function() {
alertBox.trigger('click');
}, 5000);
}
$(function () {
if(alertBox.length) {
resetTimeout();
alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function () {
window.clearTimeout(alerttimer);
alertBox.animate({ height: '0px' }, 200);
}).mouseover(function () {
clearTimeout(alerttimer);
}).mouseout(function () {
resetTimeout();
});
}
});
It's important to note that the above is very much untested.

How can I listen for a click-and-hold in jQuery?

I want to be able to fire an event when a user clicks on a button, then holds that click down for 1000 to 1500 ms.
Is there jQuery core functionality or a plugin that already enables this?
Should I roll my own? Where should I start?

var timeoutId = 0;
$('#myElement').on('mousedown', function() {
timeoutId = setTimeout(myFunction, 1000);
}).on('mouseup mouseleave', function() {
clearTimeout(timeoutId);
});
Edit: correction per AndyE...thanks!
Edit 2: using bind now for two events with same handler per gnarf

Aircoded (but tested on this fiddle)
(function($) {
function startTrigger(e) {
var $elem = $(this);
$elem.data('mouseheld_timeout', setTimeout(function() {
$elem.trigger('mouseheld');
}, e.data));
}
function stopTrigger() {
var $elem = $(this);
clearTimeout($elem.data('mouseheld_timeout'));
}
var mouseheld = $.event.special.mouseheld = {
setup: function(data) {
// the first binding of a mouseheld event on an element will trigger this
// lets bind our event handlers
var $this = $(this);
$this.bind('mousedown', +data || mouseheld.time, startTrigger);
$this.bind('mouseleave mouseup', stopTrigger);
},
teardown: function() {
var $this = $(this);
$this.unbind('mousedown', startTrigger);
$this.unbind('mouseleave mouseup', stopTrigger);
},
time: 750 // default to 750ms
};
})(jQuery);
// usage
$("div").bind('mouseheld', function(e) {
console.log('Held', e);
})

I made a simple JQuery plugin for this if anyone is interested.
http://plugins.jquery.com/pressAndHold/

Presumably you could kick off a setTimeout call in mousedown, and then cancel it in mouseup (if mouseup happens before your timeout completes).
However, looks like there is a plugin: longclick.

var _timeoutId = 0;
var _startHoldEvent = function(e) {
_timeoutId = setInterval(function() {
myFunction.call(e.target);
}, 1000);
};
var _stopHoldEvent = function() {
clearInterval(_timeoutId );
};
$('#myElement').on('mousedown', _startHoldEvent).on('mouseup mouseleave', _stopHoldEvent);

Here's my current implementation:
$.liveClickHold = function(selector, fn) {
$(selector).live("mousedown", function(evt) {
var $this = $(this).data("mousedown", true);
setTimeout(function() {
if ($this.data("mousedown") === true) {
fn(evt);
}
}, 500);
});
$(selector).live("mouseup", function(evt) {
$(this).data("mousedown", false);
});
}

I wrote some code to make it easy
//Add custom event listener
$(':root').on('mousedown', '*', function() {
var el = $(this),
events = $._data(this, 'events');
if (events && events.clickHold) {
el.data(
'clickHoldTimer',
setTimeout(
function() {
el.trigger('clickHold')
},
el.data('clickHoldTimeout')
)
);
}
}).on('mouseup mouseleave mousemove', '*', function() {
clearTimeout($(this).data('clickHoldTimer'));
});
//Attach it to the element
$('#HoldListener').data('clickHoldTimeout', 2000); //Time to hold
$('#HoldListener').on('clickHold', function() {
console.log('Worked!');
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<img src="http://lorempixel.com/400/200/" id="HoldListener">
See on JSFiddle
Now you need just to set the time of holding and add clickHold event on your element

Try this:
var thumbnailHold;
$(".image_thumb").mousedown(function() {
thumbnailHold = setTimeout(function(){
checkboxOn(); // Your action Here
} , 1000);
return false;
});
$(".image_thumb").mouseup(function() {
clearTimeout(thumbnailHold);
});