Delay a link click - javascript

Here's the fiddle I'm working with: http://jsfiddle.net/Scd9b/
How can I delay the href function after the click?
For example a user clicks on the link, the message slides down One moment... and after 2 seconds the user continues to the page its linked to.
Sorry everybody forgot to mention there are some anchors that are not linked.

You can simulate navigating to a page by settings window.location. So we will block the normal function of the link with preventDefault and then in a setTimeout, we will set the correct window.location:
https://codepen.io/anon/pen/PePLbv
$("a.question[href]").click(function(e){
e.preventDefault();
if (this.href) {
var target = this.href;
setTimeout(function(){
window.location = target;
}, 2000);
}
});

Check this fiddle: http://jsfiddle.net/C87wM/1/
Modify your toggle like this:
$("a.question[href]").click(function(){
var self = $(this);
self.toggleClass("active").next().slideToggle(2000, function() {
window.location.href = self.attr('href'); // go to href after the slide animation completes
});
return false; // And also make sure you return false from your click handler.
});

Cancel the click and use setTimeout to change the location.
$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
$(this).toggleClass("active").next().slideToggle("slow");
e.preventDefault();
var loc = this.href;
if(loc){
window.setTimeout( function(){ window.location.href=loc; }, 2000 );
}
});
});

$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
var Link = $(this).attr("href");
setTimeout(function()
{
window.location.href = Link;
},2000);
});
});

Prevent the default action of the link, first of all. Then add a timeout of 2 seconds, after which the page is redirected to the url found in the href attribute of the link.
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout(function(){
location.href = $(this).prop("href");
}, 2000);
});
Example.

How about e.preventDefault in your click handler. Then do a setTimeout that takes you to your destination?
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout('window.location.href=' + $(this).attr(href), 2000);
});

This should do it:
$("a[href]").click(function () {
var url = this.href;
setTimeout(function () {
location.href = url;
}, 2000);
return false;
});

Setting window location didn't sound like a good idea to me, So here's what I did
On click it checks whether the user clicked the link if yes it waits 2 seconds then triggers the click again and since it's not user-triggered it doesn't wait this time
document.getElementById("question").addEventListener("click", function(e) {
//if user clicked prevent default and trigger after 2 seconds
if(e.isTrusted) {
e.preventDefault();
//after 2 seconds click it and it'll not wait since it's not user triggered
setTimeout(function() {
e.target.click();
}, 2000);
}
});
Bing

Related

How can I redirect to the attached href in html via jQuery?

I want to redirect my website to the attached href thats in the code by jQuery. Because I first want to have an animation playing.
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
$('.preload').addClass('preload-loading')
setTimeout(function(){
url = location.href;
$( location ).attr("href", url); <<-- I WANT TO REDIRECT TO THE PAGE THATS IN THE HREF IN THE HTML
}, 500);
});
});
Use window.location.href:
window.location.href = $(event.target).attr("href");
See below code may be, its help to you
$(document).ready(function(){
$("a").click(function(event){
var url = $(this).attr('href');
event.preventDefault();
$('.preload').addClass('preload-loading')
setTimeout(function(){
window.location.href = url; // REDIRECT
}, 500);
});
});

How to make a Href link wait

I want to make a Clickable button, which waits 10 seconds to load the linked page.
I was wondering if it also needs Href for it ?
If anyone know's how please help me out.
As you have tagged Javascript and not jQuery....
Something like
JavaScript:
function loadUrl(){
window.location.href = "http://www.google.com";
}
Link:
Click My Link
OR
JavaScript:
function delayUrlLoad(url, mils)
{
setTimeout(function() {
window.location.href = url;
}, mils)
}
Link:
Click Here
How about?
HTML:
<button id="yourbutton" href="https://www.google.com">
Click Me
</button>
jQuery/JS:
$( "#yourbutton" ).on( "click", function(event) {
var url = $(this).attr('href');
setTimeout("loadPage(url)", 10000);
event.preventDefault();
});
function loadPage(url){
window.location.href = url;
}
FIDDLE (it wont load the new page in JSFiddle as it is sandboxed, but if you check console, it is indeed attempting to load the page after the timeout).
You'll need to include jQuery to run this code, but this is the idea
Click Me
$("a").on("click", function (event) {
event.preventDefault();
var timeout = setTimeout(function () {
var url = $(this).attr("href");
location.replace(url);
}, 10000);
});
This way:
HTML
<span id="link" data-href="http://www.google.it">click here</span>
JS
$('#link').on('click', function() {
setTimeout(function() {
location.href = $('#link').attr('data-href');
}, 10000);
});

preventDefault() on a timer

Does anyone know if there's a way to preventDefault(), but on a timer, so default actions are restored after a certain time?
Here's what I have so far:
function setResetInterval(bool){
var el = $('article');
if(bool){
timer = setInterval(function(){
setTimeout(function(){
console.log('default prevented');
e.preventDefault();
}, 500);
},1000);
}else{
clearInterval(timer);
}
}
if(object.touch.touch){
object.header.menu_button.attr('href',null);
object.touch.articles = $('article');
object.content_blocks.on('click','article',{},function(e){
object.touch.articles.removeClass('on');
$(this).addClass('on');
e.stopPropagation();
setResetInterval(true);
setTimeout(
function() { setResetInterval(false); }, 500);
});
}
Problem is, the function is called after the clickthrough and the action is not prevented. The alternative is the prevent the default action on click, which stop scrolling on mobile devices.
Thinking about it more clearly, the real problem is the click tag in question is basically the entire screen width on mobile.
To build on what Cayce said, one way to approach this is to tie the functionality to a class you later remove.
Demo Fiddle:
In the example, the default will be prevented as long as the div has the .red class, the setTimeout will remove the class after 3 seconds.
JS:
$('body').on('click', '.red', function (e) {
e.preventDefault();
console.log('I only show up while default is prevented');
});
$('body').on('click', 'div', function () {
console.log('I will always show up');
});
setTimeout(function () {
$('div').removeClass('red');
},3000);

JQuery Fancybox open delay

I have a fancybox for displaying photos and descriptions of them.
Now it opens fancybox on mouseenter event. It works perfectly with this code:
$('.fancy_link').live('mouseenter', mouseEnter);
function mouseEnter()
{
jQuery(this).fancybox().trigger('click');
return false;
}
But i need to set delay for opening fancybox. How it should work: User moves cursor over a link, after 1 second fancybox should open and display content. If user moves mouse away before waiting 1 second, fancybox should not open.
I have tried JQuery delay() and setTimeout() but both of them are not working properly.
One sec. delay just ignored by both methods.
use setTimeout/clearTimeout...
//binding code...
$('.fancy_link').on('mouseenter',mouseEnter);
$('.fancy_link').on('mouseleave', mouseLeave);
//run when the mouse hovers over the item
function mouseEnter() {
//clear any previous timer
clearTimeout($(this).data('h_hover'));
//get a reference to the current item, for the setTimeout callback
var that = this;
//set a timer, and save the reference to g_hover
var h_hover = setTimeout(function(){
//timer timed out - click the item being hovered
$(that).click();
}, 1000);
//save the reference - attached to the item - for clearing
// data is a generic "store", it isn't saved to the tag in the dom.
// note: if you have a data-* attribute it is readable via data()
$(this).data('h_hover',h_hover)
}
//handler for when the mouse leaves the item
function mouseLeave() {
//clear the previously set timeout
clearTimeout($(this).data('h_hover'));
}
this could help you
function openFancybox() {
setTimeout( function() {$('#fancy_link').trigger('click'); },1000);
}
I imagine you will need to use setTimeout and clearTimeout
Something along these lines:
var timer;
$('.fancy_link').mouseenter(function(){
var $this = $(this);
timer = setTimeout(function(){
$this.fancybox().trigger('click');
}, 1000);
}).mouseleave(function(){
clearTimeout(timer);
});
Try this solution:
var timer = null;
$('.fancy_link').on('mouseenter', function() {
timer = setTimeout(mouseEnter, 1000);
});
// clear timer when mouse leaves
$('.fancy_link').on('mouseleave', function() {
clearTimeout(timer);
});

How to block/shut down click action for 1 second

I have some problem, i need to block/shut down some click action for some little time. What i'm trying to do is fire all actions after my click, but block this click when this actions is under procesing. So this is my code, thx for help:
carousel_controls_buttons.live('click', function(e){
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
carousel_controls_buttons.removeAttr('disabled');
}, 450);
});
I am presuming you are wanting something like this:
$(document).ready(function () {
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
carousel_controls_buttons.removeAttr('disabled');
}, 1000);
carousel_controls_buttons.live('click', function(e){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
});
});

Categories