draggable

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

Doctypes
data- attributes
Some new and improved elements and attributes
More flexible linking
Simpler markup, and
Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 128 Comments

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we’ll take a look at how to create drag-and-drop interfaces with jQuery, and we’ll finish with a complete drag-and-drop example: a simple number cards game for kids.

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

11 June 2010 / 14 Comments

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!

draggable

Footer

Contact Matt

Follow Matt