We Keep Coding

Closing css dropdown using jquery

Sorry for the vague project title but I'm not having a great idea about how to explain this.
So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.
I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj
I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.
So I started to approach it using javascript. So far I got following code:
$(document).click(function(e) {
var target = e.target; //target div recorded
if (!$(target).is('.multi-select ') ) {
$('.multi-select-options span').css('display', 'none');
$('.multi-select-options label').css('display', 'none');
}
});
Although this isn't working the way I want, I think it's the right approach?

Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.
$('.multi-select').on('click', function(e){
e.stopPropagation()
});
$(window).on('click', function(e) {
$('#toggle-open').attr({checked: false})
});
The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111

What works in the given codepen:
var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
if (toggle.checked) toggle.checked = false;
});
Just handle click, exclude the relevant elements and uncheck if needed.

How to blur Selectize.js input after selection has been made in Bootstrap 3?

I am using the Selectize.js. From the docs it says I can set up a 'onDropdownClose' callback here: Selectize docs. I can't seem to get it to work.
How do I blur (defocus) the input after a selection has been made using Selectize.js? All the blurs in the below code do not work.
$(document).ready(function() {
$("#myinput").selectize({
onDropdownClose : function ($dropdown) {
$($dropdown).prev().find('input').blur();
}
});
});
EDIT:
I am using Bootstrap 3.1.1. I just noticed that the default behavior for Bootstrap 2 is to blur the input after a selection has been made while Bootstrap 3+ leaves the input in focus after a selection has been made. My question still stands for Bootstrap 3+
Edit:
I got it to work with the above code.

Adding this just to have an actual answer. Your solution works.
$("#myinput").selectize({
onDropdownClose: function(dropdown) {
$(dropdown).prev().find('input').blur();
});
});

I had a similar issue and solved it using:
$('#myinput').selectize({
onItemAdd: function () {
this.blur();
}
}

Also, you can access input field like this:
$("#myinput").selectize({
onDropdownClose: function(dropdown) {
this.$control_input.blur();
}
});

closeAfterSelect option has been added since 0.12.0.
https://github.com/brianreavis/selectize.js/blob/v0.12.0/docs/usage.md#options

Accepted (deadwards) answer was fine, but in situation like this:
you open the menu, and close it by clicking back on the input element. In this situation, the dropdownmenu gets opened again.
I used this variant. I know, it is an ugly solution, but it worked better in this situation. You could change timout delay to fit your situation bettter, this was fine for me.
onDropdownClose: function (dropdown) {
var self = this;
setTimeout(function() {
self.$control_input.blur();
}, 250);
}

Dropdown Box disappear on click away

This is my first post on here and I'm just learning Jquery so please be kind! :)
I have just created a website - www.wayfairertravel.com and I have some dropdown boxes on my homepage, where users can search 'By Style' etc...
At the moment once those boxes are opened you have to close them manually... I'm just wondering if there is a way to change the code there currently so that when a user clicks elsewhere on the page it disappears.
Any help greatly appreciated. If you you could be as precises in your answer that would be great - I.e where to change the code and what to change to.
Cheers,
Harry

Usually, you add events on body and on the desired dropdown:
$(document.body).on('click', function() {
dropdown.close(); // .hide(); whatever
});
dropdown.on('click', function(event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
However, I think there are jQuery plugins for clickOutisde events that you could use too (they probably work like mentioned above, but you don't have to write it yourself).

I took Jakub Michálek advice and applied it your code. I prepared fiddle so you can test it out: http://jsfiddle.net/tmuuS/
This is your javascript you want to have on your page:
$(document).ready(function () {
$("#expslider").hide();
$("#expshower").show();
$('#expshower').click(function () {
$("#expslider").slideToggle();
});
$(document.body).on('click', function () {
$("#expslider").slideUp();
});
$("#expslider").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
$("#expshower").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
});
Although remember that it's better to have javascript in head tag, not right beside the place where you use it. (hard to look for it later when you need changes)

JQuery... change hover state on focus & Limit keyboard navigation tab area

I'm using a JQgrid in one of my projects (JFiddle LINK). and would like
1.) the save & cancel button to highlight when a user tabs to it (same as on mouse over). Found this post but can't seem to get it working
FIX: based on the answer provided by saratis
after
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
add the following
<script type="text/javascript">
$(document).delegate('a', 'focus', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
$(this).addClass('ui-state-hover');
});
$(document).delegate('a', 'focusout', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
});
</script>
2.) When the user tabs between the fields on the add modal, would it be possible to keep the focus on the modal. eg that when tabbing, the focus only loops between the controls on the modal itself
3.) I'm experiencing a weird issue with the pager not being centered, and not sure what the fix is. I see that an attribute of 106px gets added to pager_left td which is causing it, gut its a generated value, so i'm not sure how to override/disable it
FIX: #pager_left{width:30%!important;}
Would it be possible to achieve any of this?
Thank you

First:
$('.yourInput').bind("mouseenter focus mouseleave",
function(event) {
$('.highlight').removeClass('highlight'); //Remove previous hightlights
$(this).addClass('highlight');
});
I have tried to add this to the fiddle, but I think the modal dialog is written dynamically to the DOM, so the binding should occur after its being placed. And I do not know how to integrate that. Sorry.
For the second part, can be done, but it would be easier when you povided a sample, or even better, as JSDFiddle. -> Looking at it now, I wouldn't know. I'm sure a JS jQuery Guru good do it, but this is too much for me. Again sorry.
Third:
Some good news, don't know the cause, but: #pager_left{width:150px!important;} does the trick.
Sorry I couldn't help more.

Use jQuery to check if any of the modal fields already have focus. If they do, trigger a function on keyup() that checks whether the tab button was pressed (its keycode is 9).
Use this to limit the tab indexing to your form.

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.

This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});

The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>

Use disabled
$(this).attr("disabled","disabled");

Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})

A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.