How to shorten this jQuery onClick FadeOut to next Page code? - javascript

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.

Related

history.pushstate fails browser back and forward button

I'm using jQuery to dynamically load content in a div container.
The server side code detects if the request is AJAX or GET.
I want the browsers back/forward buttons to work with the code so I try to use history.pushState. I've got to following piece of code:
$('.ajax').on('click', function(e) {
e.preventDefault();
$this = $(this);
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('');
$('#ajaxContent').load($this.attr('href'), function() {
window.history.pushState(null,"", $this.attr('href'));
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
});
Everything works fine except when browsing with the browsers back/forward button, the adress in the bar changes according to plan but the page doesn't change. What am I doing wrong?
Updated script with the help from Clayton's answer
var fnLoadPage = function(url) {
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('').load(url, function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
window.onpopstate = function(e) {
fnLoadPage.call(undefined, document.location.href);
};
$(document).on('click', '.ajax', function(e) {
$this = $(this);
e.preventDefault();
window.history.pushState({state: new Date().getTime()}, '', $this.attr('href'));
fnLoadPage.call(undefined, $this.attr('href'));
});
#Barry_127, see if this will work for you: http://jsfiddle.net/SX4Qh/
$(document).ready(function(){
window.onpopstate = function(event) {
alert('popstate fired');
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('')
.load($(this).attr('href'), function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
$('.ajax').on('click', function(event) {
event.preventDefault();
alert('pushstate fired');
window.history.pushState({state:'new'},'', $(this).attr('href'));
});
});
If you take a look at the fiddle I provided and click the button, the alert will fire showing that you are pushing a new state. If you then proceed to click the back button once the pushstate has fired, you will see that the previous page (or popstate) will fire.

How to pass attribute value on double click using jquery

I want to pass blank value on single click function and want to redirect on double click.
Here my code for HTML
Code for j-query
$(function () {
var clicker = $('#Nav a');
$(this).click(function () {
$(this).attr('href', '');
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
}
kindly suggest how i can pass same attribute value for two different function or any other way to do that.
You can use e.preventDefault() to prevent redirection on single click:
$(function () {
var clicker = $('#Nav a');
clicker.click(function (e) {
e.preventDefault();
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
})
Also, note that $(this) of your click function is not map to any element at this moment. Since you've assigned var clicker = $('#Nav a') then you can use clicker.click instead.
Fiddle Demo

jQuery loader calling function

This is a simple loading script from nettuts and I tried to modify it to suit my needs.
But I can't get function "res," which resizes loaded elements, to happen BEFORE function shownewcontent runs. Now it resizes after it is visible, which is very bad looking.
But if I place call the function sooner, nothing happens, because the content is not yet loaded.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#menu a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad);
}
});
$('#menu a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show("0", res)
}
return false;
});
});
You have res() defined as the callback to show(), meaning it will get called after the show() function completes.
I would change your callback structure so that it contains all of the work you want to do:
$('#menu a').click(function(e) {
var toLoad = $(this).attr('href') + ' #content';
$('#content').hide('slow', function() {
var self = this;
$(self).load(toLoad, '', function() {
res();
$(self).show("0");
});
});
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
e.preventDefault();
}
Then you don't need the function definitions inside your click handler.
FYI, instead of return false;, it would be better to use e.preventDefault(); at the end of your click handler, though. You will have to define e as a parameter to the click callback function. See this for the return false; vs. e.preventDefault() debate.
Additionally, if the resizing is taking a noticeable amount of time, you might want to have the res() function take a call back in the same fashion that show() does. Then you can show the content only once it's loaded and resized.

Prevent Double Animation in jQuery

How can I stop this function from happening twice when a user clicks too fast?
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
});
});
The issue I'm having is that if a user clicks too fast the element won't fade back in, it just stays hidden.
The issue wasn't what I thought it was. When I was clicking on the same thumbnail it would try to load in the same image and stick loading forever. The .stop() answer does fix double animation so I'm accepting that answer, but my solution was to check if the last clicked item was the currently displayed item. New script:
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var last = $("#photo").attr("src");
var target = $(this).attr("href");
if (last != target) {
$("#photo").stop().fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
};
});
});
Well you use the correct word in your descripton. Use stop()
$("#photo").stop().fadeTo("fast", 0, function() {
You may use a setTimeout function to make a delay between click grabs. I mean, a second click will be processed only after sometime, after the first click. It sets an interval between clicks.
$(document).ready(function() {
var loaded = true;
$(".jTscroller a").click(function(event) {
if(!loaded) return;
loaded = false;
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
loaded = true;
});
});
});
});
Keep track of its state
I believe what you are looking for is .stop()
http://api.jquery.com/stop/
$("#photo").stop(false, false).fadeTo()
I would prevent it like this:
var photo = $("#photo");
if (0 == photo.queue("fx").length) {
foto.fadeTo();
}
I differs from stop as it will only fire when all animations on this element are done. Also storing the element in a variable will save you some time, because the selector has to grab the element only once.
Use on() and off() :
$(document).ready(function() {
$(".jTscroller a").on('click', changeImage);
function changeImage(e) {
e.preventDefault();
$(e.target).off('click');
$("#photo").fadeOut("fast", function() {
this.src = e.target.href;
this.onload = function() {
$(this).fadeIn("fast");
$(e.target).on('click', changeImage);
});
});
}
});

Using jQuery post

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

Categories