• 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 / JavaScript

JavaScript

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

See also:
  • The Document Object Model
  • jQuery
  • JavaScript Arrays

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

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

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

Accessing Element Content with jQuery

26 March 2010 / Leave a Comment

jQuery logoNow 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.

[Read more…] about Accessing Element Content with jQuery

Using jQuery Selectors to Locate Page Elements

8 March 2010 / 4 Comments

jQuery logoAs 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.

[Read more…] about Using jQuery Selectors to Locate Page Elements

Getting Started with jQuery

16 February 2010 / 14 Comments

jQuery logoIn 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!

[Read more…] about Getting Started with jQuery

What Is jQuery?

4 February 2010 / 2 Comments

jQuery logoIn 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.

[Read more…] about Adding a WYSIWYG HTML Editor to Your Site

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to page 6
  • 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