Practical JavaScript projects, and theoretical advice, for adding interaction and functionality to your web projects.
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.
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!
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!
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!
There 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.
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.
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.
Lightbox 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.
For 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.
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.
Digg.com 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.
People need a way to know what’s great and what isn’t on the web – so rating systems have been around for a long time. Here is a collection of 20 fantastic CSS star rating tools to integrate into your own website.
We’ve tried to include a star rating script for each blogging or coding platform out there.