• 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

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!

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

Kitchen Table: Adding a Lightbox
View Demo »
Download Code

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it.

In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it’s clicked. You’ll also display a caption for the image within the lightbox.

[Read more…] about Kitchen Table: Adding a Lightbox

Working with jQuery Events

24 June 2010 / Leave a Comment

Working with jQuery Events

In this tutorial you’ll learn how to use events in jQuery. Events are fundamental to most JavaScript web apps. Using events, your code can respond to things happening in the browser, such as the user clicking a button, entering text into a form field, or submitting a form.

This tutorial isn’t a comprehensive reference, but it includes the stuff that you’ll need when writing the majority of your scripts. Here’s a full list of the jQuery event methods and properties should you need it.

You’ll explore the following topics in this tutorial:

  • What is an event?
  • Working with events
  • A simple event handler example
  • Shortcut methods for binding common events
  • Accessing the element from within the event handler
  • Getting more information about an event
  • Stopping default actions and event propagation
  • Cancelling event handlers
  • Triggering events yourself

[Read more…] about Working with jQuery Events

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery
View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

  • A wooden table background image for the photos to sit on
  • Each photo “floats” onto the table as it loads
  • Each photo is given a random position and orientation to create a “scattered” effect
  • The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
  • Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

[Read more…] about Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

Removing, Replacing and Moving Elements in jQuery

8 June 2010 / 5 Comments

Removing, Replacing and Moving Elements in jQuery

In Adding Elements to the Page in jQuery, you explored a number of ways to add new HTML elements — such as paragraphs and images — to a page. In this tutorial you learn how to manipulate existing elements in the page, including:

  • Removing elements from the page using the empty(), remove(), detach() and unwrap() methods
  • Replacing elements with new elements by using the replaceWith() and replaceAll() methods, and
  • How to move an element from one parent element in the page to another.

Once you’ve read this tutorial, you’ll have mastered all the jQuery techniques you need to manipulate elements in the DOM.

[Read more…] about Removing, Replacing and Moving Elements in jQuery

Getting to Know Photoshop’s Toolbox

4 June 2010 / Leave a Comment

Getting to Know Photoshop's Toolbox

One of the first things you encounter when you start using Photoshop is its toolbox. You use the toolbox to access all of Photoshop’s tools, letting you do anything from moving stuff around through to painting, filling with colour, creating text, and lots more.

The toolbox contains 28 icons and around 60 tools, and it can seem bewildering if you’re not used to it. Never fear — it all starts to make sense once you get to know your way around the various tools, and understand how they’re grouped together.

This tutorial gets you up to speed with the Photoshop toolbox, and each of the tools it contains. By the time you’ve finished reading it, you’ll be well on your way to working proficiently with the Photoshop toolbox, and you’ll have a good general understanding of all the tools in Photoshop too.

Let’s get started!

[Read more…] about Getting to Know Photoshop’s Toolbox

Using foreach to Loop Through PHP Arrays

27 May 2010 / 2 Comments

Using foreach to Loop Through PHP Arrays

Often you need to move through all the elements in a PHP array so that you can do something with each element’s value. For example, you may want to display each value in an HTML table, or give each element a new value.

In Counting PHP Array Elements Using count(), I showed how you can use a for loop along with the count() function to loop through an array. However, there’s a much easier way to loop through arrays: the foreach construct.

In this article you learn the basic syntax of foreach, and see how to use it to loop through both indexed and associative arrays.

[Read more…] about Using foreach to Loop Through PHP Arrays

Adding Elements to the Page in jQuery

25 May 2010 / 6 Comments

Adding Elements to the Page in jQuery

One of the lovely things about jQuery is that it makes it really easy to manipulate content in the page. With just a few method calls, you can quickly add, remove, and replace page elements, as well as move elements around the page’s DOM tree.

In this tutorial you explore various jQuery methods for adding new content to the page. You look at:

  • Adding content at the start of an element (or elements) with prepend() and prependTo()
  • Adding content at the end of an element (or elements) with append() and appendTo()
  • Adding content before an element (or elements) with before() and insertBefore()
  • Adding content after an element (or elements) with after() and insertAfter(), and
  • Wrapping content around an element (or elements), or around an element’s contents, with wrap(), wrapAll() and wrapInner().

As well as using the above methods, you can also add new content to an element using the html() and text() methods. Find out more in Accessing Element Content with jQuery.

The tutorial’s quite lengthy, but once you understand the basic concepts you’ll find that all the methods work in a similar way. You’ll also find lots of code examples to make things clear. So let’s get started!

[Read more…] about Adding Elements to the Page in jQuery

Using Photoshop’s Smart Filters

19 May 2010 / 4 Comments

Using Photoshop's Smart Filters

Smart Filters, first introduced in Photoshop CS3, let you apply any of Photoshop’s filter effects to a layer non-destructively. This means that — unlike a regular filter — a Smart Filter doesn’t permanently alter the pixels in a layer.

Smart Filters give you a lot of creative freedom. For example, you can:

  • Toggle a Smart Filter on or off. Unlike a regular filter, where the effect is permanently applied, you can reverse the effect of a Smart Filter by just turning it off, or deleting it altogether. You can also easily compare an image with and without the filter effect by toggling the filter.
  • Go back and edit a Smart Filter’s settings at any time. Smart filters are totally re-editable. Want to make a Gaussian Blur effect more prominent after you’ve applied it? Just double-click the Smart Filter and increase its Radius value.
  • Easily mask off parts of a Smart Filter. This is my favourite Smart Filters feature. Each layer comes with its own filter mask, letting you selectively hide parts of a filter’s effect in the image by painting on the mask.
  • Apply blending options to Smart Filters. Just as with layers, you can give each Smart Filter its own blend mode and tweak its opacity.

In this tutorial you’ll learn how to do all of these things with Photoshop’s wonderful Smart Filters. Let’s get going!

[Read more…] about Using Photoshop’s Smart Filters

WinSCP Tutorial – How to Upload Your Site with WinSCP

17 May 2010 / Leave a Comment

WinSCP Tutorial - How to Upload Your Site with WinSCP

WinSCP is a popular free FTP program for Windows. An FTP program lets you transfer files between your computer and your Web server.

In this introductory tutorial, you’ll learn how to use WinSCP to upload your website’s files to your server.

This tutorial assumes you’ve already downloaded and installed WinSCP. It also assumes you’re using WinSCP with the “Commander” interface, rather than the “Explorer” interface. (To change interfaces in WinSCP, choose Options > Preferences, then click the Interface option and select either Commander or Explorer.)

[Read more…] about WinSCP Tutorial – How to Upload Your Site with WinSCP

Manipulating Element Classes with jQuery

12 May 2010 / Leave a Comment

Manipulating Element Classes with jQuery

In Manipulating Element Attributes with jQuery, you explored 2 jQuery methods for working with element attributes: attr() to read, add, and change attributes, and removeAttr() to remove attributes.

In this tutorial you’ll look at some jQuery methods for working specifically with the class attributes of elements:

  • hasClass() to check if an element has a certain class
  • addClass() to add a class to an element
  • removeClass() to remove a class from an element
  • toggleClass() to add a class to an element if it doesn’t already have it, or remove a class if it does

While you can use attr() and removeAttr() to work with classes, these class-specific methods are more useful because:

  • They’re easier to use on classes
  • You tend to work with CSS classes a lot with jQuery, and
  • class attribute values often contain multiple class names, making them more complex to deal with than most other attributes.

Let’s take a look at each of these methods in turn.

[Read more…] about Manipulating Element Classes with jQuery

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 6
  • Go to page 7
  • Go to page 8
  • Go to page 9
  • Go to page 10
  • Interim pages omitted …
  • Go to page 25
  • 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