AJAX Transition Effect - javascript

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.

Related

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>
You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

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 collapsing menu in wordpress (slight glitch)

So I'm making a website using wordpress: http://www.baxtersresume.com/wordpress-3.9.1/wordpress/about/
I'm playing with the menu jquery to get the right effect and I think I've almost got it but I need a bit of help. If you look at the site you'll notice when you open the bottom submenu by mousing over and then re-enter the menu from the bottom with the pointer it will close. That's what I'm trying to avoid. Here's the script so far:
jQuery(document).ready(function(){
jQuery(".page_item ul, .sub-menu").hide();
var current;
var currentsub;
jQuery(".page_item ul, .sub-menu").prev().mouseenter( function() {
current = jQuery(this);
currentsub = jQuery(this).next();
currentsub.slideDown();
});
/*jQuery(".header__content").mouseleave( function() {
jQuery(".page_item ul, .sub-menu").slideUp();
});*/
jQuery(".menu-item-object-page, .menu-item-has-children").mouseenter( function() {
if (current != jQuery(this) && currentsub != jQuery(this)) {
currentsub.slideUp();
};
});
});
What can I do here?
edit* (Solved! JSfiddle with the html)
http://jsfiddle.net/tu965j0d/1/
Perhaps something like the following would be a starting point for you. Simply using selectors to determine those elements you want to slideUp/slideDown, and exclude children of the target of the mouseEnter event?
$(function () {
$('.sub-menu').hide().parent().mouseenter(function(){
$('.sub-menu').not($(this).find('.sub-menu')).stop(true, true).slideUp();
$(this).find('.sub-menu').slideDown();
});
});
Fiddle: http://jsfiddle.net/tu965j0d/
Edit: There's also a number of accordian menu libraries and tutorials out there, might be useful? For example, this little tutorial using some nice CSS3 transitions.

how can you change remove a class on one li and move it to another

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL
This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});
Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle
jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle
I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.

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