Category: JavaScript


30 Free Video Tutorials for Learning Web Design
CSS / 11 May 2010

30 Free Video Tutorials for Learning Web Design

Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.

Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines.

Why You Should Build a Front End Package
CSS / 12 Feb 2010

Why You Should Build a Front End Package

How do you begin building a website?

The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.

Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.

Four Quick and Easy Ways to Embed MP3 Files Into Your Site
HTML / 10 Nov 2009

Four Quick and Easy Ways to Embed MP3 Files Into Your Site

Once upon a time I was in a rock band. When I was building our website, I naturally wanted to put some music up so visitors could listen before purchasing our songs on iTunes. After a bit of research I found out that there are a million ways you could go about it, some better than others. Sadly, after two albums and lots of good times, my band The Van Buren Regulars no longer exists. Fortunately, what I learned about embedding music lives on and is easy enough to pass along.

Today we’re going to look at four easy ways to embed MP3 files into your website. All of these methods are free and take mere minutes to implement. Let’s check them out!

20 Simple jQuery Tricks
JavaScript / 28 Oct 2009

20 Simple jQuery Tricks

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

Here are 20 simple jQuery tricks to get you on your way to JavaScript bliss. The keyword here is “simple” so even if you’ve never used jQuery before, this is the perfect place to start!

How to Use TypeKit on Your Site: Step-by-Step
CSS / 14 Oct 2009

How to Use TypeKit on Your Site: Step-by-Step

Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!

Detecting Location Using Google AJAX API
JavaScript / 13 Jul 2009

Detecting Location Using Google AJAX API

mapThere are times when one needs to find out which part of the world a particular visitor is coming from. There are plenty of IP-to-Location lookup providers out there, who offer this service at a reasonable cost (depending on how much detail you require).

Google’s AJAX Maps API offers this look up for you free of cost (so long your needs are non-commercial). You can even use the latitude and longitude information returned by the API to plot the user’s location on a Google Map. Nifty eh? Let’s now look at a simple example – we will be detecting the user’s location based on his IP address and rendering it on a map.

Before we begin, you might want to check out the demo.

Creating a Shaking Login Form
Articles / 18 Mar 2009

Creating a Shaking Login Form

Tired of the plain old boring login forms? How about we add some jazz! If you have ever typed in your password wrongly on your Mac, you would have seen that the login screen will vibrate and kinda shriek to indicate that the password you entered is wrong. I always found that rather cool! It’s surprising how little this trick is being used in web applications today. So, I thought I will write up a tutorial on how to get this going.

Best of 2008 – JavaScript
Articles / 12 Jan 2009

Best of 2008 – JavaScript

In the last part of our summary series, it is time to see some of the JavaScript Goodies of 2008. Some of the following are resources, some are useful tutorials, some opinions and others just plain fun interesting stuff.

There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.

Pirobox jQuery Lightbox
JavaScript / 2 Dec 2008

Pirobox jQuery Lightbox

jQuery KeyboardLightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages.

I’m pleased to announce that today, in partnership with Pirolab, there’s a new jQuery lightbox script available. It has been designed and created by Diego Valobra. If you’d like to read more about the features and download the lightbox script, click through to read on.

Creating a Virtual jQuery Keyboard
JavaScript / 22 Oct 2008

Creating a Virtual jQuery Keyboard

jQuery KeyboardFor those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.

Creating a Slide-in jQuery Contact Form
JavaScript / 10 Oct 2008

Creating a Slide-in jQuery Contact Form

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.

Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.

Creating a Digg Style Sign Up Form
Articles / 28 Sep 2008

Creating a Digg Style Sign Up Form is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

Before we get started, you may like to view a demo of the end result.

How this form works?

When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.


Let’s start

We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see the HTML structure and CSS classes.

Note that, by default, both info and validation messages are hidden, which is set in tooltipContainer CSS class.

Now let’s add some interactivity

So far we have a static HTML structure and hidden messages waiting to be shown. We have to write a few lines of code to make them appear/disappear. Of course, this can be accomplished by pure JavaScript, but let’s involve jQuery. The reason for this is quite simple – less coding.

Like I mentioned at the beginning of this tutorial, an info tooltip should be shown each time an input field gets focus and hidden when it loses it. Turn this into jQuery code and you get this:

Simple, isn’t it? Now, let’s see how to handle validation messages. We are going to create fake validation just for the purpose of this tutorial. We’ll use jQuery again.

In essence, what the code above does is it shows a validation message for each field that the user hasn’t entered text in. Please keep in mind that this is not real validation, it just simulates what would happen if validation failed. You would have to implement your own logic, eg. check for mandatory fields, email address format and so on.

Ok, after pressing the sign-in button, validation messages will be shown. Signup form on hides these messages and replaces them with info tooltips when the user starts to type. So we are missing a piece of code that will hide validation messages that were previously shown.

Let’s do it the dirty way. We’ll extend our jQuery code that controls the appearance of tooltips to hide corresponding validation messages each time an input field gets focus.

This way we have recreated the signup form. You can check out live demo or download full source code.


You saw how to recreate the signup form with simple CSS and just a few lines of jQuery code. However, there are a few pieces of advice I’d like to give you:

0 0 0 0