Develop Reference

Updating Button Label When Detecting Number of Open Divs Doesn't Work Properly

I almost got my function to work but I'm missing some ingredient.
I have 3 boxes with their own toggle open close button.
I have an Open All / Close All button that detects the number of open boxes, and switches its text label from 'Open All' to 'Close All' when all 3 boxes are open.
It works fine, except if you start out by clicking on the (red) Open All button after loading the page — and then manually close each individual box — and toggle them open again. Then the red Open / Close all button doesn't detect the opened boxes, and its text label doesn't switch from Open All to Close All.
I know it's unlikely that anyone would use the system this way, but I just want to understand why it stops detecting the number of open boxes.
http://codepen.io/StrengthandFreedom/pen/Yyemqa
// Open/close all boxes
$('.show-hide').on('click', function(){
event.preventDefault();
$('.box').siblings().toggleClass('is-visible',
$('.box').length != $('.box.is-visible').length);
$('.open-all').toggleClass('hide-text');
$('.close-all').toggleClass('show-text');
});
// Toggle boxes individually
$('.toggle-button').on('click', function(){
$(this).next('.box').toggleClass('is-visible');
// Count number of open (visible) boxes
var numOfVisible = $('.is-visible').length;
// if open boxes equal 3, switch button label
if (numOfVisible === 3) {
$('.open-all').addClass('hide-text');
$('.close-all').addClass('show-text');
}
// otherwise do the opposite
else {
$('.open-all').removeClass('hide-text');
$('.close-all').removeClass('show-text');
}
});
Can someone point me in the right direction? :-)

I think you just need to use
var numOfVisible = $('.box.is-visible').length;
instead of
var numOfVisible = $('.is-visible').length;
DEMO

Here is my solution:
http://codepen.io/anon/pen/epMJRz
This is the change on jquery code i made to make it work:
$('.show-hide').on('click', function(event){
event.preventDefault();
$('.toggle-button').trigger('click');
});
Had to refork it to resolve a bug now its perfect

Safari click != focus on radio button

The Question
How can I make a hidden div (triggered by radio button) show/hide for people that click it or tab through it in all browsers (Safari is my problem).
The Story
I have an html form with hidden div's scattered throughout to hide questions that might not need to be asked in some scenarios. Most of the hidden div's are triggered by radio buttons, so I decided to build the following script. I used .on("focus") so the hidden fields will work for people tabbing through the form.
$("#loan-application").on("focus","input.toggler,span.toggler", function(){
var $show = ($(this).data("show")) ? $($(this).data("show")) : false,
$hide = ($(this).data("hide")) ? $($(this).data("hide")) : false;
if($show){
$show.stop(true).show({animation: "blind", duration: 1000}).addClass("active");
if($show.data("validate")) $show.find(":visible:input.mandatory").addClass("required");
}
if($hide){
$hide.not($show).each(function(){
var $this = $(this);
$this.stop(true).hide({animation: "blind", duration: 1000}).removeClass("active");
($this.data("validate")) ? $this.find(":input.mandatory").removeClass("required") : $this.find(":input.mandatory").addClass("required");
resetForm($this);
});
}
});
This code accomplishes the task in all browsers except Safari. If the radio button is clicked in Safari, it does not "count as focus" and the hidden field is not shown. So I tried switching the event to fire .on("click focus") which kind of works; however, if there are additional hidden divs within a previously hidden div, the content of the additional divs will expand outside of the parent into other text because the parents height does not change with the additional hidden divs.

You can create click handler set focus.
Inside the click handler, you can use document.activeElement to determine if the element has focus already.
More information here: How do I find out which DOM element has the focus?

jQuery .click function executes twice in a row

I'm working on my first program using jQuery, but I'm having an issue. I have a dialog pop up on pageLoad that asks the user to select a date and a turn. Right now, for debugging purposes, I have it alert every time .click() executes, and for some reason, it seems like it executes before the user clicks and immediately afterward.
There are three radio buttons, Turns 1, 2, and 3. When the user clicks Turn 1, the alert should say "1". When the user clicks Turn 2, the alert should say "2", etc. But for some reason, it alerts the previous value as well as the new one. I searched all of my code, and there is only one alert, so I can't figure out what is calling click() twice. I've tested it in IE and Chrome and it happened both times.
This is my .click() function:
$("#turn-radio")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
If you check this jsfiddle, you'll see the rest of my code, which will hopefully make it easier to figure out what my problem is.
Thanks!

You need to change selector: as your radio button IDs are different and you were giving name as a selector that's why you were facing that problem:
$("input[name='turn-radio']")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
Updated Fiddle

changing
$("#turn-radio") to $("#turn-radio label")
causes only one popup displaying the previous value
But, personally i would
$("#turn-radio input").change( function() { /* do stuff */ } )

Preventing double-click bug with checkbox + label combination

Note this issue may not apply to the general public, as it does not occur unless you're a fast clicker. (150-200ms/click) The reason I'm posting this issue is because my application has a form with 20+ checkboxes next to each other, and after extensive research I've found no related questions on this matter.
Here's a simplified scenario - 4 checkboxes and 4 labels, one for each checkbox id:
[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4
Assume in each case all CBs are unchecked.
Expected Behavior:
I click on the 4 CBs in rapid succession, they will all become checked. (true)
I click on the 4 Labels in rapid succession, and the corresponding CBs become checked. (only true for Chrome, but still not optimal)
Actual Behavior for case 2 on Win 7 (clicking on labels, because as you know, labels are big and style-able, and the checkboxes are tiny and OS-dependent):
(In Firefox 19) CB2 and CB4 are left unchecked, and while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
(In Chrome 26) All CBs get correctly checked, but while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
(In IE 10) CB2 and CB4 are left unchecked, but no false highlighting.
The erroneous behavior could be justified if the clicks are on the same element. In our case those are clearly unique checkboxes with different IDs and Names. So the results are wildly unexpected.
So my question is:
Is there a way to disable firing the double click event when I rapidly click on the different checkboxes, but yet still check them with fast single clicks?
The closest I've come to is the following script, which interestingly made Firefox behave like Chrome, and Chrome behave like Firefox:
jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
console.log('ugly hack fired');
$(this).click();
event.preventDefault();
})

Finally got one very ugly hack that worked for all the browsers, hopefully this will help anyone else who comes across the problem:
Disable selection with css because doing it in JS is simply too inefficient:
.form_class input[type=checkbox] + label{
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
Prevent ALL clicking in JS, and manually do what clicking should do:
jQuery(document).on('click', '.form_class input:checkbox+label', function(event){
// Assuming label comes after checkbox
$(this).prev('input').prop("checked", function(i, val){
return !val;
});
event.preventDefault();
})

This would do it-
$("input[type='checkbox']").dblclick(function (event)
{
event.preventDefault();
});

Try this:
$(document).on('dblclick', 'input:checkbox, label', function (event) {
event.preventDefault();
// Your code goes here
})
OR
$("input:checkbox, label").dblclick(function (event) {
event.preventDefault();
// Your code goes here
});
OR
$('input:checkbox').add('label').dblclick(function (event) {
event.preventDefault();
// Your code goes here
});

I was also facing a similar issue which had me spend whole night on how this can be fixed for checkbox. I was also listening to the 'dblclick' event to prevent any action from happening on double click on a checkbox.
ex:
#(".some_class").on("dblclick",function(event){
event.preventDefault();
});
But the problem here was that it was firing the event after the action was done. So all the damage was already done.
There is a very simple way to tackle this problem that is by listening for the event 'change' instead of listening to 'click'. In this was we are triggering the event when there is a state change from check to unchecked or from unchecked to checked and not on click or double click.
#(".some_class").on("change",function(event){
event.preventDefault();
});

$('.checkbox_class').click(function(event){
if (event.ctrlKey){ event.preventDefault();
//rest of the code
seems to work

disallow selection inside an input element

I am looking to do the following
Disallow text selection inside of an input element
Do not show the cursor carrot inside of an input
i cannot simply blur the input on click, focus must remain in the input. There is probably a way to do this in just IE, i would of course rather have a cross browser solution but ill settle for IE (or FF) only solution.
Here is a demo page where you can see why i might need this functionality:
http://programmingdrunk.com/current-projects/dropdownReplacement/
if you click on the dropdowns in the first row on page, you will see the carrot inside the dropdown which looks funny. (this wont happen in chrome, but will in FF or IE)

A bit hacky, but:
onclick="this.selectionStart=this.selectionEnd=-1;"
onselect="this.selectionStart=this.selectionEnd=-1;"
Seems to work in Firefox (3.6.3).
Do us all a favor and hide it from the HTML, though (attachEvent magic).. And don't tell anyone I suggested this :)

I use the following function in my code, it's not JQuery but it should be fairly easy to convert:
function disableSelection(elm) {
// Disable the selection of `elm` - should work for all major browsers except Opera
// which doesn't seem to allow disabling selections unless the mousedown
// events etc are cancelled as far as I know
// Disable the select start event
elm.onselectstart = function() {
return false
}
// Disable in IE - see http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx
elm.unselectable = "on"
// Disable in Mozilla - see https://developer.mozilla.org/en/CSS/-moz-user-select
elm.style.MozUserSelect = 'none'
// Disable Safari/Chrome
// See http://help.dottoro.com/lcrlukea.php
elm.style.webkitUserSelect = 'none'
// Disable in other browsers
elm.style.userSelect = 'none'
// Display a normal cursor
elm.style.cursor = "default"
}

You can disable text selection in some non IE browsers with CSS user-select.
-webkit-user-select:none;
-k-user-select:none;
-moz-user-select:moz-none;
user-select:none;
Not sure about IE.
As far as the effect you're trying to achieve, how about making the input invisible and have a div on top of the input that displays the value of the input?
If you need to change the value in the input, a click event on the div would direct focus to the input, and a keypress event would update the div.
Haven't tried it, but seems like it should work.
EDIT:
Use CSS to render the input invisible in order to retain tabbing functionality.
(Example assumes background is #FFF)
#myInput {
border-width:0;
color:#FFF;
background:#FFF;
outline:0;
}