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");
});
});
Related
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);
});
});
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.
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);
});
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..
})
});
I have a link that posts to a url (ajax). Then I want to hide the entire li.
HTML
<li>Product Name Delete</li>
JQUERY
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
$.post(link, function() {
$(this).parent().slideUp();
return false;
});
event.preventDefault();
});
});
The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won't work. You can easily fix this by saving a reference to the li-element outside the success-handler:
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
var li = $(this).parent();
$.post(link, function() {
li.slideUp();
return false;
});
event.preventDefault();
});
});