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;
});
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'm using the following script with jQuery to have a fade transition when navigating between pages:
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(200);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
It works fine when only using links to navigate between pages, but when using the back button on the browser, the page returned to is blank.
How can I get pages to be properly displayed when navigating to them via the back button?
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though.
In any case, I think repainting the DOM would solve your problem (taken from Coderwall):
$.fn.redraw = function(){
$(document).each(function(){
var redraw = this.offsetHeight;
});
};
And to call the function: $(document).redraw();
How about try using delegate
$("a").on('click', function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
I'm trying to get this transition effect working with AJAX but the effect doesn't work with it. I essentially have a wrapper class and an innerwrap class in each of my html pages. When you click one of the navbar items, the innerwrap in the current page fades out and the innerwrap in the clicked navbar link fades in. Here is my script:
$(document).ready(function () {
$('#navbar a').click(function () {
var url = $(this).attr('href');
$('.wrapper').fadeOut('.innewrap').load.fadeIn(url + ' .innerwrap');
return false;
});
});
The way I'm seeing it is that the current innerwrap fades out and the innerwrap of the clicked url fades in. I've been struggling with finding a solution through different questions here but I can't seem to find one that's similar to the way I have the code presented. If you can't help but can guide me towards a question where the code is kind of similar that would be awesome. Thank you!
Maybe I'm wrong, but what you do in your code is fading in something like http://example.com/ .innerwrap and that's because you are using url variable where you put value of href attribute from a element.
Try using .load(url, function(){}) to achieve what you want. HERE you'll find more about load() from jQuery ;) Also your fadeIn() and fadeOut() syntax seem to be a little strange.
I think this is more what you want:
$(document).ready(function () {
$('#navbar a').click(function () {
var aObj = $(this);
var url = $(this).attr('href');
$('.wrapper').load(url, function(){
$(this).find('.innerwrap').fadeOut();
$(a).find('.innerwrap').fadeIn();
});
return false;
});
});
I haven't tested this code.
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/