Select2 Select Option Drop Down Box Doesn't Scroll - javascript

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!

Related

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>

Hover event on dropdown items in select2 v2.4.0 plugin

I have a little problem with select2 v2.4.0. I need to show popover with text when user hover one option from the dropdown list. The problem is that I don't see any hover like event which could work with dropdown items. In the previous version of this plugin the event was called "select2-highlight" but it doesn't seem to work now.
I have checked the source to find something similar but without luck. Unfortunately documentation is not complete so I can't check it.
Have you any idea how I can do that?

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
}

select drop down not showing

I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working

'next' in the dropdown on iPhone Safari does not trigger on change event

I am trying to do a straight forward cascading dropdown for mobile safari. I have this working 100% in safari itself, which shows normal style drop downs. But mobile safari dropdowns have a 'next' button.
Hitting this next button takes you to the next drop down in the cascade with triggering onchange() - thus the next dropdown is empty.
The user is forced to press 'done' to trigger on change, then click on the next dropdown.
Does anyone know a way around this. Or what DOM event is triggered by mobile safari's''next'?
Disabling the second drop down from the beginning is the only work around I have found so far! it will disable the "next" button on iphones
Add the disabled attr (disabled="disabled") to you select and use javascript or jQuery to enable or disable.
here is the jQuery code
$(".DD1").focus(function() {
$('.DD2').attr('disabled', 'disabled');
}).blur(function() {
$('.DD2').removeAttr('disabled');
});
here is a live example that is doing this
using jQuery:
http://www.imotors.com/mobile
That's an iOS native overlay, so what you'll get is a blur event when that overlay comes up. Try using the blur event and see how that works.
I have tried many direct solutions to solve this problem with no success. The second pulldown is populated after Safari Mobile's "form assistant" overlay comes up with the spinner (called a "picker" in documentation - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), comes up. So the picker is populated with old values.
In another case, if the second cascading pulldown is inactive, the Next button of the form assistant skips right over it. In that scenario, though, once the following form element is landed on, the second pulldown does update itself correctly, so tapping "previous" at that point gives the correct list in the picker.
My "answer" is that Apple is suggesting that JavaScript based cascading pulldowns should not be used but that another UX is to be implemented though I have found nothing that describes this aside from the standard jQuery Mobile type paging menus.

Categories

Resources