We Keep Coding

Using button HTML element for implementing custom checkbox

Is it viable to use <button> element instead of <input type="checkbox" />? Can it break accessibility or in any way affect the user experience? From what I noticed, we lose the element's value and onChange callback, but that's something easily fixed in React.
If anyone wonders, the reason for using would be much easier customization (styling).

To respect accessibility (a11y), if you wish to customize a checkbox, you can use anything, but you will have to map to your change event using an hidden but real <input type="checkbox" /> behind it.
Here is an example taken from the source below.
html {
box-sizing: border-box;
background: #f2f2f2;
padding: 20px 50px
}
/* Inherit box-sizing to make it easier to change the property
* for components that leverage other behavior.*/
*,
*::before,
*::after {
box-sizing: inherit;
}
/*style form to limit width and highlight the long label*/
form {
margin: 1rem auto;
max-width: 750px;
}
/*style wrapper to give some space*/
.wrapper {
position: relative;
margin-bottom: 1rem;
margin-top: 1rem;
}
/*style label to give some more space*/
.wrapper label {
display: block;
padding: 12px 0 12px 48px;
}
/*style and hide original checkbox*/
.wrapper input {
height: 40px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
/*position new box*/
.wrapper input + label::before {
border: 2px solid;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px;
border-radius: 50%;
}
/*radio pseudo element styles*/
.wrapper input + label::after {
content: "";
opacity: 0;
border: 10px solid;
border-radius: 50%;
position: absolute;
left: 10px;
top: 10px;
transition: opacity 0.2s ease-in-out;
}
/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
opacity: 1;
}
/*focus styles*/
.wrapper input:focus + label::before {
box-shadow: 0 0 0 3px #ffbf47;
outline: 3px solid transparent; /* For Windows high contrast mode. */
}
<form>
<fieldset>
<legend>
<h3>What type of accessibilty issues do you see most often?</h3>
</legend>
<div class="wrapper">
<input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
<label for="a11y-issue-1">There are no issues</label>
</div>
<div class="wrapper">
<input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
<label for="a11y-issue-2">Focus styles are not present</label>
</div>
<div class="wrapper">
<input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
<label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
</div>
</fieldset>
</form>
Source: https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

How to change onClick button in knockoutjs

I have a html with some css:
<label class="label-checkbox">
<input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: {checked: true}">
<span style="font-size:14px !important">Test Button</span>
</label>
<style>
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 8px 11px;
border: 1px solid #ccc;
display: inline-block;
color: #ffffff;
border-radius: 6px;
margin: 7px;
background: #253965;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #ffd800;
}
</style>
It works when I remove data-bindings. On click it colors the blue button a yellow one and opposite.
But however, when I add data-binding: click it doesnt work anymore.
I assume that I need to dynamically attach css classes on click event?
Desired behavior:
I want to have data-bind="click: someFunction" but when I click, to have css behavior, and to have function that will catch when is the button checked, and when it is not.

Yes I'm not sure how to manipulate pseudo-classes in the knockout but you can dynamically add and remove CSS class:
<label class="label-checkbox" >
<input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>
<span style="font-size:14px !important">Test Button</span>
</label>
<style>
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 8px 11px;
border: 1px solid #ccc;
display: inline-block;
color: #ffffff;
border-radius: 6px;
margin: 7px;
background: #253965;
user-select: none;
}
label.label-checkbox input.checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #ffd800;
}
</style>
note that I turned your input:checked into input.checked.
Code in the view model:
self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e) {
self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());
}

change element style depending on local storage

I have created a toggle input, where staff can set whether they are in or out of the office. I am using local storage to save the state of the input. When I add more than one toggle input onto the page, each input's state can be changed but when I reload the page all inputs are the same due to the local storage set on the last input ( i.e all to out ).
How do I save each toggles state and use local storage to remember this?
CSS CODE
<style type="text/css">
.toggle {
-webkit-appearance: none;
appearance: none;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
border-radius: 50px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: red;
transition: background-color ease 0.3s;
}
.toggle:before {
content: "in out";
display: block;
position: absolute;
z-index: 2;
width: 80px;
height: 70px;
top: -5px;
left: -10px;
background: #fff;
border-radius: 50%;
font: 30px/70px Helvetica;
text-transform: uppercase;
font-weight: bold;
text-indent: -40px;
word-spacing: 85px;
color: #fff;
text-shadow: -1px -1px rgba(0,0,0,0.15);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
background-color: #4CD964;
}
.toggle:checked:before {
left: 75px;
}
.toggle.in {
background-color: #4CD964;
}
.toggle.in:before {
left: 75px;
}
</style>
HTML CODE
<input class="toggle" type="checkbox" />
<input class="toggle" type="checkbox" />
JQUERY CODE
var toggle = $('.toggle');
toggle.on('click', function(){
if ( $('input[type=checkbox]:checked').length === 0 ) {
localStorage.setItem('result', 'out');
$(this).removeClass('in');
} else {
localStorage.setItem('result', 'in');
$(this).addClass('in');
}
})
if ( localStorage.result === 'in' ) {
toggle.addClass('in');
} else {
toggle.removeClass('in');
}

Your issue is because you're only saving a single state and applying it to all checkboxes. Therefore the state applied last will be given to all on the next load of the page.
To fix this it would make far more sense to use an array. You can then store the state of every checkbox and re-apply when the page next loads, something like this:
var $toggles = $('.toggle').on('click', function() {
var checkedStates = $toggles.map(function() {
return this.checked;
}).get();
localStorage.setItem('checkedStates', JSON.stringify(checkedStates));
$(this).toggleClass('in');
})
if (localStorage.getItem('checkedStates')) {
JSON.parse(localStorage.getItem('checkedStates')).forEach(function(checked, i) {
$('.toggle').eq(i).prop('checked', checked).toggleClass('in', checked)
});
}
.toggle {
-webkit-appearance: none;
appearance: none;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
border-radius: 50px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: red;
transition: background-color ease 0.3s;
}
.toggle:before {
content: "in out";
display: block;
position: absolute;
z-index: 2;
width: 80px;
height: 70px;
top: -5px;
left: -10px;
background: #fff;
border-radius: 50%;
font: 30px/70px Helvetica;
text-transform: uppercase;
font-weight: bold;
text-indent: -40px;
word-spacing: 85px;
color: #fff;
text-shadow: -1px -1px rgba(0, 0, 0, 0.15);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
background-color: #4CD964;
}
.toggle:checked:before {
left: 75px;
}
.toggle.in {
background-color: #4CD964;
}
.toggle.in:before {
left: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="toggle" type="checkbox" />
<input class="toggle" type="checkbox" />
As SO places limits on the access to localStorage in a snippet, please see this fiddle for a working example:
Example Fiddle

Yo need to add an identifier to your checkboxes. Each time a checkbox is changed overwrite the value in localStorage and retrieve on page load. Also, use an array to save it in localStorage, becasue it will be easier to work with native JS objects rather than comma separated string.
See below
HTML
<input name="chk1" class="toggle" type="checkbox" />
<input name="chk2" class="toggle" type="checkbox" />
JavaScript
var toggle = $('.toggle');
function updateStorage() {
var storage = [];
toggle.each(function() {
storage.push({
name: $(this).attr('name'),
checked: $(this).prop('checked'),
})
});
localStorage.setItem('prefix-result', JSON.stringify(storage));
}
function loadStorage() {
var storage = localStorage.getItem('prefix-result');
storage = storage ? JSON.parse(storage) : [];
storage.forEach(function (item) {
$('input[name=' + item.name + ']').prop('checked', item.checked)
})
}
loadStorage();
toggle.on('change', updateStorage);
In your current code, you are using single key to save both values. That may work if you add both values but won't work if you overwrite previous one.

jQuery dragenter or dragover to include children

I am working on an upload script at the moment, and of course it has drag and drop capabilities.
However I am trying to get this to work when I drag a file over my element it adds the class drag-over however because my element has children it is constantly firing because it enters and leaves the element.
What I want to know is how can I expand the *dragenter* / *dragover* to include the main elements children also?
Here is a trimmed down version of my code (please note I have disabled the file input):
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').on('dragenter', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').on('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>

Solved it!!
It is a simple case of instead on on('dragenter') I needed to use bind('dragover')
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').bind('dragover', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>

Apparently this problem is more recurrent than I thought since I found at least 5 questions associated with the same topic.
Unlike "mouseover", the events "dragover" and "dragleave" do not consider the child elements as a whole, so each time the mouse passes over any of the children, "dragleave" will be triggered.
Thinking about the upload of files, I created a widget that allows:
Drag and drop desktop files using $ _FILES
Drag and drop to browser images/elements or url using $ _POST and cURL
Attach a device file using button using $ _FILES
Use input to write/paste url images/elements using $ _POST and cURL
The problem: As everything, both form inputs and images, are within DIVs children, "dragleave" was triggered even if it did not leave the dashed line. Using the attribute "pointer-events: none" is not an alternative since methods 3 and 4 need to trigger "onchange" events.
The solution? An overlapping DIV that covers all the drop-container when the mouse enters, and the only one with child elements with "pointer-events: none".
The structure:
div #drop-container: main div, keep all togheter
div #drop-area: "dragenter" listener and inmediate trigger #drop-pupup
div #drop-pupup: at same leval as #drop-area, "dragenter", "dragleave" and "drop" listener
Then, when the mouse enters by dragging an element to #drop-area, inmediatly shows #drop-pupup ahead and successively the events are on this div and not the initial receiver.
Here is the JS/jQuery code. I took the liberty to leave the PoC so do not lose all the time I lost.
jQuery(document).on('dragover', '#drop-area', function(event) {
event.preventDefault();
event.stopPropagation();
jQuery('#drop-popup').css('display','block');
});
jQuery(document).on('dragover dragleave drop', '#drop-popup', function(event) {
event.preventDefault();
event.stopPropagation();
console.log(event.type);
// layout and drop events
if ( event.type == 'dragover') {
jQuery('#drop-popup').css('display','block');
}
else {
jQuery('#drop-popup').css('display','none');
if ( event.type == 'drop' ) {
// do what you want to do
// for files: use event.originalEvent.dataTransfer.files
// for web dragged elements: use event.originalEvent.dataTransfer.getData('Text') and CURL to capture
}
}
});
body {
background: #ffffff;
margin: 0px;
font-family: sans-serif;
}
#drop-container {
margin: 100px 10%; /* for online testing purposes only */
width: 80%; /* for jsfiddle purposes only */
display: block;
float: left;
overflow: hidden;
box-sizing: content-box;
position: relative; /* needed to use absolute on #drop-popup */
border-radius: 5px;
text-align: center;
cursor: default;
border: 2px dashed #000000;
}
#drop-area {
display: block;
float: left;
padding: 10px;
width: 100%;
}
#drop-popup {
display: none;
box-sizing: content-box;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(to BOTTOM, rgba(245, 245, 245, 1) , rgba(245, 245, 245, 0));
height: 512px;
padding: 20px;
z-index: 20;
}
#drop-popup > p {
pointer-events: none;
}
<html>
<head>
<title>Drag and Drop</title>
</head>
<body>
<div id="drop-container">
<div id="drop-area">
<p>Child paragraph content inside drop area saying "drop a file or an image in the dashed area"</p>
<div>This is a child div No. 1</div>
<div>This is a child div No. 2</div>
</div>
<div id="drop-popup">
<p>This DIV will cover all childs on main DIV dropover event and current P tag is the only one with CSS "pointer-events: none;"</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
</body>
<html>
About jQuery "on", use it with the div id inside on, so you can start event triggers starting "uploading box" hidden.
Finally, I preferred to use "dragover" over "dragenter" because it has a small delay (milliseconds) that favors performance
(https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event).

You can simply hide elements from the mouse interaction with styling:
e.g. add this to the child elements:
pointer-events: none;
Unfortunately support is not great in IE for this: http://caniuse.com/#feat=pointer-events

I found 2 other working solutions.
It works only if you do not have other controller elements (edit, delete) inside the area, because this solution blocks them too:
#drop * {pointer-events: none;}
There is a better solution.
The idea is that you increase a counter every time you enter/hover into/on a new child element and decrease the counter when you leave one of them.
$(document).ready(function(){
var dropzoneCounter = 0;
$('#drag-and-drop-zone').on('dragenter', function(){
dropzoneCounter++;
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
dropzoneCounter--;
if (dropzoneCounter === 0) {
$(this).removeClass('drag-over');
}
});
$('#drag-and-drop-zone').bind('drop', function(){
dropzoneCounter = 0;
$(this).removeClass('drag-over');
});
});

html - how to increase radio buttons size under Firefox,Opera,Safari

I want to keep default browsers appearances for all input elements
I want only increase the size of the radio buttons (no jQuery,no bg image,etc) only
with simple CSS.
I use this simple CSS code:
.bigradio{ width: 2em; height: 2em;}
Which is working only under IE and Chrome, other major browsers (FF,Opera,Safari)
don't want to increasing default radio button size :(
Please help, I need a simple and clean CSS cross browser solution (no jQuery, no hiding default appearance, etc)
Thanks,

Here's a FIDDLE
<input id="radio1" type="radio" name="radio"><label for="radio1" class="radio">Radio 1</label>
<input id="radio2" type="radio" name="radio"><label for="radio2" class="radio">Radio 2</label>
<input id="radio3" type="radio" name="radio"><label for="radio3" class="radio">Radio 3</label>
.radio {
position: relative;
float: left;
clear: left;
display: block;
padding-left: 40px;
margin-bottom: 12px;
line-height: 22px;
font-size: 18px;
color: #666;
cursor: pointer;
}
.radio:before {
background: #fff;
content: "";
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 22px;
height: 21px;
border: 1px solid #bbb;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
box-shadow: inset 0 0 3px 0 #ccc;
-moz-box-shadow: inset 0 0 3px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px 0 #ccc;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label:before {
content: "\2022";
text-align: center;
line-height: 15px;
font-family: Tahoma; /* If you change font you must also change font-size & line-height */
font-size: 44px;
color: #00a0db;
text-shadow: 0 0 4px #bbb;
}

Have you tried this?
input[type=radio] {
transform: scale(3, 3);
-moz-transform: scale(3, 3);
-ms-transform: scale(3, 3);
-webkit-transform: scale(3, 3);
-o-transform: scale(3, 3);
}
JSFiddle
Keep in mind that this will scale the button without affecting the layout around it, i.e. nothing around it will move because of it, so use appropriate margins, paddings, etc.