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

Delay a href link for some seconds

I have a little animation which i want to show thats why i want to delay a link. Help would be nice.
echo '<td></td>';
js:
<script>
function Splash()
{
setTimeout( function()
{
}, 2000);
}
</script>

Change it to
echo '<td></td>';
and add a script
$(function() {
$('#spashlink').on('click', function(e) {
e.preventDefault();
var self = this;
setTimeout(function() {
window.location.href = self.href;
}, 2000);
});
});

Transition between html pages using jquery to load a div?

I am trying to use jQuery to create a stylish transition between HTML pages.
however, I just need to fade in and fade out the content of the html pages.
for example:
I have two pages 1.html and 2.html
they both have a DIV called #content
I need to only fadein and fade out the div content instead of the entire html page.
I am using the code bellow:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
I've tried it like this as well and it didn't do anything:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body #content').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
is this possible?
Thanks

Try this code
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('a[href], button[href]').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
Click Function
$('a[href], button[href]').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Refer this fiddle
http://jsfiddle.net/fBrYp/2/

Getting some internal link animation to work

I have this script that opens a new page and scroll down to a id
var jump = function (e) {
if (e) {
e.preventDefault();
var target = $(this).attr("href");
} else {
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
}, 2000, function () {
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function () {
$('a[href^=#]').bind("click", jump);
if (location.hash) {
setTimeout(function () {
$('html, body').scrollTop(0).show();
jump();
}, 0);
} else {
$('html, body').show();
}
});
What I wanna do is, make it animate the scroll on the current page with internal links. How do I integrate that?

The easiest way would to just use links, like this.
It doesn't require jQuery or javascript, just some elements added to your HTML using IDs as href values
<a id='exampleTop' href='#exampleMiddle'>I'm an example! Click to go down</a>

Add looping scroll to my carousel in Prototype-UI

I have a carousel that scrolls fine but when it comes to the end of the content (<li>.</li>) it just stops. I would like it to start again from the beginning.
Here is my code that I have hobbled together as not to good with JavaScript etc..
<script type="text/javascript">
function startscroll() {
x = window.setInterval(function scroll() {
hCarousel.scrollTo(hCarousel.currentIndex() + 3);
},3000);
}
function stopscroll() {
window.clearInterval(x);
}
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel", {direction: "horizontal"});
startscroll();
$('horizontal_carousel').observe('mouseover', stopscroll);
$('horizontal_carousel').observe('mouseout', startscroll);
}
Event.observe(window, "load", runTest);
</script>
Thanks for any help
Dave.

change this
$('horizontal_carousel').observe('mouseover', stopscroll);
$('horizontal_carousel').observe('mouseout', startscroll);
to
$('horizontal_carousel').onmouseover = function(){
stopscroll();
}
$('horizontal_carousel').onmouseout = function(){
startscroll();
}`