Recently, while working on some client projects, I noticed a few requirements(I know there are many) that were common. I strongly feel, this will be useful for your next web project.

1. Empty form field value on focus/click

This is a very common requirement. You would have noticed form fields that have a value by default which disappears when you click/focus on them. When you click outside, the value appears again.

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
 
05
<script charset="utf-8" type="text/javascript" src="jquery.emptyonclick.js"></script>
06
 
07
<script type="text/javascript">
08
$(document).ready(function(){
09
    $('.emptyonclick').emptyonclick();
10
});
11
</script>
12

2. Truncate lengthy text with either a "more" button or 3 dots at the end

I am sure that most of you would already have faced this issue, especially with lengthy breadcrumbs. You don't have to run behind and bother a programmer anymore for a solution.

Truncate is an awesome jQuery plugin that helps you achieve this in seconds. Download the plugin and include the following code within the head tags

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
 
05
<script charset="utf-8" type="text/javascript" src="jquery.truncate-2.3.js"></script>
06
 
07
<script language="javascript" type="text/javascript">
08
$(function() {
09
    $(".classname").truncate( 60 );
10
});
11
</script>
12
 
13

Replace the .classname with the class name of your HTML element that contains the text. Also, the number 60 in the code above is the maximum number of characters you would like to allow before truncating. Replace that with your value.

Adding a "more" link at the end of the text is another cool usage. You can find more about the usage here.

3. Adding classes to the first and last list items

I don't think there will be a HTML/CSS developer who haven't abused wordpress for not adding first and last classes for their lists

Just imagine a menu that needs a different background for the first and last list item. You'll find this handy when creating themes for a CMS like wordpress where you have no control over the HTML code.

After spending a few minutes on google, I found this snippet

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
<script type="text/javascript">
05
$(function(){
06
  $("li:first-child").addClass("first_item");
07
  $("li:last-child").addClass("last_item");
08
});
09
</script>
10

This can also be achieved using the :first-child and :last-child CSS pseudo-classes.

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Dezignus – Move your mouse over the header region (towards any direction).

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

Create a Parallax Website Header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

Another demo using Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

Using Javascript – A Vertical Parallax

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

Examples of and How to Create the CSS Parallax Effect

This is a really interesting one! A parallax illusion with CSS

Parallax using Flash

A step by step tutorial by webdesignerwall.

Creating parallax with flash cs4

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

So, that’s all about Parallax. I hope this post was informative