I am using Select2 and I am adding a custom button to the start of it using the following code:
$("#select2-ddlCustomer-container").off().on('click',
function() {
$("#ddlCustomer-add").remove();
$("#select2-ddlCustomer-results")
.before("<div id='ddlCustomer-add'><i class='fas fa-user-plus'></i> Create new customer</div> ")
.promise().done(function() {
$("#ddlCustomer-add").off().on('click',
function() {
alert('test');
});
});
});
However as soon as the select box opens it automatically highlights the first option even though I have not hovered over it, this means that when I hover over my "Create new customer" button the first option in the list is also highlighted which looks confusing to the end user.
Does anyone know how I can stop it highlighting an option by default and only highlight an option if the mouse is actually hovered over it?
I have got around this issue by adding the following code to remove the highlight class from all the options when I hover over my "Create new" button, this doesn't technically unselect the option and it doesn't resolve the issue with the first option in the list being highlighted when the dropdown is opened even though I haven't hovered over it but it is a workable solution for now:
$("#ddlCustomer-add").hover(function () {
// Un-highlight all options
$('.select2-results__option').removeClass('select2-results__option--highlighted');
});
Related
JQUERY CODE:
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('#gaga').toggle
})
PUG CODE FOR #gaga element:
p#gaga
| This is `${Value}`
PUG CODE FOR #gaga element:
How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it.
I tried doing it using switch statements but I have failed. Hopefully someone can help.
UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.
Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/
After doing some research I have made some progress... but I am still stuck.
I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code.
Also, if you don't mind is .data() use to assign or get a value.
PS: Got this code from this answer : Fixing toggle with two buttons
and modified it a bit, but I am still not able to achieve my desired result.
If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.
Example: https://jsfiddle.net/Twisty/0x43bf8q/
JavaScript
$(function() {
$("input[type='button']").on('click', toggleOptions)
.first()
.trigger('click');
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$('[name=gender]').val("");
}
});
function toggleOptions() {
var $this = $(this),
onClass = 'button-toggle-on';
$this.toggleClass(onClass)
.siblings('input[type=button]')
.removeClass(onClass);
var gender = $this.filter('.' + onClass).data('gender');
$('[name=gender]').val(gender);
}
function emptyOnDocumentClick(event) {
return !$(event.target).closest("input[type='button']").length;
}
});
Hope that helps.
I have form with many textbox and select tags. When i click the select tag its not opening the dropdown menu instead it move focus to next control that i have not selected.
This issue occurs only in iPhone.
Please anyone help me to solve this.one.
To Stop automatically closing dropdown issue or stop switching to other element issue use
preventDefault() method in touch event of the select element.
Example
$("#dropDownID").on('touchstart', function (e) {
e.preventDefault();
});
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
Working on making a very standard dropdown menu with the new jquery ui 1.9 menu widget, but having some problems due to the newness of the widget and the presence of only a single extremely basic example at jqueryui.com
Specifically, can anyone here help me to:
Initialize a widget with no icons for submenus? (Default is a right-facing carat and I can't get rid of it)
Make a menu where user has to click on the top menu item (as opposed to just hovering) to make the submenu appear? Any deeper submenus should then expand when the user's pointer hovers over them. This is typical dropdown behavior, e.g., user clicks "edit" to make options appear like "select" or "undo", but any further choices under (for example) "select" would apper just by hovering over "select". I hope that's clear.
Thanks
I don't know how to do the second part of your question but I can answer the first question.
You can change the default icon by setting the icon option of the menu option.
First add a class to your CSS file like this.
.no-icon { display:none;}
Then set the icon option when you create the menu.
$( "#menu" ).menu(
{ icons: { submenu: "no-icon" } }
);
You won't have any icons.
Here is a fiddle