• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development

Web Development

Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.

See also:
  • HTML
  • JavaScript
  • PHP
  • CSS
  • Perl and CGI Scripting

Smooth Fading Image Captions with Pure CSS3

29 September 2010 / 2 Comments

Smooth Fading Image Captions with Pure CSS3

View Demo »

Download Code

CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.

In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)

Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.

Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.

Ready? Let’s get started!

[Read more…] about Smooth Fading Image Captions with Pure CSS3

Make Your Own PHP Functions: The Newbie Guide

16 September 2010 / 4 Comments

Make Your Own PHP Functions: The Newbie Guide

You’re no doubt familiar with using functions in PHP. The language contains hundreds of built-in functions that you can use for all sorts of handy jobs — from manipulating text through to reading files, sending email messages and processing images.

You’re not limited to using just the predefined functions, though — you can create your own functions too! In this tutorial, I’ll show you how. You’ll learn:

  • Why it’s good to create your own functions
  • How to create and use a function
  • How to make your functions flexible by using parameters
  • All about optional parameters and default values, and
  • How to return values from your functions.

Ready? Let’s get started!

[Read more…] about Make Your Own PHP Functions: The Newbie Guide

25 Web Tech Buzzwords Demystified

9 September 2010 / 5 Comments

25 Web Tech Buzzwords Demystified

The web is a fast-moving industry, and it seems as if a new web technology buzzword emerges every time you blink. From Ajax to WOFF, the array of buzzwords — and the technologies behind them — can be quite bewildering at times.

How are you, dear web developer, to keep up with it all?!

In this article I list 25 key web buzzwords that every modern web developer should understand. For each buzzword, I explain its meaning, talk about why the technology is useful, and include a few links for further reading.

Enjoy!

[Read more…] about 25 Web Tech Buzzwords Demystified

Banish JavaScript in Web Forms with HTML5

3 September 2010 / 4 Comments

Banish JavaScript in Web Forms with HTML5

View Demo »

Download Code

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

  • Not all browsers have JavaScript enabled, or can even run JavaScript.
  • Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
  • Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

[Read more…] about Banish JavaScript in Web Forms with HTML5

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 19 Comments

Create Smooth Rotatable Images with CSS3 and jQuery
View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

[Read more…] about Create Smooth Rotatable Images with CSS3 and jQuery

Easy Ways to Sort Arrays in PHP

16 August 2010 / 2 Comments

Easy Ways to Sort Arrays in PHP

As I mentioned in my earlier article, Creating Arrays in PHP, arrays are very useful if you need to store and manipulate a large amount of data in one go. One useful way you can manipulate this data is to sort it in a particular order.

PHP gives you a large number of sorting functions that can sort arrays using many different criteria. For example, you can sort in ascending or descending order, by key, or by value. These functions make it really easy to sort arrays without getting bogged down in the details of sort algorithms.

We won’t try to cover every single PHP array-sorting function in this tutorial. Instead, you’ll learn about the functions that you’re likely to find the most useful in your everyday coding.

Let’s get started!

[Read more…] about Easy Ways to Sort Arrays in PHP

A Snazzy Animated Pie Chart with HTML5 and jQuery

11 August 2010 / 84 Comments

A Snazzy Animated Pie Chart with HTML5 and jQuery
View Demo »
Download Code

In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

[Read more…] about A Snazzy Animated Pie Chart with HTML5 and jQuery

Super-Easy Animated Effects with jQuery

3 August 2010 / 6 Comments

Super-Easy Animated Effects with jQuery

One of the lovely things about jQuery is it makes it ridiculously easy to animate page elements. Whereas you previously had to mess around with setTimeout() or setInterval(), and lots of JavaScript code, with jQuery you can work wonders with just a line or two of code.

In this tutorial we’ll cover some of the more common effects you can achieve with jQuery. We’ll look at:

  • Fading elements in and out
  • Showing and hiding elements
  • Sliding elements up and down
  • Animating any numeric CSS property
  • Creating an animation sequence
  • Inserting delays into an animation, and
  • Stopping animations.

Ready? Let’s get going!

[Read more…] about Super-Easy Animated Effects with jQuery

Using Multidimensional Arrays in PHP

19 July 2010 / 16 Comments

Using Multidimensional Arrays in PHP

Array elements in PHP can hold values of any type, such as numbers, strings and objects. They can also hold other arrays, which means you can create multidimensional, or nested, arrays.

In this tutorial you learn how to create multidimensional arrays, how to access elements in a multidimensional array, and how to loop through multidimensional arrays.

[Read more…] about Using Multidimensional Arrays in PHP

Your First 10 HTML Tags

13 July 2010 / 18 Comments

Your First 10 HTML Tags

Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.

At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.

[Read more…] about Your First 10 HTML Tags

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • Go to page 7
  • Interim pages omitted …
  • Go to page 17
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits