Develop Reference

JavaScript / jQuery - How to stop slideDown from scrolling page

I just recently started using WP with the Divi theme. However, I quickly ran into the first limitations of the theme and now am trying to sort this out manually.
I tried finding a solution to this problem before (extensively if I may say), but I just can't wrap my head around why my problem persists - mostly as I have absolutely no prior experience with Javascrip/jQuery.
What I am trying to do:
Have multiple buttons and on click show different divs. Once a different one is selected by the user, the previous one should be hidden - Currently I only use two buttons for testing.
What is working:
Both hiding and showing is working and there is no problem if the buttons are used in the sequence: Click 1. button to show -> click 1. button to hide -> then click 2. button to show etc.
My problem:
However, if the first button's div is visible and the second button is clicked, does what it's supposed to do but scrolls to the very end of the page. This is the behavior I am trying to stop.
I haven't understood yet, how I can get the neccessary HTML to make a working JSFiddle, but below is the code, which is implemented by the theme into the body of the page. It is mostly based on some code I found on this site, but I can't seem to find the original post.
I ve tried using scrollTop as well as the current tempScroll, which I saw in yet another post as a method to save the scrolling position and recalling it. However, no matter what I put in, it doesnt seem to change the behavior.
I'd appreciate any pointers in the right direction or other help and hope that I posted this correctly.
Cheers
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('.button_verstecken_click').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
$('.button_verstecken').slideUp();
targetDiv.slideDown('slow',function(){);
e.preventDefault();
}else{
$('.button_verstecken').slideUp();
}
});
});
</script>

Select2 Select Option Drop Down Box Doesn't Scroll

Annoying issue and I've tried several javascript/jquery/plug-ins and nothing has worked. Went through numerous trials with this SO link: Prevent scrolling of parent element?
Here's an example:
https://livedemo00.template-help.com/woocommerce_53307/checkout/
note: you have to add a demo product to the cart to get to this page..
If you notice on the Country drop-down select option box, if you try to use the scroll wheel within it, it just resorts to scrolling the parent window. Scrolling isn't working at all for me within the drop down box.
I wish I could provide some sample code, but nothing has even remotely worked.
How do I enable scrolling in the Select2 Drop Down box?

Solution thanks to #Deep-3015
There was a javascript confliction between simplr-smoothscroll and select2 causing the error.
Here's what I did (I'm using WordPress here) to make sure smoothscroll did not load on the checkout page.
add_action('wp_enqueue_scripts', 'my_deregister_javascript');
function my_deregister_javascript() {
if (is_page('checkout')) {
wp_deregister_script('smoothscroll');
}
}
Refreshed and it is working perfectly!

Bootstrap Modal doesnt work well

I'm trying to open a form with bootstrap modal, my first problem was that bootstrap modal disappear immediately after click on my button but searching in other questions I found the solution deleting from my template:
{!!Html::script('js/plugins/bootstrap.min.js')!!}
Now I have other problem, the form of modal open but I can not do nothing, I can not submit my form, I attached a file with photo.
It's all dark and I can not do nothing.
How can I fix this problem?
Is a problem if I deleted bootstrap.min.js ?(I'm afraid that after something goes wrong)
There other way to create modal form? (maybe javascript)
Thank you for your help!

Your modal is may be inside some other div , that is affecting it . Try putting it outside that div it will work !! Or try putting this in your css file it may work div.modal div.modal-backdrop {
z-index: 0;
}

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?

I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.

I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

How to hide a container when a button is clicked and make a form appear?

So I'm trying to make a store for computers and I'm making a webshop for it, but I ran into a problem.
Now I have a container, and I want it to hide it's content when i click a button, and then a form needs to appear with name, email and a textrea for what they want to buy..
but if they click anywhere on page, other then the button I want to bring the old content back!
I'm building this in a program called Wakanda Studios, i don't know if this helps, but I'm sure someone will find my answer.
Quick note: I don't have any code yet, other then my container!

Try this, it is written in jQuery so you will have to add jQuery to your page by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> in the document head and then adding the following code at the end of your page...
$(document).ready(function(){
$("#button-id").click(function(){
$("#container-id").hide();
$("#form-id").show();
});
$(document).click(function(){
$("#container-id").show();
$("#form-id").hide();
});
});
All you will have to now is add the ID attribute to the button which starts everything off, the container, and the form.

If you are using the WAF framework of Wakanda and Studio, you would select your button, go to the events tab and add an on click event.
This will stub in a wrapper for the code to execute on click.
To hide a container, you need the container id. Using this you create a Wakanda reference to the widget and use the "hide()" method.
$$('yourContainerId').hide();
JQuery would work as well.