Develop Reference

link between two elements in the same page doesn't work

so I'm using this code in order to have a smooth transition between pages
window.transitionToPage = function(href) {
document.querySelector('body').style.opacity = 0
setTimeout(function() {
window.location.href = href
}, 500)
};
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector('body').style.opacity = 1
});
const swup = new Swup();
In the "projects section" the user cannot scroll using the scrollbar, he can only scroll vertically by clicking a button (actually the body has the overflow-y: hidden attribute).
Everything works fine untill the code above is linked into the project section (both if the code is in an external file or between script tags in the html file).
I have two scenarios:
transition between pages works fine but buttons in the projects sections don't work (you can click them but nothing happens);
user can scroll by clicking buttons but smooth transitions betwwn pages doesn't work (animation looks hella weird).
thanks in advice

How do I run one Jquery function only after the first is completely done?

So I am using a toggle button in which a menu is toggled on the side. It slides in and out from the left hand side. I am also using bootstrap so it takes up 2 out of 12 sections of a row, with another div (which I will refer to as div x) taking up the other 10. When the button is pressed I am also toggling the class of div x so that it takes up the entire grid space when the menu is toggled off. The issue is it is changing grid size before the animation is finished which makes it go to the bottom of the page and then back to the top. I want the toggling of div x to be done after the menu has been toggled. I have tried moving it around to different parts of the function, and even creating a different function which is called after, but the same issue arises. Here is what I have:
$('#toggle,.contents').click(function() {
if ($('#toggle').is(':visible')) {
$('#moduleList').toggle('slide', {
direction: 'left'
}, 1000);
}else {
$('#moduleList').toggle('slide', {
direction: 'left'
}, 1000, function() {
});
}
$('#toggler').toggleClass('col-md-12 col-md-10');
});
Thanks in advance for any help!

Place $('#toggler').toggleClass('col-md-12 col-md-10'); inside of your empty function. The function should be called once the animation is complete, following the link #Rajesh mentioned.

jQuery ui tabs : sliding effect when switiching between tabs

I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO
I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.
The script I have currently, which has no sliding functionality is :
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.

jQueryUI has effects built in. No need to roll your own.
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5

Jquery - Adding classes to multiple elements at once?

I'm having issues with jquery and bxslider on my site, i've been racking my brain over this for a while but can't seem to find any way to make it work how i'd like,
I'm building a slider using bxslider and basically i want the current slide to have a class of 'active' or an opacity of 1, whereas i'd want all other images on the sliders to have an opacity of 0.7.
i have a potential 'infinite' number of slides on my page and this is where i seem to be running into problems. (it's being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)
you can see what i've got so far at: http://jsfiddle.net/bu5cd/
$(document).ready(function(){
$('.bxslider').bxSlider({
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('img.attachment-thumbnail-size').removeClass('active');
$('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
}
});
});
you can see it works for the first slider somewhat, but it doesn't carry through to the second slider.
Cheers guys, been racking my brain over this for hours! I'm open to using another slider if that would help achieve the desired result, there doesn't seem to be an awful lot of documentation around for bxslider.

Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the "n-th" img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:
$(document).ready(function () {
$('.bxslider').bxSlider({
onSlideBefore: function ($el) {
/* remove the class from all images of this slider only */
$el.closest(".bxslider")
.find('img.attachment-thumbnail-size')
.removeClass('active');
/* add the class to the image within the current slide */
$el.find('img.attachment-thumbnail-size')
.addClass('active');
}
});
});
http://jsfiddle.net/bu5cd/3/

Sliding to different pages in website

I am using Zurb Foundation to create a small website and I have a top navigation bar with four links. On clicking each link, I want to horizontally slide to a different page every time.
The content in the page should be loaded via ajax and not loading all pages on visiting index page itself. (note: content for slide-to page should be loaded not after the slide animation but somehow with the slide itself or else the empty sliding would look a little weird)
In addition, since I am using foundation to get responsive layouts, I am confused how to place the sections for the different pages horizontally. If the website wouldn't have been responsive, I probably would have placed the other pages separated by a margin property and to slide them, I could have done an animate of the margin property.
But, how do I get a horizontal page sliding effect (along with ajax loading) on my current page?

I think you want a 'single page website'? There are a lot of tutorials about this but this one is great:
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
A live demo can be found here:
http://vandelaydesign.com/demos/single-page/
This uses jquery to scroll to the element with a specific id on the page. When you click one of the menu items it scrolls/slides automatically to that part of the page.
Just because the code is a bit long I'll only post the Jquery, to give you an idea.
<script type="text/javascript">
$(document).ready(function(){
$('#topnav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$('#nav').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollOffset: 30,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
Hope it helps :)