Button on-click scrolling not working - javascript

quite new to coding with javascript and such, having an issue with an on-click scroll where it goes to another div. I've checked a lot of the posts on here but can't seem to find out why it won't work. Any help would be greatly appreciated! It's probably a simple fix that I just don't have the experience to be able to notice..
Here's the code (I'll try to condense it but imagine there's a lot of content in between so it's actually worth scrolling to)
HTML
<div class="button-div"><button type="button">Click here</button></div>
<div class="div-2-under-top">Content here</div>
Jscript
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
'slow')
})
I have the latest jquery V3.3.1 so I wouldn't think that would be the issue... any ideas?
Here's a picture of the actual code itself in-case there's something important I missed (apologies if the code is dirty)

#TylerRoper found the answer for me.
I'll paste his answer here in-case anyone stumbles across this and is looking for the answer.
OP, your button click event needs to be inside of the $(function() { ... }) section. This section will be executed after waiting for the page to load. By trying to attach an event to $("button") outside of this, the button has not loaded yet, so the event can't be attached.

$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
1000);
});
Try see can work or not ? hope this help you

Related

The animation scroll to top button does not work

a couple of days ago i started working with my companies website. I saw it was missing something so I decided to make a scroll to top button with animation. I am a noob in programming so i decided to look on the Internet. There I found this example. I literally copied the whole code but it does not work.
the button in the html:
<i class="icon-chevron-up"></i>
and this is the jQuery:
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body, html').animate({
scrollTop : 0
}, 500);
});
I dont know what the problem is because it works on the codepen. Does anyone know how to fix this?
Thanks in advance
There is not enough information but if you use the same code from codepen then maybe you need to include jQuery into your site header. (https://cdnjs.com/libraries/jquery/)
You should do something like this :
$('#return-to-top').click(function(e) {
e.preventDefault();
$('body, html').stop().animate({
scrollTop : 0
}, 500);
});
And first of all, check if you have include jQuery :
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
Which browser are you using?
Anyway, $(window).scrollTop(0); seems to be supported by all browsers, but if you want to animate the scroll, $('html,body').animate({scrollTop:0},500);, like you're using, if you can share your HTML and CSS code, maybe the problem is in the z-index or try to put the width and the height of the ".icon-chevron-up" also to the "#return-to-top".
Everything seems to be working, try to use the console.log('some string here'); to see if the code is running.
Also, check if you added the jquery script:
script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
Hope you solve it.
I noticed a lot of people were telling me to include the jquery library. I did add the library before but after I checked the answers I noticed that I added the wrong library. So now its fixed thanks a lot guys.

.click event work on home page but didn't work and post page

I try to solved this problem but I don't understood where is the error.
I have and footer of all pages a to the visitors can comeback to the important part of the site whit slow animation.
In main page any problem that work correctly.
But in post page the animation didn't existe.
this is an exemple of page with the problem.
the code I used for the animation is this:
$(".gotof").click(function (e) {
var b = $(this).attr("href").substr(1);
console.log(b);
event.preventDefault();
$(".wrapper").animate({
scrollTop: $("#" + b).offset().top + $(".wrapper").scrollTop()-60
}, "slow");
console.log('e');});
First I think is the sibling of the element but no problem in this part.
After I try other functions for scroll to an anchor.
After multiples tests I control if something is not same in the two page but same Js, same plugin.
I don't understand what is the problem.
Please help me.
You're using event.preventDefault() - event is not defined, e is. Change it to e, instead of event, and it'll probably work. If you had looked in the browser console, you'd seen this. That might not be the error, but it will prevent the rest of the script to run.

Jquery doesnt work on payment gateways woocommerce

I want to hide a div when an option is selected:
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery(".payment_method_cod").hide();
}
});
On this example, $payment_method_cod doesn't hide but if i change it to another div ID ( for example, #payment ) it works!
I hope someone can help me.
Thanks in advance!
There is a chance that other code might run which will result in not hiding the div you wanted. So what i would suggest is run this code the bottom of the site.
You can hook this code to the footer of the site using wp_footer hook
Comment or ask me if you have any doubts.
After Inspecting Questioner site.
Actually it is class not id. Please check it well. So the code should be follows
jQuery('.payment_method_cod').hide();
Whole code is
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery('.payment_method_cod').hide();
}
});
I think the script loaded to quick because the payment part of woocommerce is also done with jQuery. After adding in the setTimeout() function it worked!

Ajax load php into div giving me issues

I've been hammering away at this for a couple of days trying to resolve it before turning to StackOverflow. But I simply can't see where I'm going wrong.
All I want to do is on document load, bring in dansearch.php into the "displayresults" Div with the following code.
Can anyone shed any light here on how to fix this and more importantly why so I can fully understand the issue? Thanks in advance!
<script>
$(document).ready(function() {
$("#displayresults").load("dansearch.php");
});
</script>
<div id="displayresults"></div>
There are only 2 possibilities, if your code is not working,
Jquery inclusion may not proper.
Your php page or its location is not correct.
Use a .get
<script>
$(document).ready(function() {
$.get("dansearch.php", function(data) {
$("#displayresults").html(data);
});
});
</script>
<div id="displayresults"></div>

jQuery .change not working in WooCommerce

I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class

Categories