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/
Related
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');
} );
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.
I have one page with slider with images and names of category, and second page with gallery and on this page is another slider with category icons. When you click on slider1 it shoud redirect you to page2 (gallery) and set slider2 to right positions, I mean slider2 shoud jump to proper slide with exactly the same category to show right pictures in gallery.
Redirecting was no problem to me but I don't know how I should write the functions after redirecting to page.
Right now I have
var slide_jump;
$('div.zobacz').bind("click touchstart", function() {
slide_jump = glide2.current(); //get number of slide on slider1 to know to which slide should jump slider2
setTimeout(function() {//redirecting must be after I get current slide on slider1
var url = "http:***.html";
$(location).attr('href', url);
}, 100);
//HERE IS MY PROBLEM
});
there is a function : slider2.jump(slide_jump) - slider2 jump to proper slide, but I dont know were I shoud use it. it should be after the page2 load, i know there is something like
$(window).load(); $(document).ready();
but should I use it know? if everything is already in something like this.
What you need to do is pass the variable to the new page, and then process that value on page load. Something like this should work:
PAGE 1 CODE:
var slide_jump;
$('div.zobacz').bind("click touchstart", function() {
slide_jump = glide2.current(); //get number of slide on slider1 to know to which slide should jump slider2
setTimeout(function() {//redirecting must be after I get current slide on slider1
var url = "http:***.html" + "?jump=" + slide_jump;//CHANGE HERE
$(location).attr('href', url);
}, 100);
});
NOTE: I don't know why you are using a timeout, is glide2.current(); an asynchronous operation? If not, the no need for timeout. If it is, better to use a callback.
PAGE 2 CODE:
$(window).load(function()
{
var slide_jump = getQueryStringValue('jump');
slider2.jump(slide_jump);
});
function getQueryStringValue(key) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
NOTE: The getQueryStringValue function was taken from here.
I would suggest to use window.onload.
Refer window.onload vs $(document).ready() for better understanding
This is used for when all the DOM elements are done loading.
$(document).ready();
When you are working with images and want to know when all the images are done loading you should use
$(window).load();
In the load you can do the jump slide.
$(window).load(function()
{
//Do the jump slide
});
EDIT :
Examples for reading querystring.
http://www.darlesson.com/jquery/querystring/?language=en&province=Alberta&province=Ontario&province=Quebec
and here is an example :
//Wait when done loading images
jQuery(window).load(function ()
{
//Read querystring
var selectedSlide = $.QueryString("slided");
//Jump to slide
slider2.jump(selectedSlide)
});
I have typed it from my head so its only for the idea.
Some more info about load and ready : Difference between $(window).load() and $(document).ready() functions
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;
});
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.