Matt Doyle | Elated Communications
Web and WordPress Development
Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.
See also:
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
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!
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.
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:
for loop to move through the elementsarray_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()
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.
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