Hover event on dropdown items in select2 v2.4.0 plugin - javascript

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?

Related

Disable SortableJS's selecting and programmaticaly select elements

I'm having troubles with SortableJS's selecting system (mainly the MultiDrag plugin). I want to be able to programmaticaly select and deselect the elements that are to be dragged, but also want to disable the built-in click-selecting. In other words, I want to disable the click-to-select functionality of SortableJS AND MultiDrag and only select the items via the provided select and deselect functions. I tried fiddling with the code myself but it's a bit too convoluted for my understanding and I couldn't find where the actual selecting is happening and how the MultiDrag plugin is keeping track of the selected items. Does anyone have experience with this? Thank you.
You need to prevent the deselection on the item clicked.
Eg
$(element).on('pointerup mouseup touchend', function(event){
event.stopPropagation();
});
See https://github.com/SortableJS/Sortable/issues/1612#issuecomment-533777362

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!

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

Making dropdown menu for jQuery UI split button

My project's 99% UI things works on jQuery UI. I need, SplitButton feature, but it has no dropdown menu. This demo seems to suggest that the Button widget could be used to create a dropdown menu here.
I was wondering, is there any way to create simple dropdown menu with this Button widget? I mean something in a manner similar to the demo provided here for autocomplete: http://jqueryui.com/demos/autocomplete/ Can't figure out how to get this work.
And please don't answer me to use Twitter Bootstrap. Because it's button function conflicts with jq-ui's button function, and I can't resolve this conflict.

Check box inside drop down menu with javascript

How can a checkbox inside a drop down menu using javascript to be implemented so that every time you click the menu to change situation?
The website you have linked presents a list along this lines: http://jsfiddle.net/XJWkH/
Of course this is just a raw example but basically this is the way the dropdown list on the site works. When you click on a dropdown/submenu element, jQuery adds or removes 'checked' class on that element.
jQuery is the easiest path here. I have used this plugin with great success and have rolled my own as well.
Good luck!

Categories

Resources