Develop Reference

Open subpage with delay

I'm making a web page for my self. I have a welcome screen with big background wallpaper and just one link that you have to click to get to the index page. I have a sound on welcome page that plays when link is clicked, but as soon as the link is clicked it opens index page so the sound is not even heard. I want to make few seconds delay after the link is clicked so that the sound can play first to the end.
My jsfiddle http://jsfiddle.net/cs6yqawr/.
$('a[href*="/*html"]').each(function() {
$(this).on('click', function(event) {
event.preventDefault();
(function(h) {
setTimeout(function() {
window.location = h;
}, 5000);
})(this.href);
});
});
Tried this code but I can't get it working.
Any suggestions?

Tried and it'll play music before to new page.
$('.big-btn').click(function(e) {
e.preventDefault();
console.log(this);
var embed = $('<embed src="Kalimba.mp3" hidden="true">');
embed.appendTo($('#embed'));
embed.ready(function () {
setTimeout(function() {
window.location = 'index.html';
}, 2000);
});
});
You should replace my test mp3, target location, and delay ms for your usage.

I think it's just the selector on your event handler. Try:
$(document).on('click', 'a', function(event) {
event.preventDefault();
setTimeout(function(h) {
window.location = h;
}, 5000, this.href);
});
Or ideally just give the link an id and bind the handler to that.

Delay Javascript hover action

I have an image on my site that has a jquery hover action assigned to it. But it's easy to accidentally mouse over that area, and if you do it more than once, the hover keeps appearing, disappearing, appearing, etc, until it's shown and disappeared once for every time you moused over it. Is there a way to make it so the action doesn't fire unless you hover for a few seconds? I don't want to just delay the action, because it would still happen for every mouseover, I want to see if there's a way the mouseover doesn't count unless you're on the image for a few seconds.
Script so far:
$("img.badge").hover(
function() {
$("h3.better").animate({"left": "125px"}, 1200);
},
function() {
$("h3.better").animate({"left": "-500px"}, 800);
});

You could use setTimeout to launch the action and bind a function calling clearTimeout on the mouseout event :
$('img.badge').hover(function(){
window.mytimeout = setTimeout(function(){
$("h3.better").animate({"left": "125px"}, 1200);
}, 2000);
}, function(){
clearTimeout(window.mytimeout);
});
Or you could use a plugin for that, like hoverintent.

Use a .stop() before animate, to cancel the previous animation. I believe this is what you are looking for, and will solve your current problem.
$("img.badge").hover(
function() {
$("h3.better").stop().animate({"left": "125px"}, 1200);
},
function() {
$("h3.better").stop().animate({"left": "-500px"}, 800);
});

You can use a timer to not fire the hover action until you've been hovered a certain amount of time like this and then, if the hover leaves before the timer fires, you clear the timer so nothing happens if you're only hovered a short period of time:
$("img.badge").hover(function() {
var timer = $(this).data("hover");
// if no timer set, set one otherwise if timer is already set, do nothing
if (!timer) {
// set timer that will fire the hover action after 2 seconds
timer = setTimeout(function() {
$("h3.better").stop(true).animate({"left": "125px"}, 1200);
$(this).data("hover", null);
}, 2000);
// save timer
$(this).data("hover", timer);
}
}, function() {
var timer = $(this).data("hover");
if (timer) {
clearTimeout(timer);
$(this).data("hover", null);
} else {
// probably would be better to make this an absolute position rather
// than a relative position
$("h3.better").stop(true).animate({"left": "-500px"}, 800);
}
});
Note: I also added .stop(true) to your animation so animations will never pile up.

Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!

http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});

Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});

Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});

Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.

jquery redirect on click or after 10 seconds

I have a spash screen on a website that has a div with the ID of "splash" i'm trying to make the div fade in then if the user clicks on the div it fades out and redircts to the main site. If the user dosen't click it just fades out and redirects after 10 seconds.
The timed redirect is working but not the click function.
<script type="text/javascript">
$(document).ready(function() {
$('#splash').hide();
$('#splash').fadeIn(1000, function() {
$(this).delay(10000).fadeOut(1000, function() {
window.location = 'http://www.examle.com'; });
$(this).click().fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
});
</script>
Any help would be great

Try this:
$(document).ready(function() {
$('#splash').hide();
$('#splash').click(function(){
$(this).fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
$('#splash').fadeIn(1000, function() {
window.setTimeout ( function() {
$('#splash').fadeOut(1000, function() {
window.location = 'http://www.example.com'; }) }
, 10000);
});
});​
Changes that I've made to the example:
I've moved setting the click handler outside the fadeOut function (better practice, IMHO) and I've changed your call to delay() to a setTimeout().
The difference is, delay() will not allow other jQuery code to be executed in the background, while setTimeout() will.

stop the animation jQ

ive got the problem that i dont know how to stop my function with mouseover and restart it with mouseout
first here is my test-code:
<script type="text/javascript">
function fadeEngine(x) {
var total_divs=3; //setze hier die nummer der gewollten divs
var y=x;
if(x==total_divs) y=1; else y++;
$("#fade"+x).css("display","none");
$("#fade"+y).fadeIn("slow");
setTimeout('fadeEngine('+y+')',3000); //modifi alle 3000 miliseconds nen neuen div
}
fadeEngine(0); //Initialisation des Scripts
</script>
<script type="text/javascript">
$(document).ready(function(){
/*
$("#container").hover(function(){
stop('mouse over');
},function(){
alert('mouse out');
});
*/
/*
$("#container").hover(function()
{
$(this).stop().fadeTo("slow", 1.00);
},
function()
{
$(this).stop().fadeTo("fast", 0.50);
});
*/
});
</script>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:#afafaf;color:#red;">
<div id="fade1">Content one</div>
<div id="fade2" style="display:none">Content two</div>
<div id="fade3" style="display:none">Content three</div>
</div>
<div class="blocker"> </div>
</body>
</html>
How i can do this to stop my function fadeEngine if im go over the contentdiv and start it if im move out of the div?
thanks a lot for help

Give all of your #fadeX elements a class (say .faders) and then use:
$('.faders').stop();
Or give the container div an id like #faderbox and say:
$('#faderbox div').stop();

I'm not sure exactly what you want to happen with regards to your fadeIn and fadeOut effects in your fadeEngine, however, I can give you two pieces of advice:
You can use the jQuery effect stop() to stop all current jQuery animations on selected elements. For example:
$("#fade"+y).stop();
Will stop the fading animation for that element in its current state. You can then reset the CSS if you wish.
To stop a function from being called that you previously queued with setTimeout, you must obtain the return value and call clearTimeout(). For example:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
This will clear the pending timeout event and prevent it from occurring.

If it's simply a case of attaching the animation to the mouse over bevahiour etc try this :
$(this).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// (we're using chaining) now animate
this.animate({
//some animation stuff
}, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
this.animate({
//some animation stuff
}, function () {
// once the animate is complete, set the tracker variables
shown = false;
});
}, hideDelay);
});

Try applying the stop behaviour to each element that requires it e.g.
$('.faders').each(function () {
$(this).mouseover(function () {
$(this).stop();
});
});