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>
Related
I want to click the "continue" which is given on the end of this page, note that the site is not mine, its someone else's. The element is located after the pagination,
I tried to click it this way :
//Method 1
document.querySelector(".se-pagination-button.se-pagination-button--next").click();
//Method 2
document.querySelector(".se-pagination-layout").lastElementChild.click();
But unfortunately it did not work for me. Is there anyway I can click it ? Because when you click it through the mouse or pad, it triggers a function. But not when I want to click it through the JavaScript.
That website is a hot mess of different systems, but they use Vue.
So what you are looking for is:
document.querySelector(".se-pagination-button.se-pagination-button--next").__vue__._events.tap[0]()
I am trying to use the code hidePreviousButton () to hide the back button in Qualtrics. Currently, I have added the back button on all questions using the Survey Options, and I would like to remove the back button on certain pages.
If there is not a way to do that, then I would be equally open to adding the back button on select pages using JavaScript as well.
Thank you for any assistance!
To hide the previous button, you can use:
this.hidePreviousButton ()
So the full code screen should look like this:
`Qualtrics.SurveyEngine.addOnload(function()
{
this.hidePreviousButton ()
});
`
I found this in the API Qualtrics page, but there it forgets to tell you that you need to include "this." before any of the commands that it gives you. At least, adding that code before the command worked for the ones I tried.
The API page for Qualtrics is actually inaccurate, unfortunately it needs a few updates. The current way to do this, is by adding:
$('.PreviousButton').hide();
to the JavaScript for any question you want to hide it for.
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
}
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.
Hi there and happy new year,
I have a menu which uses the scrollto plugin ( * http://flesler.blogspot.com/2007/10/jqueryscrollto.html).
My Page is a onePager-Template and every menu item click, scrolls to a specific area.
I wanna disable this function (or any js) on certain a tags like this:
// normal behaviour / srolls to page (anchor link with scrollTo Plugin)
Area
// disabled behaviour
Another Area
But I have no idea how to do this.
I only know that something like this $(self).preventDefault could turn off js behaviour.
Can someone help me out with a oneliner?
Thank you!!!!!
I ended up with this snippet:
Blog
So this gets fired and overwrites the behaviour of any other script in my template.