JavaScript

Covers JavaScript, the most popular browser scripting language, and some clever tips & tricks.

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

11 June 2010 / 14 Comments

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!

Removing, Replacing and Moving Elements in jQuery

8 June 2010 / 5 Comments

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.

Adding Elements to the Page in jQuery

25 May 2010 / 6 Comments

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!

Manipulating Element Classes with jQuery

12 May 2010 / Leave a Comment

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.

Manipulating Element Attributes with jQuery

19 April 2010 / Leave a Comment

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.

Accessing Element Content with jQuery

26 March 2010 / Leave a Comment

Now that you know how to select HTML page elements in jQuery, you can start to do useful things with those elements. In this tutorial you’ll look at how to work with the contents of an element.

jQuery lets you work with HTML elements and element content in many different ways. For example, you can add new elements inside, around, before, or after existing elements; you can replace an element with another element (or elements); and you can read or change an element’s contents. Often the line between working with elements and element content is blurred — for example, when you add new elements inside an existing element, you’re effectively adding to that element’s contents.

You’ll look at adding, removing and replacing elements in a later tutorial. In this tutorial you’ll learn about 3 jQuery methods designed for working directly with the contents of an element:

html() for reading and changing the HTML contents of an element
text() for reading and changing the text contents of an element
val() for reading and changing form field values

As you’ll see, these methods make it very easy to read or change the raw contents or value of any HTML element.

Using jQuery Selectors to Locate Page Elements

8 March 2010 / 4 Comments

As explained in Getting Started with jQuery, typically you use jQuery selectors to locate elements within the page to work on, then call jQuery methods to manipulate those elements.

jQuery selectors are based on CSS selectors, so if you’re familiar with CSS then you already understand the basic idea of selecting elements in the page.

In this tutorial you’ll look at pretty much all of the selectors supported by jQuery. Many of these are the same as CSS selectors, while some are specific to jQuery. For each selector you’ll see an example showing how to use the selector to find page elements.

Getting Started with jQuery

16 February 2010 / 14 Comments

In What Is jQuery?, you learned that jQuery is a JavaScript library that makes it easy to create feature-rich, JavaScript-enabled Web pages.

Now you’re ready to try out jQuery. In this tutorial you’ll learn how to download and install the jQuery library, you’ll explore jQuery objects and the jQuery() function, and you’ll create a simple example jQuery script that brings all the concepts together.

Let’s get going!

What Is jQuery?

4 February 2010 / 2 Comments

In this series of tutorials I’m going to explore jQuery — “The Write Less, Do More JavaScript Library”. If you code using JavaScript then you’ve probably already heard of jQuery — it’s by far the most popular JavaScript library in use today. For example, Microsoft, Twitter and ESPN all use jQuery on their sites.

To kick off the series, this article explains what jQuery is, and the kinds of things you can use it for.

[Read more…] about What Is jQuery?

Adding a WYSIWYG HTML Editor to Your Site

17 December 2009 / 30 Comments

What is a WYSIWYG HTML editor?

A WYSIWYG (What You See Is What You Get) HTML editor is a JavaScript-driven Web form field that lets users enter formatted text, much like using a word processor. The editor then converts this formatted text into HTML when the form is sent to the Web server. Here’s what a WYSIWYG HTML editor looks like:

CKEditor screenshot — CKEditor is a popular JavaScript-based WYSIWYG HTML editor

Most WYSIWYG editors let you do at least the following:

Add formatting such as bold, italic, and underlining
Create headings (H1, H2 and so on)
Create links
Use different font faces, sizes, and colours
Insert bulleted and numbered lists
Create tables
Left-align, right-align, centre, and justify text
Embed images, Flash movies, and more
Edit the HTML directly if desired

Many editors take things further, allowing you to upload images, Flash movies and other files to the Web server, and browse files on the server.

JavaScript

What is a WYSIWYG HTML editor?

Footer

Contact Matt

Follow Matt