Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.

Why do users click again?

Because they are users! They aren’t developers who understand what happens in the back end.

Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.

How do I do it with just CSS?

Its pretty simple. Click and hold the search button below and see.

I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…

The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.

Now, how do I avoid multiple clicks?

Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.

CSS
01
02
input.submit{
03
width:16px;
04
height:16x;
05
display:block;
06
overflow:hidden;
07
text-indent:-999px; /* To remove any default text on the button*/
08
line-height:16px; /* required for safari */
09
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
10
cursor:pointer; /* Hand cursor for the normal state */
11
border:none;
12
padding:0;
13
}
14
 
15
input.submit:hover{
16
background-position: 0 -16px; /* This will display the dark search icon on hover */
17
}
18
 
19
input.submit:active{
20
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
21
cursor:wait; /* Shows the wait cursor on click */
22
}
23

If you really want to disable the button, check out this JQuery solution. And, don't forget to put in your thoughts and ideas.

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.

Step 1: Bookmarking the gallery forms

Step 2: Prepare a list of all possible form fields

Step 3: Using InFormEnter to fill the forms

Step 4: Prepare your images for submission

Step 5: Start Submitting… Enjoy!

Step-1: Let’s review the HTML part first.

HTML
01
02
<html>
03
 
04
<head>
05
<title>ProductiveDreams</title>
06
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
07
</head>
08
 
09
<body>
10
<div class=”bg-image”></div>
11
</body>
12
 
13
</html>
14

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

CSS
01
body{
02
background:#000;
03
text-align:center;
04
}
05
 
06
div.bg-image{
07
background:transparent url(images/pd.png) no-repeat center !important;
08
width:134px;
09
height:134px;
10
}

Step-3: Solution for IE

Consolidating the entire thing

CSS
01
body{
02
background:#000;
03
text-align:center;
04
}
05
 
06
div.bg-image{
07
background:transparent url(images/pd.png) no-repeat center !important;
08
background-image:url(images/pd.gif);
09
width:134px;
10
height:134px;
11
margin:0px auto;
12
}