Matt Doyle | Elated Communications
Web and WordPress Development
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!
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.
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:
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:
Ready? Let’s go!
[Read more…] about Kitchen Table: A Slick Photo Light Table Using CSS3 and 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:
empty(), remove(), detach() and unwrap() methodsreplaceWith() and replaceAll() methods, andOnce 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
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!
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.
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:
prepend() and prependTo()append() and appendTo()before() and insertBefore()after() and insertAfter(), andwrap(), 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!
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:
In this tutorial you’ll learn how to do all of these things with Photoshop’s wonderful Smart Filters. Let’s get going!
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
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 classaddClass() to add a class to an elementremoveClass() to remove a class from an elementtoggleClass() to add a class to an element if it doesn’t already have it, or remove a class if it doesWhile you can use attr() and removeAttr() to work with classes, these class-specific methods are more useful because:
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.