Knockout `value` binding and <input type="number" />

The problem

Knockout's default value binding is great in most cases, but when using the new HTML5 <input type="number" /> element, it will always return an empty string when the input is a non-number i.e. contains anything but 0-9 and a decimal!

This is actually a byproduct of the number type's WHATWG specification

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

Luckily, the specification also provides a means of retrieving the input's value as a number, via the valueAsNumber property. When a non-numeric string is used, this will return NaN.

The solution

We can enhance Knockout's selectExtensions.readValue, which is utilised by the value binding to add support for this feature where possible:

Note: A byproduct of this implementation is that it will prevent people typing non-numeric characters! There's no easy way around this unfortunately...

ui.draggable.exclusive - Exclusive draggables

Shout out to to my friend and colleague Steve Henderson who came up with the original concept behind this idea! UI.Draggable(s)... they're not exclusive! jQuery UI's draggable and droppable component's are great, and are used widely throughout the web to provide consistent, well tested drag/drop functionality across

Read more

CKEDITOR `key` event - modifier keys

When subscribing to the key event on a given CKEDITOR instance, the event.data.keyCode property will be the sum of both the associated keyCode and any pressed modifier keyCodes e.g. ctrl/shift/alt keys as noted on the official documentation keyCode : Number A number representing the key code

Read more

Bootstrap 3 - Disabled dropdown links

Bootstrap 3 has built-in visual support for disabled dropdown menu items as seen from their dropdowns.less file: However, these are simply visual changes and don't actually impact the interactivity of the element itself, meaning it will still be clickable! We can get around this by utilising a combination of

Read more

jQuery UI Draggable - Droppables in an iFrame

The scenario You've got the usual drag and drop use case, but you want to have your draggables in the top window, and the droppables within an iframe (located on the same domain, ofcourse!). jQuery UI doesn't support this use case, and as such the offset of the container frame

Read more

qTip2 - Now on jsDelivr

qTip2 is now officially available through the jsDelivr CDN, and is the CDN of choice for the library starting from today's update! jsDelivr has better performance and availabilty than current the CDNJS service, so it's a welcome addition to the libraries availablity. You can grab the latest stable releases (and

Read more

60fps scrolling using `pointer-events: none`

Ryan Seddon just posted a very useful CSS tip to increase your scrolling speeds via use of pointer-events: none, based on Christian Schaefer's tweet: @paul_irish Easy. Apply "pointer-events: none" to the <body> on scrollstart and remove it on scrollend. @tabatkins— Christian Schaefer (@derSchepp) November

Read more