jQuery Tutorials & Plugins » jQuery Tutorial

How To Enhance Your Form Input Fields with jQuery

Osman Erdoğan — Mon, 05 Jul 2010 08:45:57 +0000

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

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

Image Captions Generated with CSS and jQuery

Osman Erdoğan — Mon, 30 Nov 2009 20:02:54 +0000

This script have very simple usage;

Usage
Script:

$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this)
				.wrap('')
				.after(''+caption+'');
		}
	);
});

CSS:

.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#fff;
	width:100%;
	opacity:.75;
	filter:alpha(opacity=85);
	color:#000;
	}
.imgcontainer img {display:block;}

HTML:

Demo

jQuery AutoComplete Plugin

Osman Erdoğan — Sat, 14 Nov 2009 10:19:14 +0000

I’d like to present another jQuery plugin, this time it’s autocomplete with some handy features.

Description

The major benefit offered by this plugin is its high performance. As all request results are cached, the cache might be used next time, which leaves the server alone.

Besides, AutoComplete has some unique features, such as text separators, searching by a few words, and the optional using of the component autonomously, i.e. without sending requests to the server.

The plugin works in IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+.

Installation

Installing the plugin is a routine task — just include the .js file after jQuery.

Usage

Let’s add autocomplete for the standard input:

The autocomplete object is then initialized — make sure that initialization is duly done following the DOM loading, otherwise IE users might experience some glitches.

jQuery('#query').autocomplete({
        serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests
        minChars: 2, // Minimum request length for triggering autocomplete
        delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex)
        maxHeight: 400, // Maximum height of the suggestion list, in pixels
        width: 300, // List width
        zIndex: 9999, // List's z-index
        deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms.
        params: { country: 'Yes'}, // Additional parameters
        onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected,
        lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete
    });

The page specified in serviceUrl receives a GET request, in response to which it must send JSON data:

{
    query:'Li', // Original request
    suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions
    data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions.
    }

You can turn autocomplete on/off as well as re-initialize its parameters anytime via the object functions:

var ac = jQuery('#query').autocomplete({ /*parameters*/ });
    ac.disable();
    ac.enable();
    ac.setOptons({ zIndex: 1001 });

Stylization

The script makes the following tagged piece of code:


 
  Liberia
  Libyan Arab Jamahiriya
  Liechtenstein
  Lithuania

Here’s an example of CSS styles:

.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

Website – Download

jQuery slideViewerPro : A “pro” jQuery image slider

Osman Erdoğan — Sat, 14 Nov 2009 08:57:04 +0000

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts. Each gallery generates a user-defined number of thumbnails which can slide automatically.

Setup

slideViewerPro requires jquery-1.3 or greater and its CSS file.

To create your gallery just copy-and-paste the above markup. Each gallery must be written inside a DIV with an unique ID and CLASS swvp. Then adjust the path for your images and include the jQuery framework, slideViewerPro.1.0.js and the CSS file inside the -here- head tags of your page; then you can initialize the gallery (copy-and-paste the code below). The jQuery(window).bind(”load”) function ensures that ALL the images are loaded before calling the script and also it makes the built-in preloader to work.

Did you know? You don’t need to specify the width and height of your images but all the images within a single gallery must have the same width/height; slideViewerPro automatically checks for the size and renders accordingly. Of course if you specify or force your images size, slideViewerPro will use such image property.

$(window).bind("load", function() {
    $("div#my-folio-of-works").slideViewerPro({
        thumbs: 6,
        autoslide: true,
        asTimer: 3500,
        typo: true,
        galBorderWidth: 0,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        buttonsWidth: 40,
        thumbsActiveBorderOpacity: 0.8,
        thumbsActiveBorderColor: "aqua",
        shuffle: true
    });
});

Settings and Dependencies

// slideViewerPro options (defaults)
galBorderWidth: 6,  // the border width around the main images
thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images
thumbsRightMargin: 3, // the distance of each thumnail respect to the next one
thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around
buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails
galBorderColor: "#ff0000", // the border color around the main images
thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one
thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail
buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner
thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
easeTime: 750, // the time it takes a slide to move to its position
asTimer: 4000, // if autoslide is true, this is the interval between each slide
thumbs: 5, // the number of visible thumbnails
thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original
thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible
leftButtonInner: "-", //could be an image "" or an escaped char as "&larr";
rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin
typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed
typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.
shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

Usage 1 – Default Mode:

In its simplest form, slideViewerPro can be used without specifying any option.

$(window).bind("load", function() {
    $("div#basic").slideViewerPro();
});

Usage 2 : autoslide, typographic info, custom buttons images, custom thumbnails size

$("div#fewoptions").slideViewerPro({
        thumbs: 3,
        thumbsPercentReduction: 20,
        galBorderWidth: 0,
        galBorderColor: "aqua",
        thumbsTopMargin: 10,
        thumbsRightMargin: 10,
        thumbsBorderWidth: 5,
        thumbsActiveBorderColor: "gold",
        thumbsActiveBorderOpacity: 0.8,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        leftButtonInner: "",
        rightButtonInner: "",
        autoslide: true,
        typo: true
        });

Usage 3 : autoslide, shuffled list, without user interface

$("div#noui").slideViewerPro({
        galBorderWidth: 0,
        autoslide: true,
        thumbsVis: false,
        shuffle: true
        });

CSS Code :

.svwp {width: 50px; height: 20px; background: #fff;} /*preloader stuff. do not modify!*/
.svwp ul{position: relative; left: -999em;}/*preloader stuff. do not modify!*/
.slideViewer { /*this is the gallery container*/
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background: #fff;
}
.slideViewer ul {  /*this is your list of images*/
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
margin: 0;
padding: 0;
}
.slideViewer ul li { /*each LI item is floated; the whole list is now displayed as if its in one row*/
float:left;
} 

/*typographic info*/
.slideViewer span.typo{
padding: 6px; /* do not modify padding (yet)*/
background: #fff;
color: #000;
font: normal 10px Verdana;
} 

.thumbSlider { /*the thumbnails slider contanier*/
overflow: hidden;
width: 1%;
background: #fff;
}
.thumbSlider ul { /*the thumbnails list of images*/
list-style-type: none;
margin: 0;
padding: 0;
}
.thumbSlider ul li{
float:left;
margin: 0;
}
.thumbSlider a{ /*the link wrapped around each thumbnail. dynamically.*/
color: #fff;
text-decoration: none;
}
.thumbSlider a img{
border: 0;
display: block;
padding: 0;
}
.thumbSlider p.tmbrdr { /* the border above -not around- each thumb */
/* width, height and top values are dynamically added by the script. Do not modify. */
position:relative;
left: 0;
font-size: 0.01em;
left: 0;
margin: 0;
padding: 0;
} 

a.left, a.right { /*the left and right buttons (links)*/
background: transparent; /* could be any color  */
color: #ff0000;
font: bold 16px Arial;
overflow: hidden;
}
a.left span, a.right span{ 

}
a.left img, a.right img{
border: 0;
}
a.l_dis, a.r_dis {
background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
cursor: default;
}
a.l_dis span, a.r_dis span {
display: none;
}
a:focus {outline:none;}

Preloader:

slideViewerPro and slideViewer share the same ‘preloading‘ technique.

It is an idea i had while developing the slideViewer plugin, when i was searching for a technique to preload the images; here’s how it works and what to remember when installing your own slideViewerPro: I used the two built-in ready(fn) and load(fn) event handlers to create a CSS-based preloader: the first event is fired as soon the page DOM is ready; that means we can read the className .svwp and use the method prepend() to insert inside that DIV a ‘loader image’ (.gif). The tricky part here, is to hide the list of images during this preload period: this is accomplished by shifting to the left (’very’ left: -999em) of the page (see .svwp ul in the stylesheet) the whole list. As soon as the DOM is ready, that class shifts the list outside of the window (setting display: none won’t work in Opera) and insert an animated gif to show that ‘it is loading’. Then, i used the second event handler – wich waits the page to be fully loaded, including graphics – to fire the initialization of the gallery; the gif is removed and the list is shifted back on the screen (left: 0). What to remember: when using your own copy of slideViewerPro, look at line 26. There you’ll find the path of my preloader image (images/svwloader.gif); be sure to modify that line so that it points to your own preloader gif in your folder of images.

At line 26 of the jquery.slideViewerPro.1.0.js file, adjust the path of the preloader image:

jQuery(function(){
   jQuery("div.svwp").prepend("");
});

Downloads
jquery.slideViewerPro.1.0.js
svwp_style.css
the preloader image

Website

s3Slider jQuery Plugin & Tutorial

Osman Erdoğan — Tue, 10 Nov 2009 14:47:16 +0000

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

Usage:

HTML:


   
      
          
          Your text comes here
      
      
          
          Your text comes here

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)

jQuery drop down menu : droppy

Osman Erdoğan — Mon, 09 Nov 2009 15:07:36 +0000

Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like this for a recent project and a quick Googling turned up nothing that really suited, so droppy was born. It hasn’t been designed with flexibility in mind – if you like what you see, great, integration should be a breeze – otherwise I’d look for something more configurable elsewhere.

Usage:
Javasctipy:

HTML:


  Top level 1
  Top level 2
    
      Sub 2 - 1
      
        Sub 2 - 2
        
          
            Sub 2 - 2 - 1
            
              Sub 2 - 2 - 1 - 1
              Sub 2 - 2 - 1 - 2
              Sub 2 - 2 - 1 - 3
              Sub 2 - 2 - 1 - 4
            
          
          Sub 2 - 2 - 2
          
            Sub 2 - 2 - 3
            
              Sub 2 - 2 - 3 - 1
              Sub 2 - 2 - 3 - 2
              Sub 2 - 2 - 3 - 3
              Sub 2 - 2 - 3 - 4
            
          
        
      
      Sub 2 - 3

With Custom Speed:

Example – Download

Fading Links Using jQuery: dwFadingLinks

Osman Erdoğan — Mon, 09 Nov 2009 08:25:13 +0000

Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events. My thought was ?why do a harsh a:hover color change when you can fade to that color?? Here is how to implement link color fading using jQuery.

Usage

/* plugin */
jQuery.fn.dwFadingLinks = function(settings) {
	settings = jQuery.extend({
		color: '#ff8c00',
		duration: 500
	}, settings);
	return this.each(function() {
		var original = $(this).css('color');
		$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
		$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
	});
};

/* usage */
$(document).ready(function() {
	$('.fade').dwFadingLinks({
		color: '#008000',
		duration: 700
	});
});

Web Site - Demo - Download

Hover fading transition with jQuery

Osman Erdoğan — Mon, 09 Nov 2009 08:13:45 +0000

Create fading transitions on hover in jQuery using this wonderful jQuery Tutorial.

Web Site - Demo