News & Blog

How To Maintain Height Proportionate To Width in CSS or jQuery

November 28th, 2015 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
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

November 22nd, 2015 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
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

April 10th, 2015 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
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

April 10th, 2015 - Posted by Steve Marks to Javascript / jQuery, Web Development.
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

April 9th, 2015 - Posted by Steve Marks to Javascript / jQuery, Web Development.
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

July 2nd, 2014 - Posted by Steve Marks to Javascript / jQuery, PHP, Web Development.
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

June 6th, 2014 - Posted by Steve Marks to Javascript / jQuery, PHP, Software, Web Development.
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

May 24th, 2014 - Posted by Steve Marks to Javascript / jQuery, Web Development.
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

May 16th, 2014 - Posted by Steve Marks to Javascript / jQuery, Web Development.
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

April 16th, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
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...