Niall McMahon

The ramblings and occasional intellect from a web developer, music lover and genealogist.

Web Development

I've been involved in the world of web design and development for 8 years now, and still very much enjoy it. Below you will find tutorials, code snippets, ideas, links and anything else that is HTML, CSS, PHP, jQuery and everything in between.

Using the Geolocation API together with Google Maps API

→ Posted in Web Development on 13th February 2012

Although not officially part of the HTML5 specification, Geolocation has become one of a number of new technologies that have recently come to light with advent of HTML5. Remy Sharp and Bruce Lawson also felt it important enough to write a whole chapter about in their brilliant book, Introducing HTML5.

The Geolocation API is used to find the location of your users. You've probably noticed a similar technology on many apps used on smartphones — checking into places through Facebook or Foursquare, for example. The same can be done with most modern web browsers. When used in conjunction with the Google Maps API, you can get some pretty cool results and add some great features to your website or web apps.

It would help if you had a basic understanding of Javascript, jQuery and PHP for this article, but I try to explain everything, so it isn’t essential.

Image rollovers using jQuery and HTML5 data-* attributes

→ Posted in Web Development on 21st December 2011

I have always found that there has never been a really simple way of swapping one image for another when you rollover it. We could use CSS and replace our img tags with elements with background images, and use the :hover pseudo-class to switch them round. But then we lose the semantic value of the image — it wouldn't actually appear in our document's hypertext, couldn't be saved, hyperlinked, etc.

Therefore we generally always have to rely on Javascript for this. However, a lot of methods that implement this just seem messy — especially the awful Javascript code (MM_swapImage) that Adobe Dreamweaver generates. My proposed solution is to use jQuery, a clean Javascript code library, as well as using the relatively new HTML5 data-* attributes.

Code snippet: Customising bullet points of unordered list items, without using images

→ Posted in Web Development on 31st October 2011

I'm sure many people have wanted to be able to customise the bullet icons used in a standard unordered list — I know I have in the past, and had to once again recently, so I've found a solution.

The default solid bullet point can be changed to a number of things using the CSS property list-style-type, such a a circle or square. But with this, you are limited to a few options, and you can't really customise the list style much; for example, if you change the colour of your list item text (by styling the <li>), the bullets inherit this colour too.

Integrate Twitter feed with a cache file using PHP

→ Posted in Web Development on 16th August 2011

The company I work for have numerous Twitter accounts for the various parts of the business, and wanted these feeds to show on the respective websites. I had done something similar to this in the past but had faced problems then with Twitter's request limit (which I believe is around 150 requests an hour). This caused the feed to disappear until the limit reset. I decided to look into writing a reliable solution for this.