Adding a pre-loader on click .load() function jquery - javascript

I am having a problem using .load() in jquery
This is my current code
jQuery(document).on('click','#Pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
var nxtPage = jQuery(this).attr('href');
window.history.pushState('obj', 'newtitle', nxtPage);
jQuery('.preloadswitch').load(link+' .the-categories').fadeIn('slow');
});
This actually works, however I need for it to fadeIn + pre-loader when getting the content then disappears if the content is visible
Can I make this a ajax where it has a "beforeSend" or "success" function? Thanks
This is not working also
jQuery('.preloadswitch').load(link+'.the-categories',function(response,status,xhr){
if(status == 'sucess'){
jQuery('.preloadswitch').removeClass('addpreloader');
}
});

Try this:
jQuery('.preloadswitch')
.fadeIn('slow') // Fades it in.
.addClass('addpreloader') // Adds the pre-loader class.
// Loads the content.
.load(link+' .the-categories', function(){
// Removes the pre-loader class once AJAX is completed.
$(this).removeClass('addpreloader');
} );

Related

Page FadeIn and FadeOut Transition

I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.
My code look like this:
$("body").load(function() {
$(this).fadeIn(200);
});
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
window.location.replace($link);
});
It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.
First hide the body of the page on page load then
you need to place the redirecting line in the complete function of fadeOut
Try this code:
$(document).ready(function() {
$('body').hide().fadeIn(200);
$("a").click(function(e) {
e.preventDefault();
$link = $(this).attr("href");
$("body").fadeOut(200,function(){
window.location = $link;
});
});
});
You need to hide the element initially, either with .hide() or with CSS display:none;.
$(document).ready(function() {
$('body').hide().fadeIn(200);
});
You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
setTimeout(function(){
window.location.replace($link);
},200);
return false;
});
Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.
But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.
This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:
body {
display: none;
}
Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.
$(document).ready(function() {
$('body').show(500);
$("a").click(function() {
$link = $(this).attr("href");
setTimeout(function(){
window.location.replace($link);
},1000);
$("body").hide(500);
return false;
});
});
Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.

jQuery - use javascript after loading content with Ajax

I'd like to load the flexslider gallery with jQuery when an anchor element is been clicked.
The gallery shall be loaded in div#slider-loader
The problem is that the HTML is loaded properly, but the Javascript seems not to affect the injected elements even though I read that in this cases I shall use .on().
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href);
return false;
});
Thank you in advance!
--
use a call back function to preform action whaen the load is completed like so
Sweet! it worked! although with such solution the .on() event become useless.
Now I came up with this and it works:
$('.cliccami').click(function() {
var href = $(this).attr('href');
var gallery_height = $('.flexslider').css('height');
$('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
})
return false;
});
The only problem is the injection of the code is very scattering.
I would like to make the div container '#slider-loader' adjust its height according to the '.flexslider' height with a smooth animation.
What I've tried to do is:
$(document).ready(function(){
$('#slider-loader').hide();
});
$(document).on( 'click', '.cliccami', function() {
var href = $(this).attr('href');
var gallery_height = $('.flex-viewport').css('height');
$('#slider-loader').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
$('#slider-loader').css('height' , gallery_height);
$('#slider-loader').slideDown(10000);
});
return false;
});
The problem is that once i click the anchor element the #slider-container start to slideDown showing its content but it dosen't do it for the whole .flexslider height which I've set as variable and gave to him with the .css() method. It slideDown for few pixel and then it suddenly became of the entire .flexslider height.
use a call back function to preform action whaen the load is completed like so
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href , function(){
// some thing to happen when loading is done
});
return false;
});

FadeIn and FadeOut effect weird

I am using JQuery and what I want to happen is: div fades out using fadeOut(). It then loads content from a url using the load(). Then once content loaded it fades back in using fadeIn(). However it does not work,it flashes then loads out then loads in. I think the problem is that the fading is happening before the load is complete.I saw that someone else had the same problem but when i applied their solution there was no change.Here is the code with the solution i found (not working of course).
jQuery('.stil_link_img a').click(function() {
var x = jQuery(this).attr('href') + ' #continut_eco';
jQuery('#continutul_paginii').fadeOut("slow").load(x,function() {
jQuery(this).fadeIn("slow")
});
return false
});
you could try:
jQuery('.stil_link_img a').click(function(){
var x = jQuery(this).attr('href') + ' #continut_eco ',
$this = jQuery('#continutul_paginii');
$this.fadeOut("slow", function() {
$this.load(x, function() {
$this.fadeIn("slow")
});
});
});
The fadeout function accepts a callback function, called when the transition is done.
You could do something like this :
jQuery('#continutul_paginii').fadeOut("slow",myFunction)
And load your stuff in myFunction.
More infos here :
http://api.jquery.com/fadeOut/

JQuery Ajax: Old content flicks in before showing the loaded content

have a problem with my ajax code.
I have some links and a content area.
When i click on a link, i hide the content area, load the new data and show the content area again. It works, but when showing the content area, you see the old content for a short time and then it flickers to the new content.
Can i somehow let the loading screen appear for a longer time?
Also the hide function only works the first time i use a link.
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
I have this ajax code from this source
Thanks in advance!
You could try emptying your content element before issuing the AJAX retrieve command:
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.

javascript and ajax load, then effects

I have a javascript code, whereby I'm trying to load a list from a separate page (using jQuery's load() function), slide the current list out and slide the new list in.
Now, I don't want the old list to slide until after the new list has been completely loaded. Can anyone tell me how to achieve this without looking like the script is having second thoughts while execution..
Thank you.
Edit
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').load(page +" .proj").hide().fadeIn();
return false;
});
Sorry for not putting the code in. However, I don't really know how much help this is...
This should do it:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
If you call the slideDown method in load's callback (or any of the other ajax methods), that will ensure the animation happens after the element has been filled with the response.
EDIT: To apply that to your code:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
You can also try this:
$("#someDiv")
.slideUp("slow", function(){
$(this).load('blah.html', function() {
$(this).slideDown("slow");
}
);
});
It worked better for me, as you load the page once the slideUp effect is done.

Categories

Resources