Develop Reference

How do I let multiple sliders on one page function separate from each other?

You guys have been such a good help in the past. I hope you can help me out again! I'm still learning a lot, but I've just came across an issue I'm not able to fix myself. I've read similar posts with similar issues, but I wasn't able to implement those solutions...
I'm making an template for a client. In this template there is a slider, which works great.
Problem is: the client can add another slider to the same page. At that point the second slider doesn't 'work' when you click the arrows. Only the arrows of the first slider are working and also slides the second slider slides.
So, I think I understand that I should 'target' the specific ID or Class of every slider in my sliders code. Something with .find(), but I just can't get it to work.
Specific question: how do I make this code work, so that my customer can add as many sliders as he wants on 1 page, without the sliders effecting each others functionality.
I hope you can help me out.
Slider code:
$(document).ready(function(){
// options
var speed = 500; //transition speed - fade
var autoswitch = false; //auto slider options
var autoswitch_speed = 5000; //auto slider speed
// add first initial active class
$(".slide").first().addClass("active");
// hide all slides
$(".slide").hide;
// show only active class slide
$(".active").show();
// Next Event Handler
$('.nextbtn').on('click', nextSlide);// call function nextSlide
// Prev Event Handler
$('.prevbtn').on('click', prevSlide);// call function prevSlide
// Auto Slider Handler
if(autoswitch == true){
setInterval(nextSlide,autoswitch_speed);// call function and value 4000
}
// Switch to next slide
function nextSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
// Switch to prev slide
function prevSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':first-child')){
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
});
HTML Markup:
<div class="afbeeldingen-slider-container">
<div class="plate--container">
<div id="container-slider" class="sliderbtn">
<div id="prev" alt="Prev" title="Prev" class="nextbtn">
<i class="material-icons">keyboard_backspace</i>
</div>
<div id="next" alt="Next" title="Next" class="prevbtn">
<i class="material-icons">keyboard_backspace</i>
</div>
<div id="slider">
{% for afbeelding_voor_slider in afbeelding_slider.afbeeldingen_toevoegen %}
{% include afbeelding_voor_slider %}
{% endfor %}
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
You can see the two sliders in a test version of the theme here
The first slider is the 'testimonial slider' half way down, the second slider is the 'image slider' on the bottom of the page.

Since you have multiple sliders on your page with the same classes, jQuery picks the last one to work on, because the code is parsed and interpreted from top to bottom.
What would be best in your case is to make a global slider function, and use it on the sliders. Something like:
$(".slider").initSlider();
Inside the function you would find all specific DOM elements relative to the slider:
var nextbtn = $(this).find(".nextbtn")
This way the code runs for every slider, instead of the last one. But this is a very rudimentary example. Actually I'd recommend using an existing library where this functionality is already built in and tested. Take a look at http://jquery.malsup.com/cycle2/ which is a very basic slider library, but you can extend it however you like.
I see you're using the Plate cms. ;) Plate has Cycle2 built in in it's global_asset_url filter: https://platehub.github.io/docs/templating-reference/filters#global_asset_url

How to smoothly transition the visible content of a web page with javascript or jquery?

I have a web page with different sections and I would like to change the visible section when you click on a section link.
<div id="sections" class="col-md-8">
<section id="pathogens" >
<p>aaaaa</p>
</section>
<section id="population" >
<p>bbbbb</p>
</section>
</div>
Unexperimented as I am, I have achieved this with this little code.
function activateSection(section){
$('#sections').children().hide();
$('#'+section).show();
$('#menu li').removeClass('active');
$('#menu li a.'+section+'').parent().addClass('active');
}
but that is not really smooth, the page is flickering that's not eye-pleasing.
I searched for recommended ways to do this but I didn't find anything specific to my problem.
Do you recommend using a plugin like smoothState.js?
Thank you!
IMPORTANT EDIT:
I noticed the flickering is mostly due to the length of the content which is making the scrollbar appearing and disappearing quickly and thus changes the width of the page.

function activateSection(section){
$('#sections').children().hide(); // or fadeOut() or sideUp()
$('#'+section).fadeIn(2000); //or slideDown()
$('#menu li').removeClass('active');
$('#menu li a.'+section+'').parent().addClass('active');
}
activateSection('pathogens') // or 'population'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sections" class="col-md-8">
<section id="pathogens" >
<p>aaaaa</p>
</section>
<section id="population" >
<p>bbbbb</p>
</section>
</div>

I honestly think what you are looking for is even easier than you think. Instead of using the show() function, why don't you instead call fadeIn('slow')?
Dependent on the actual look of the content, slideDown() and slideUp() functions could be called too.

Only have one visible section at a time and track which section is visible with a variable outside of the scope of the function. See the code below:
var currentActiveSection = "pathogens";
function activateSection(section) {
$('#' + currentActiveSection).hide("slow");
$('#' + section).show("slow");
currentActiveSection = section;
// only updated the relevant code above, also make any changes required to the code below
$('#menu li').removeClass('active');
$('#menu li a.' + section + '').parent().addClass('active');
}
Please note that you can play around with the .show and .hide parameters "slow", "fast" etc to get the desired effect. Alternatively use another jquery function like .fadeIn/.fadeOut to get a different effect.
If older browser support is not an issue for you, I suggest changing your setup completely and going with css3 transitions instead:
http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#portfolio
Hope that helps!

Bootstrap 3 has a nice transition feature : http://getbootstrap.com/javascript/#tabs
the problem is that it deactivates the url hashtags

how to execute jquery function after one another (and few more questions)

To explain the situation ,I am using both jquery and animate.css combined in order to bring about some animation part that i want to apply to my website.
http://lifeto.cafe24.com/xe/
I have a couple of questions in this post, and it needs fairly thorough understanding of the site that i have built.
Fist, If you go to the webstie I linked above and click on the menu that says '공지사항' on the bottom, an iframe src gets triggered by jquery attr.
And if you click on any of the image you can see on the board after that, the board content (#window_frame) slidesout to left and the new div (.window_board) slides in from the leftside.
but when you click on the image, notice the content of the board AND the .window_board disappear and appear AT THE SAME TIME.
what i want to achieve here is to have the #window_frame slides out first, and THEN, after it is done, have .window_board slides in.
and SECONDLY, when i click on the menu button that says '공지사항' from the point when the .window_board is still opened, i want the .window_board to slides back in, and have the content(#window_frame) comes back out.
I wonder if it's possible to achieve this only by using simple jquery events, as it needs to calculate when the #window_frame is opened or not.
here is the complete js for the board (iframe)
jQuery(document).ready(function(){
jQuery(document).on('click', '.item', function() {
jQuery('.loader_container', parent.document.body).show();
var url = jQuery(this).data('url');
jQuery('#window_board', parent.document.body).attr('src', 'url',200);
jQuery('#window_frame', parent.document.body).addClass('animated slideOutLeft');
jQuery('.window_board', parent.document.body).addClass('open animated slideInLeft');
jQuery('.loader_container', parent.document.body).hide();
});
});
and the main menu:
<a onclick="jQuery('#window_frame').attr('src',
'http://lifeto.cafe24.com{$val1['href']}',200),
jQuery('#window_frame').removeClass('animated slideOutLeft')" class="menu_a">MENU</a>

Your question not clear so much, but if i consider only your main question:
how to execute jquery function after one another
you can use promise().done() or .when() to execute a jquery function after another.
Example:
$('div').click(function(){
$(this).addClass('blah').promise().done(function(){
alert('class added!');
});
});
You can read more about it:
https://api.jquery.com/promise/

jQuery show/hide toggle DIVs

So, I've successfully got a script working that shows/hides divs by clicking on the month.
If you scroll to the bottom of http://kaye.at/test/ and click 'April' or 'May' you can see it working.
The issue is I don't like how it animates sliding out to the left when it's closing, I'd rather it slide down or back up instead, but can't find where in the javascript to amend this?
Here's the JS:
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){}else{}
});
});
});
And the HTML:
<div id="wrapper-alt" class="shade8">
<div class="content">
<h1 class="full">APRIL</h1>
</div>
</div>
<div id="collapse1" style="display:none">
<div id="wrapper-alt" class="shade8">
<div class="content">
Content goes here
</div>
</div>
</div>
Apologies if my JS is messy, I'm a complete amateur, just play around with it for fun and learning!
Also, I've just noticed it doesn't work with multiple DIVs, all links only open the 1 div, how do I use it for multiple different DIVs?

slideToggle() jquery's method
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).slideToggle(function(){
if($(this).css('display')=='none'){}else{
}
});
});

I ended up using a different script as I couldn't seem to get it to work correctly!

jQuery slide/fade functions

I'm trying to modify this snippet:
$(document).ready(function(){
$('.showscript').show();
$("div.content:not(.about)").hide();
$(".subnav a, .mainnav a").click(function(){
//remove possible hilights
$(".subnav a, .mainnav a").removeClass("active");
var href = $(this).attr("href");
//hilight the clicked link
$('a[href="'+href+'"]').addClass("active");
//hide possible shown content
$(".content").hide();
//show my content
$("div.content:has(a[name='" + href.replace("#","") + "'])").show();
});
});
So that when a link in the .subnav or .mainnav is clicked it animates the swap it's doing. I'd like to use jQuery's fadeIn/Out, but I'm not really sure how I could apply it to this? The script is very specific to allow the content to show from either the mainnav and subnav and change active class on both when either is clicked.
You can see what I mean here:
http://banderdash.net/design
But it feels much to choppy.
In addition to quickly fading out the content and quickly fading in the new content, I would like the window to slide down to the content space. I'm just using anchors like this:
<a name="work">
and then calling like this:
<a href="#work">
Which jumps the window down as far as it can, but because the content in the black isn't always enough to make a Y plane that would allow the white space on the top to be moved out of the viewable rang. So I think a slide would work much better. How can I tell it to slide down the value of the href on click?

first of all i wouldnt used named anchors. I could make those ids on divs that are children of content. That way you dont have to do any real selction on complex expresstions just a search on id for the div within content. Secondly this allows you to animate each div indivdually. ehich i think is goign to give you the most control. Lastly you need to return false, from your click handler otherwise its goign to do the normal "jump to" type functionality. My script might look something like this:
Content:
<div class="content">
<div id="about"> ... </div>
<div id="work"> ... </div>
<div id="education"> ... </div>
</div>
Relevant part of your onready:
$(document).ready(function(){
$(.subnav a, .mainnav a).click(function(){
$(".subnav a, .mainnav a").removeClass("active");
var selector = $(this).attr('href');
$('a[href="'+selector+'"]').addClass("active");
if($(selector, '.content').length > 0){
$('> :visible', '.content').slideUp('fast', function(){
$(this).fadeOut('fast', function(){
$(selector, '.content').fadeIn('fast', function(){
$(this).slideDown('fast');
});
});
});
}
return false;
});
});
Note that is only pseudo code so a simpel c&p may or may not work. but it should give you an idea.