jQuery makes it easy to spice up our search bars and form input fields with simple touches that really enhances the user’s experience. Let’s look at how jQuery can be used to show/hide a default value inside a field and provide visual user feedback when the field is selected.

The example we’ll be creating features a simple search bar and icon which appears grey as standard but turns to a cool blue when focused. By default the input displays the words I’m looking for…, which disappears when the field is selected.

Creating the search form

<form action="" method="get">
	<fieldset>
		<input type="text" id="searchbar" />
		<input type="submit" value="Search" id="searchbtn" />
	</fieldset>
</form>

CSS:

#searchbar {
	width: 425px;
	float: left; padding: 20px 150px 20px 40px;
	background: #ededed url(bar-bg.png) repeat-x;
	border: 3px solid #c7c7c7;
	border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
	font: italic 54px Georgia; color: #898989;
	outline: none; /*Remove Chrome and Safari glows on focus*/
}

#searchbar.active {
	background: #ebf3fc url(bar-bg-active.png) repeat-x;
	border: 3px solid #abd2ff;
}

#searchbtn {
	width: 67px; height: 70px; float: left; margin: 18px 0 0 -115px;
	background: url(search.png); text-indent: -9999px;
	padding: 0 0 0 67px; /*IE fix*/
	cursor: pointer;
}
	#searchbtn:hover {
		background-position: 0 -70px;
	}

JS:

$(document).ready(function() {
	$("#searchbar").attr("value", "I'm looking for...");

	var text = "I'm looking for...";

	$("#searchbar").focus(function() {
		$(this).addClass("active");
		if($(this).attr("value") == text) $(this).attr("value", "");
	});

	$("#searchbar").blur(function() {
		$(this).removeClass("active");
		if($(this).attr("value") == "") $(this).attr("value", text);
	});
});

View the demo

Web

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

Usage:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

HTML:

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

Sample CSS:

#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}

Inside in HTML:

$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});

timeOut: values in miliseconds…

Example – Website

Download

Full version (with examples) (size: 574kb)
Uncompressed version (size: 4.12kb)
Compressed version (size: 1.66kb)