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>

How to prevent js scroll to top on click

I'm having trouble with what I believe to be a javascript or jQuery issue.
I have build a css checkbox label that when clicked reveals a form on the page.
The problem I'm having is that when the label is clicked, if the user has scrolled down before clicking, the page scrolls to top.
I believe this is a JS issue, maybe coming from the theme I am using, but my JS skills are close to none so I would really appreciate any help.
You can view the page here:
http://urlgone.com/5504c5/
and the "Scroll to top" happens when clicking on the "sign up" blue text.
I've tried adding this JS code as suggested in another post, but that didn't solve the issue.
$("#slidingFormBtnId").click(function(e) {
e.preventDefault();
// Do your stuff
});

I think your issue in that you are attempting to use jquery incorrectly inside Wordpress. Your console states $ is not a function.
You can view this page for some help: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ but basically you should wrap your jquery in:
jQuery(document).ready(function( $ ) {
// code here
}

Tinymce view mode switches after init

My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.

Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

creating jquery effect to show new page in same screen

In some of the website I found header and footer remains fixed.
When user click on any link in header or footer then new page opens from downside(or any other way) on same window.
I dont remember exactly the link for such site. I appreciate if someone can show me how that work.
I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates.
I google it but could not think correct words to get this exactly.

If you do know how to navigate (just in case - here is an example: AJAX navigation), but need to see examples of navigation "styling", Codrops would be a great place to start:
Codrops - navigation examples
Codrops - page transitions

"I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates."
The simplest method is to have a container div within which you put the variable content (i.e., the current "page"):
<div id="content"></div>
(When your page is first loaded that div can have default content as appropriate, it doesn't have to start empty.)
Then using the Ajax method of your choice (that you mention you already know how to use), in the success handler you then use an animation method to hide that main div, then change its content to the html returned via ajax, then show the div again using the animation method of your choice:
$.ajax({
url: 'yourUrlHere.com',
success : function(newContent) {
$("#content").fadeOut(1000, function() {
$(this).html(newContent).slideDown(1000);
});
}
});
Demo: http://jsfiddle.net/M4ZZ6/
From there you can get as fancy with the transition as you like by applying different animation effects. Or use a page transition plugin...

If you want the easy way check this.
<div id='loadpage' style='display:none'></div>
Jquery code:
$('#loadpage').load('mypage.php',function(){$('#loadpage').fadeIn(300);});
You can add more efects for your loads.
Here is the example.
JSFiddle

How do I make a dropdown that also loads content into the mainContent area?

I have a dropdown using JQuery on my site (www.hidcountry.com) but I am trying to make it dropdown but at the same time load content into the mainContent section on the right. The pages are PHP but I was told Javascript, Ajax or JQuery will help me do that but I'm so stuck right now... Anybody have an experience with this?

If you want content to change once someone selects a menu item in the drop-down, I would recommend using the jQuery library and binding a javascript function to the change event. This would then let you code a javascript function that you could use to change content in different areas of the page:
$('#my-drop-down').change(function(){ $('#content-area').html('Some HTML.'); });