• 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

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

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

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

Counting PHP Array Elements Using count()

6 May 2010 / Leave a Comment

Counting PHP Array Elements Using count()

Often it’s useful to know how many elements an array contains. Here are some common reasons for counting the number of elements in an array:

  • You can then use a for loop to move through the elements
  • You can display the total number of elements to the user (such as the number of search results returned)
  • You can calculate the average of the values in the array (in conjunction with array_sum())

PHP makes it easy to count array elements, thanks to its built-in count() function. In this tutorial you’ll learn how to use count() to count the elements in both regular and multidimensional arrays, and how to move through all the elements of an indexed array by using count() and a for loop.

[Read more…] about Counting PHP Array Elements Using count()

10 Fantastic Free Web Page Editors

4 May 2010 / 9 Comments

10 Fantastic Free Web Page Editors

Every Web designer and coder needs a Web page editor to create and edit HTML, CSS and JavaScript code. Notepad (Windows) and TextEdit (Mac) are fine when you’re starting out, but you’ll soon want to graduate to something a bit more substantial.

There are hundreds of excellent editors to choose from — many of them paid — but what if you’re a coder on a budget? In this article I’ll take a look at some great free options out there.

[Read more…] about 10 Fantastic Free Web Page Editors

Manipulating Element Attributes with jQuery

19 April 2010 / Leave a Comment

Manipulating Element Attributes with jQuery

In Accessing Element Content with jQuery, you learned how to use jQuery to read and change the contents of HTML elements. This tutorial concentrates on reading and changing element attributes.

[Read more…] about Manipulating Element Attributes with jQuery

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