How To Use jQuery 3 with a Fallback to v1 (for IE8)

With the release of jQuery 3 (and recently 3.1) we as developers have been able to use many new features – as well as having performance increases (at least visually). So it’s a no brainer to use it over previous versions, or is it? With the release of the v2 branch the jQuery team announced that it wouldn’t be supporting IE6-8. And… if you’re working on commercial projects, this sucks. Luckily you can use the latest version and fallback to … Continued


Detecting if a User is on a Touch Screen Device in JS

Whilst recently working with native date pickers on mobile browsers, Chrome and Opera we came across an issue. The native datepicker wasn’t acting as we wanted – but we had no control over it (you can’t trigger a native datepicker to open in Chrome!). Because of this we wanted to fallback to a custom date picker (think jQuery UI) if a native date picker didn’t exist or if the browser is on a desktop. We’ll focus on the ‘is on … Continued



Smoother JS Animations with requestAnimationFrame

Within Javascript, if you ever worked on creating animations you’ve probably been dependent on the setTimeout() or setInterval() functions to do much of the work for you – incrementing a value at each execution and moving or changing an element. The situation in the code snippet below might look familiar, a function which contains a setTimeout() which changes a value, either continueously by calling itself or until a point by checking a condition with an if statement.


How to: Convert a String to Hex Colour (with JS)

For this site, when you hover over the Designed by a Turtle logo a colour is shown – which changes through out the site but isn’t random using JavaScript (I’ve updated the site since this post). On a previous theme for Designed by a Turtle, a colour was picked based on the document title. That meant you could refresh the page and the colour would stay the same – but each page had a unique random colour. This was done … Continued


-0 === +0

I came across an interesting tweet from @getify the other day which mentioned the difference between -0 and +0 in JavaScript. This was news to me and it took a few moments to grasp the concept of both a positive and negative zero.


HTML5 Fullscreen API

Closely related to the <video> tag, the fullscreen API is an incredibly simple and easy to use API for using with JavaScript to maximise the window fully, as you would do if you pressed F11. Contrary to just pressing F11 however, the fullscreen API allows people to go fullscreen from the website itself, by using a link or at any point necessary.


Target Android Devices with JavaScript

Having recently created an Android app and an accompanying website to match, I wanted to know how to detect an android device through the site using JavaScript. On the site a download button was created and depending on the device would either say, ‘Download .APK’ or ‘Install App’. I thought this was a clever idea to adapt the site based on what would happen after you download the APK.



HTML5 WebKit Speech Input

With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.


Horizontal Scrolling with jQuery [Updated]

The large majority of websites on the internet prefer vertical, portrait pages and for a good reason. Vertical pages work well with the way we read and the hardware that we use. But sometimes, just sometimes, it is nice to be different and build a website around the horizontal axis. This, however, poses limitations because the computer mouse, and it’s mouse wheel, does not scroll sideways – but this can be rectified with good-ol’ jQuery.


Feature Detection with Modernizr

Many of you, if you’re reasonably up-to-date with web design at the moment, will have heard of and used Modernizr but for everyone else out there, this article’s for you. Modernizr is an independent JavaScript micro-library to help you develop modern websites but with graceful degradation. It enables you to specify different CSS depending on if a feature is present in the browser or not (as shown in the example below).