JavaScript Archive

Detecting Location Using Google AJAX API

July 13th, 2009 7 Comments

map 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.

Creating a Shaking Login Form

March 18th, 2009 26 Comments

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

January 12th, 2009 6 Comments

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

December 2nd, 2008 96 Comments

jQuery Keyboard 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.

Creating a Virtual jQuery Keyboard

October 22nd, 2008 145 Comments

jQuery Keyboard 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.

Creating a Slide-in jQuery Contact Form

October 10th, 2008 179 Comments

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

September 28th, 2008 73 Comments

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.

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.

digg-field

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.

<fieldset class=“formContainer”>
    <h3>Join Now! It’s quick and easy.</h3>
    <div class=“rowContainer”>
        <label for=“txtFirstname”>Choose a username</label>
        <input id=“txtFirstname” type=“text” />
        <div class=“tooltipContainer info”>Minimum 4 characters, maximum 15 characters. This is your handle on Digg so don’t make it too personal.</div>
        <div class=“tooltipContainer error”>Rats! Username must be between 4 and 15 characters.</div>
    </div>
   // other rows here
</fieldset> 
 
body{
    font-family:Arial, Sans-Serif;
    font-size:83%;
}
.formContainer
{
    background-color: #F5EFC9;
    border:none;
    padding:30px;
}
.formContainer h3
{
    margin:0px;
    padding:0px 0px 10px 0px;
    font-size:135%;
}
.rowContainer
{
    width:100%;
    overflow:hidden;
    padding-bottom:5px;
    height:34px;
}
.rowContainer label
{
    width:140px;
    float:left;
    color: #758656;
    font-weight:bold;
}
.rowContainer input[type=“text”]
{
    width:200px;
}
.tooltipContainer
{
    height:16px;
    font-size:11px;
    color: #666666;
    display:none;
    float:none;
    background-repeat:no-repeat;
    background-position:left center;
    padding:0px 20px;
}
.info
{
    background-image:url(‘info.gif’);
}
.error
{
    background-image:url(‘error.gif’);
}

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:

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

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.

function validateForm()
{
    $(”.formContainer input[type=text]”).each(function(){
        var text = $(this).attr(“value”);
        if (text == “”)
        {
            $(this).parent().find(”.error”).css(“display”, “block”);
        }
    });
}

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 Digg.com 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.

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.error”).css(“display”, “none”);
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

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

Conclusion

You saw how to recreate the Digg.com 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:

Do not overwork the form – there is really no need for a tooltip that says “Enter your first and last name in the field that says First and Last name”. Instead, you can provide a message that shows a constraint, for example “Maximum 35 characters”.
Use tooltip/validation color other that text color – try hitting the “Continue” button on Digg.com signup form before entering any text. The form becomes very hard to read and it’s difficult to distinguish where one field ends and the next begins.

10 Great CSS Star Raters

August 2nd, 2007 6 Comments

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.

1. Creating a star rater using CSS

Creating a star rater using CSS

Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state. Well, I’m glad you asked because that is just the question I intend to answer.

2. CSS Star Rating Part Deux

Creating a star rater using CSS 2

Explaining how to create a star rating system with state, and more advanced features.

3. Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh).

4. Movable Type AJAX Rating Plugin

Movable Type AJAX Rating Plugin

Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog. There is also a ‘pro’ commercial version with more features if you desire.

5. Textpattern AJAX Rating System

6. WordPress Post Rating System

7. CSS Star Matrix

8. CSS Star Rating System (check out the source code)

9. Ruby on Rails Star Rating

10. ASP Powered Star Rater

CSS Style Switcher

May 21st, 2007 22 Comments

Placing multiple colour or font schemes on your website blog is often an excellent addition, and it can help to customise your look and feel. It’s easy to add multiple stylesheets to your blog, and ensure that the user’s selection is stored on their computer so the style remains the same on each page.

1. Download the styleswitcher javascript file

You need to download the following file, and make sure that it is included in all the pages you’d like to run the style switcher.

Download The File

2. Link to the javascript file in your tag

Go to the area in your index.php source code, just before the tag. Enter the following line of text, to ensure that the javascript file is included correctly:

1	<script type="text/javascript" src="styleswitcher.js"></script>

3. Create the various stylesheets

Make a copy of your main style sheet, and alter the colours and layout to create the new colour scheme for your website. Rename the new style sheet along the lines of “style-orange.css”. Do this as many times as required (you can always add more later).

4. Link to the stylesheets in your header

For the main, default stylesheet, enter the following just after the line we added above including the javascript file. This ensures that this is the stylesheet that loads when the page is opened for the first time.

1	<link rel="stylesheet" type="text/css" href="style.css" title="default" />

For all the other stylesheets you have created, enter a line such as the following, changing the name of the colour for each style sheet you have added. Repeat it for all your additional styles.

1	<link rel="alternate stylesheet" type="text/css" href="style-orange.css" title="orange" />

5. Place CSS switcher links in your page

For each stylesheet you have created, just enter a link similar to the following. This will cause the selected stylesheet for the page to change to the one clicked on in the link. The setActiveStyleSheet(’orange’); part needs to be altered to reflect the title of the alternate style sheets you specified before.

1	<a href="/" onclick="setActiveStyleSheet(’orange’); return false;">Orange</a>

It’s also a good idea to enter a link similar to the following, in case a visitor wants to switch back to the default stylesheet:

1	<a href="/" onclick="setActiveStyleSheet(’default’); return false;">Default</a>

So there you have it – an easy and straight forward way to add additional style sheets to your website, giving your visitors a choice as to which colour or layout they see. This method can also be used for adding a high contrast accessible style sheet, which is something recommended for any website.

Design Shack - Web design showcase, CSS tutorials and web standards