Knockout + Bootstrap 3 - Buttons and the `enable` binding

By default, Knockout's enable (and hence disable binding, since they share identical but opposite logic) simply set/remove the disabled attribute. While this work's great with Bootstrap 3's <button />-type elements, it doesn't go so well when using the alternative <a role='button' /> syntax.

The problem is that Bootsrap expects an additional disabled class when disabling <a/> elements, which Knockout doesn't add by default. We can remedy this by enhancing the core enable binding like so:

This additional logic will toggle the appropriate disabled class on all elements with a btn class when bound with the enable or disable bindingHandler.

Durandal - Type cast queryString parameters

By default, Durandal's router.parseQueryString method will simply provide all query parameters as strings, which isn't ideal if you're working with data heavily. We can work around this by overwriting and enhancing the parseQueryString method, type casting variables into their correct types. This is useful for primitive data types, but

Read more

Knockout `value` binding and &lt;input type="number" /&gt;

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

Read more

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