News & Blog
How To Maintain Height Proportionate To Width in CSS or jQuery
There are a lot of times when we find ourselves having to ensure elements retain their proportionality, regardless of the screen size. This might be ensuring an image used as a background image is kept at the correct ratio, or ensuring an element remains exactly square. There are two metho...
Clear Input Placeholder On Focus Using jQuery
The placeholder component of textfields in HTML is a great way to provide the user with a hint on what should be entered, or to remove the need for labels altogether. The default behaviour in some browsers (Chrome, Safari etc) is to leave the placeholder showing until the user starts enter...
The 100% Guaranteed Method To Get YouTube iFrame Embeds Playing in HD by Default
We were recently working on a site where we needed to display a full screen video embedded from YouTube using an iFrame. Now, normally when embedding a video on a site, we’d visit the video on YouTube, click ‘Share‘, and grab the embed code. That normally looks something ...
Prevent Body From Scrolling on Touch Devices using jQuery
There are two scenarios I can think of when you might not want to the user to be able to scroll the window on handheld devices: 1. When a site is designed to fit within the boundaries of a viewport or 2. When a fixed full screen menu or modal window has opened, in which [...]...
DataTables Not Showing Processing Indicator During Server-Side Requests
We use the DataTables jQuery plugin for the majority of applications where we need to display grids. It looks great, has a large number of customisable options available and is easy to work with. When dealing with large amounts of data it’s definitely advantageous to use the in-built...
Laravel Google Maps V3 API Package
Update: Unfortunately it looks like the GitHub repo, and even the GitHub user, linked to in this article no longer exists. I’m not sure why, but if anyone knows of a Laravel version of this library I’ll be happy to update the links accordingly. Almost four years have passed sin...
How to Load jQuery in the Footer of a WordPress Website
If you’re familiar with building WordPress sites that use jQuery you may have seen it included using the following method in the header of a website: wp_enqueue_script('jquery'); wp_head(); You enqueue the script and then when wp_head() is called, the jQuery library will be loaded fo...
Get Current Slide Index of jQuery Cycle 2 Slideshow
I’ve been using the jQuery Cycle plugin for as long as I can remember, and have even blogged about it in the past. Recently I tried the second version of the plugin, aptly named ‘Cycle 2‘, which worked just as well and is definitely an improvement on the original. One iss...
How To Fill Empty Gaps in Isotype
I’ve used the jQuery Isotope plugin on a few sites recently. I absolutely love using it and think it adds such a nice touch to a website, particularly pages such as portfolios and galleries. One issue I’ve been having recently was when displaying an Isotope grid with different ...
How To Create a Torch Effect With jQuery
On the homepage of this site you’ll notice that there is a series of panels advertising each service. My favourite one is the ‘Contact Us‘ panel, mainly because of the effect being used. I call it the ‘Torch Effect‘ because it’s like someone shining a to...