javascript

Hold That Website! 12 Things to Check Before Launch

27 January 2011 / 6 Comments

After weeks of hard work, your new website’s ready to launch! It’s uploaded, you’ve set up the domain, and you’re ready to take the wrapping off and reveal it to the general public.

Before you hit the proverbial switch, however, it’s important to check that your site is functioning correctly — especially if you’re launching it with an expensive marketing campaign.

Here’s a list of some important things to look for when giving your site its pre-launch testing.

jQuery Mobile: What Can It Do for You?

5 November 2010 / 37 Comments

jQuery has long been a popular JavaScript library for creating rich interactive websites and web apps. However, since it was designed primarily for desktop browsers, it doesn’t have many features specifically designed for building mobile web apps.

jQuery Mobile is a new project that addresses this shortfall. It’s a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps.

The framework is pretty cutting-edge at the time of writing — in fact, the first alpha version was only released last month — but it’s already possible to do some great things with it.

In this article I’ll look at some of the key features and benefits of jQuery Mobile, and show some examples of how this new framework can help you build top-quality mobile apps in next to no time.

For best results, you’ll probably want to view the examples in this article with a mobile device such as iPhone or Android. Alternatively, Safari on the desktop (with a narrow window width) makes a good substitute.

Let’s go!

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 19 Comments

View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

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.

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.

10 Fantastic Free Web Page Editors

4 May 2010 / 9 Comments

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.

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.

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.

HTML Comments

15 June 2009 / Leave a Comment

Like many programming languages, HTML lets you embed comments within your Web pages. A comment is a piece of text intended just for people to read; Web browsers ignore any HTML comments embedded in a page.

[Read more…] about HTML Comments

Manipulating JavaScript Arrays

19 May 2008 / Leave a Comment

My first tutorial on JavaScript arrays covered the basics: creating arrays, accessing the contents of arrays, array lengths, and looping through arrays.

In this tutorial, you explore arrays in more depth, and learn how to use various methods of the Array object to manipulate arrays.

javascript

What is a WYSIWYG HTML editor?

Footer

Contact Matt

Follow Matt