Drag-and-Drop with jQuery: Your Essential Guide

Drag-and-Drop with jQuery: Your Essential Guide

Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.

Vintage typewriter: The sexiest jQuery contact form ever

Vintage typewriter: The sexiest jQuery contact form ever

On today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operational thanks to the mighty power of jQuery and CSS. But don’t think that this is pure crazy experimentation, because this typewriter can actually be utilized as a brilliant contact form to place on your different projects.

jQuery-ahm: One-Line Ajax Requests

jQuery-ahm: One-Line Ajax Requests

jQuery-ahm is a tiny (~1kb) jQuery plugin which enables us to create Ajax requests with a smaller code piece.

It is actually a wrapper around the popular $.ajax method and brings a different way of handling callbacks.

Photobooth with PHP, jQuery and CSS3

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

jQuery Sequential List

jQuery Sequential List

Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

Create a Funky Parallax Background Effect using jQuery

Create a Funky Parallax Background Effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.

The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

How to create Skype-like buttons using jQuery

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

Advanced docking using jQuery

Advanced docking using jQuery

Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.

Build an iPad-Themed Image Slider With jQuery

Build an iPad-Themed Image Slider With jQuery

If you’re not a seasoned web developer, it can be quite intimidating to approach a project where your client is looking for something trendy and interactive such as an Apple-centric slideshow.

Today we’ll teach you how you can create just such a project in mere minutes using some awesome free resources from around the web. We’ll walk you through ten super simple steps so even if you have little to no web experience, this project should be a breeze!