jQuery UI overflowing droppables

If you’re working on a site using jQuery UI, the Draggable, Droppable, and Sortable built in functionality can save a lot of time making a web application interface dynamic. As such they’ve become a mainstay for millions of websites.
However I recently came across a frustrating issue with the scope of droppable drop targets which caused (in my opinion) unexpected behaviour. In short, droppable elements which were hidden by a parent container boundaries with overflow: auto or overflow: hidden were still triggering the droppable functionality regardless of whether the drop target was visible or not. Not only does this cause unexpected behaviour when dealing with a fairly basic list of droppables, it causes even more confusion if you place multiple lists of droppables together as the drop event will then be fired on multiple elements (after bug fix #6009, anyway).

Here is a simple demonstration of the problem – try moving the draggable element around the list of droppables and see the problem.

After lots of searching and trial and error, I came up with the solution of checking whether the mouse event was within the boundary of the parent element on every drag start, end or drop event. This does mean handling the hover classes yourself, but that gives you more granular control anyway!

Feel free to use this code, or comment with a better technique!


Collaborative Music Tastes

For the past year, most of my working life has been spent listening to music using a service – now discontinued – called Soundrop.


Soundrop was an app in the Spotify app ecosystem which offered music genre-based listening rooms with group chat and democratic track queueing; whichever track in the playlist had the most votes got moved to the top of the queue to play next.

This method of listening to music is by far my favourite, as it has brought me to new music of all sorts of genres which I wouldn’t have listened to without a recommendation from someone else passionate about music. Just the simple fact that every track played has been added and voted for by at least one person means that every track I listen to has a vote of confidence from someone who shares my music taste enough to be in the same room as me. If you’ve never tried social music listening like this, I thoroughly recommend it.

However, at the start of 2015 Spotify sadly moved away from their embedded app ecosystem, which disappointed many users of a variety of apps and caused most of the communities built in Soundrop to disintegrate. Some of the more tight-knit groups of listeners decided they didn’t want to lose the service they had loved and community they had built up over several years, so a couple of community projects were launched to form a replacement service.


The most serious Soundrop replacement, and the one which I have contributed a little bit of effort towards and hope to contribute more towards in the future, is called Soundbounce, and you can download it for Windows and Mac OS X today at soundbounce.org

All the code is hosted on the lead contributor Paul’s GitHub: https://github.com/pdaddyo/soundbounce

If you like the idea and want to contribute, please feel free to check out the issue list and send a pull request!


Musical Statistics

I knew there was a reason I loved Last.fm. This is it: statistics drawn from years worth of data, rendered as beautiful, easy to interpret, crisp vector graphics. (click to enlarge)

listening-trends tube-tags gender-plot


Career Puzzles

I recently attended a careers fair at Heriot-Watt university, and was pleased to find that amongst all the usual junk produced en masse and handed out to students who don’t really care in the hope of grabbing their attention (pens, keyrings, bottle openers, leaflets, free sweets, money…), I found something which actually caught my interest – a simple wooden puzzle, where you have to assemble 7 tetris-like blocks to make a small cube.

The company handing these little branded puzzles out was Skyscanner, a rapidly expanding, now multinational tech company based in Edinburgh.

Little details like this are the kind of thing which make me want to apply to one company over another for a job; if there are innovative minds in there coming up with things like this and being allowed to run with them, chances are the company ethos is going to be open-minded enough to fit in with my way of working.

Anyway, I had the urge to take the puzzle a step further, and asked the woman running the booth if I could have 27 of these freebies to make a larger cube, and make a stop-motion video of the creation process. This was my entertainment for the whole afternoon!



New Site, New Services

I’m writing this at 5am, having had a bout of inspiration and redeveloped this website, having put it on the backburner for a year… or two.

While it may not look like much, behind the simple website I have refreshed the core of how I market myself and my services; I am now aiming to develop a brand which represents me as a web project manager, development consultant and freelance wordpress developer, rather than just another php coder.

Over the coming days I’m also going to launch my hosting platform properly and publicly – previously my hosting services had only been open to web development clients, but I now have a proper management and payment processing system in place so I can start taking on normal hosting customers too.

Anyway, since this blog has just begun and is looking a little bare, let’s start it off with a completely unrelated photo, a deceiving panorama from atop the Arc de Triomphe in Paris, taken by myself last month while travelling.

I think I might make a habit of this; technical posts with uninteresting text but a bright and colourful (unrelated) photograph!


Panorama taken from atop the Arc de Triomphe, Paris

Panorama taken from atop the Arc de Triomphe, Paris