Blog

Here you’ll find articles about website development, WordPress, and other topics that I’m interested in. I hope you enjoy them and find them useful. Comments and feedback are always welcome!

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

View Demo »

Download Code

(Requires Safari)

If you’ve used a Mac or iTunes at all, you’ve probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar, or using the arrow keys.

It’s a nice effect, but it requires a fair bit of processing power to accomplish. I thought it’d be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript. At the start I had no idea if this was even possible, but I’m pretty happy with the result!

Elated Joins the Smashing Network!

2 May 2011 / Leave a Comment

Dear readers and friends,

We’re delighted to announce that Elated is now part of the Smashing Network! This is an awesome collection of some of the best web design and development websites out there, and we’re honoured that Vitaly and the Smashing Magazine team have included us in the list. Thanks guys!

This means that our best content will now appear on Smashing’s curated network posts page, along with high-quality posts from the other sites in the network. You can also keep track of the best posts across the network via their network RSS feed. It’s well worth subscribing to this feed, as it’s full of fantastic web design and development articles.

This move will be a great way to introduce more readers to our content, and it will also ensure that we’re motivated to keep creating very high quality articles and tutorials for you here at Elated. So it’s all good!

Simon & Matt
Elated 🙂

Object-Oriented PHP: Delving Deeper into Properties and Methods

29 April 2011 / 9 Comments

Welcome to the second article in my series on object-oriented PHP programming. In the first article, we looked at the basics of OOP in PHP — including the concepts of classes, objects, properties and methods — and we saw how to create basic classes and objects in PHP.

In this article, you’re going to delve a bit deeper into properties and methods in PHP. This will give you a solid grounding when it comes to using objects in PHP, before we move on to more advanced topics such as inheritance in later articles.

These are the concepts you’ll explore in this article:

Constructors and destructors, which let your objects do specific things whenever they’re created or deleted
Static properties and methods, for creating class properties and methods that are not tied to specific objects
Class constants, which are handy for storing fixed values related to a class
Type hinting, for restricting the types of objects that can be passed to a method
The __get() and __set() magic methods for overloading property accesses
The __call() magic method for overloading method calls

All set to delve deeper into properties and methods? Great! Let’s go!

IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

15 April 2011 / 5 Comments

Last month, the newest version of Microsoft’s Internet Explorer browser, IE9, hit the streets. Market share for IE9 is already growing rapidly at the expense of older versions of IE, including the much-maligned IE6.

While its CSS3 support still has some major omissions, IE9 has much better CSS3 support than previous versions of IE. This means that you, as a web designer or developer, can use some of the exciting and useful features of CSS3, safe in the knowledge that even IE users can now see the results! (Well, if they’re running IE9, of course.)

In this article we’ll explore some of these new CSS features that are, at last, supported by Internet Explorer, and show what these features can do for you as a web designer or coder.

Of course, most Internet Explorer users are still running earlier versions of IE. There’s still hope though, even for these older browsers! We’ll look at solutions and workarounds for older IE versions at the end of the article.

Object-Oriented PHP for Absolute Beginners

8 April 2011 / 10 Comments

Welcome to the first in a series of tutorials covering object-oriented programming in PHP. In this series you’ll explore the various ideas and concepts involved in object-oriented programming, and learn how to build robust object-oriented PHP applications quickly and easily.

In this tutorial, we’re going to kick things off nice and gently by looking at some really basic concepts of object-oriented programming. You’re going to learn:

What object-oriented programming is
How object-oriented programming can help you write better PHP scripts
Some fundamental concepts, including classes, objects, methods and properties, and
How to start writing object-oriented PHP code.

Ready to explore the world of PHP objects? Let’s get started!

How to Make a Slick Ajax Contact Form with jQuery and PHP

1 April 2011 / 299 Comments

View Demo »

Download Code

Contact forms can be useful way for visitors to contact the owner of a site. They’re easy to use, and since they don’t expose the site owner’s email address in the page, they cut down on spam too.

However, contact forms can also be cumbersome, especially as they’re usually on a separate page. The visitor has to visit the contact form page, fill in the details, view yet another response page, and then try to make their way back to the page they were originally reading.

Fortunately, Ajax gives us a way round this problem. By embedding the form in the page, and submitting the form data via Ajax, the user never has to leave the current page. It also provides a smoother experience for the user.

In this tutorial we’ll build a nice-looking, embedded Ajax contact form that the user can summon up by clicking a link in the page. Along the way, we’ll explore various topics, including:

HTML5 form fields
How to use fallback techniques to make the form function even if the browser has JavaScript turned off
Using CSS techniques to create attractive forms
Writing a secure form mailer using PHP
Animating page elements with jQuery, and, of course…
Using jQuery to make Ajax requests

Before you begin, check out the finished product by clicking the View Demo button above. This opens a new page with some dummy content, and a couple of “Send us an email” links. Click one of these links to display the form.

The demo doesn’t actually send an email anywhere, but the finished code in the download is fully functional. To get the code, click the Download Code button above.

Ready? Let’s get started!

JSON Basics: What You Need to Know

24 March 2011 / 13 Comments

If you’ve developed websites or web apps at all, you’ve probably heard of JSON, at least in passing. But what exactly is JSON? What can it do, and how do you use it?

In this tutorial you’ll learn the basics of JSON. You’ll look at the following topics:

What JSON does
The kinds of things JSON is used for
How to create JSON strings
A simple JSON example
How JSON compares to XML, and
How to work with JSON using both JavaScript and PHP.

Let’s get started!

How to Make an Elegant Sliding Image Gallery with jQuery

16 March 2011 / 66 Comments

View Demo »

Download Code

There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I’ve yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one!

To see what it looks like, click the View Demo button above. It looks best on WebKit browsers such as Safari and Chrome, but other modern browsers should work well too.

For best results, make your browser full-screen. Google Chrome gives the most immersive experience here — view the demo, then choose View > Enter Full Screen.

The gallery is simple to use. Click the left or right edge of the window to move around the pictures (or use the left and right arrow keys on your keyboard). Hover over the main image to view its caption.

I’ve also made the gallery work reasonably well on touch devices such as iPhones and iPads by adding touch and swipe events. (I haven’t yet tested these on the Android browser so your mileage may vary there. Watch this space!)

So how do you make this gallery? In this tutorial I’ll walk you through the process step-by-step, from creating the markup and CSS through to writing the JavaScript code to make the gallery function. If you’d rather just grab the code and get going, click the Download Code button above.

If you like this gallery, please feel free to use the code in your own websites and projects. It’s Creative Commons licensed.

Ready? Let’s get started!

20 Ways to Make Your Freelance Web Business More Productive

25 February 2011 / 6 Comments

Running a freelance web business can be a challenge, and part of that challenge is keeping yourself productive! Inefficiencies, distractions and a lack of organization can all contribute to bogging down your business, killing productivity.

However, armed with some useful strategies and working practices, you can reduce these roadblocks to productivity and make your business run more smoothly and profitably.

In this article you’ll discover 20 useful tips to help you improve productivity in your business. Enjoy!

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 128 Comments

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we’ll take a look at how to create drag-and-drop interfaces with jQuery, and we’ll finish with a complete drag-and-drop example: a simple number cards game for kids.

Blog

Footer

Contact Matt

Follow Matt