How to make a Href link wait - javascript

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

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 shorten this jQuery onClick FadeOut to next Page code?

I am trying to do a nice FadeOut if you click on a Link. The following Code is perfectly working.
My question is: How can I shorten these functions? Demo: Here
$(document).ready(function () {
var newLocation = '';
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
newLocation = this.href;
$('body').fadeOut(1000, changeLocation);
});
function changeLocation() {
window.location = newLocation;
}
});
Your code actually looks quite good already. You could shorten it (not necessarily better) by taking an arrow function instead of the additional function, so you can closure the link:
$(document).ready(function () {
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
$('body').fadeOut(1000, () => window.location = this.href);
});
});
You can lose the $(document).ready function by placing the JavaScript code just before closing the <body> tag. Also, you don't have to define newLocation in the upper scope, you can pass it to the changeLocation function instead:
$('a, .fadeLink').on('click', function(e) {
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
changeLocation(location);
});
});
function changeLocation(location) {
window.location = location;
}
You could also get rid of the changeLocation function:
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
window.location = location;
});
});
In the end it's a matter of preference. Keep in mind that compacter code is not always better code.

One page scrolling links dont show anker in url

What I have is this:
$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var t=$(this.hash).offset().top;$('.wrapper').animate({scrollTop:t,},1000)})});
and actually place divs everywhere as a reference such as:
<div id="about"></div>
It actually scrolls down to those reference points but I dont see the name in the url. When I scroll down and end up in the about section I want it to somehow show up like this www.site.com/#about
Any idea what I am doing wrong? The site used is a HTML document.
give a try to this
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can use Html5 History API Good tutorial for using HTML5 History API (Pushstate?)
$(document).ready(function() {
$('a[href^="#"]').on('click',function(e) {
e.preventDefault();
var t = $(this.hash).offset().top;
$('.wrapper').animate({ scrollTop:t }, 1000);
history.pushState(null, null, location.href + $(this).href); // <- not sure whether your links are relative or absolute.. do change appropriately..
})
});

Navigate to href when animation ends

So i'm trying to make a section fade out before following a link like so
<a class="fadelink" href="path/to/file">Hello</a>
<script type="text/javascript">
$("a.fadelink").click(function(e){
e.preventDefault();
$("#content").fadeTo(400,0,function(){
window.location.href = $(this).attr("href");
});
});
</script>
Problem is, jQuery keeps returning me with "undefined" and 404's the redirect.
Your $(this) in $(this).attr("href") is pointing to $("#content") which is wrong. Move it into the right scope:
$("a.fadelink").on("click", function( evt ) {
evt.preventDefault();
var goTo = $(this).attr("href"); // get href value of `this` anchor
$("#content").fadeTo(400, 0, function() {
window.location = goTo; // Now you can use it
});
});
You're referring to the wrong this. The href attribute is present on the anchor, not the #content element.
$("a.fadelink").click(function(e){
e.preventDefault();
var that = this;
$("#content").fadeTo(400,0,function(){
window.location.href = $(that).attr("href");
});
});

Delay a link click

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

Categories