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);
});
});

Javascript code bugs other code

Is there something wrong with this code?
Because the rest of my js code only work if I delete it.
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code doesnt work when I use the one above.
<script>
var url1 = "http://192.168.1.157/wp/";
var url2 = "http://192.168.1.157/wp/parceiros";
var url3 = "http://192.168.1.157/wp/contato";
$(function(){
if (location.href==url2) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#bluecontent").offset().top }, 1500);
});
}
else {
}
if (location.href==url3) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 1500);
});
}
else {
}
});
</script>
Thanks.

I did it.
The problem is:
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code was on header, and for some reason it only works (without hurting the other js codes) when it's inserted on the page that contains #uploadBtn and #uploadFile.

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
);
});

JavaScript/jQuery tooltip function using "this"?

JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/
Was wondering if there was a way I could create a function in JavaScript, so that I'm not having to copy the mouseenter code each time I need a "More Info" tooltip. Is this even possible?
Below is the JavaScript I'm looking to condense into a function so that I don't have to copy it several times.
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
jQuery('.bspaMoreInfoText').show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
Hope this makes sense x3

You can create custom jQuery plugin for this job. This is the very natural approach in term of handling repetitive code.
$.fn.moreInfo = function() {
return this.each(function() {
var $text = $(this).next();
$(this).mouseenter(function () {
clearTimeout($text.data('timeoutId'));
$text.show(200);
})
.mouseleave(function () {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
$text.mouseenter(function () {
clearTimeout($text.data('timeoutId'));
}).mouseleave(function() {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
});
};
jQuery(document).ready(function () {
$(".bspaMoreInfo").moreInfo();
});
Demo: http://jsfiddle.net/awpnd6L1/3/

DEMO
jQuery(document).ready(function(){
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout($(this).next().data('timeoutId'));
$('.bspaMoreInfoText').hide(200);
$(this).next().show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
$(this).next().hide(200);
}, 650);
$(this).next().data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
});

Something like this ?
function MouseEnter(ctrl) {
clearTimeout($(ctrl).data('timeoutId'));
$(ctrl).show(200);
}
function MouseLeave(ctrl) {
var timeoutId = setTimeout(function(){
$(ctrl).hide(200);
}, 650);
$(ctrl).data('timeoutId', timeoutId);
}
$(".bspaMoreInfo").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave(this);
}));
$(".bspaMoreInfoText").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave($(".bspaMoreInfoText"));
}));

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.