5 July 2010
0 Comments
How To Enhance Your Form Input Fields with jQuery
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 {
px;
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 {
px; px; float: left; margin: 18px 0 0 -115px;
"float: right; margin-left: 10px;"> This script have very simple usage;
Usage
Script:
$(document).ready(function(){
$('img.captioned').each(
function() {
var caption = $(this).attr('title');
$(this)
.wrap('<div class="imgcontainer"></div>')
.after('<div class="caption">'+caption+'</div>');
}
);
});
CSS:
.imgcontainer {
position:relative;
float:left;
}
.caption {
position:absolute;
bottom:0;
left:0;
text-align:center;
background:#fff;
%;
opacity:.75;
filter:alpha(opacity=85);
color:#000;
}
.imgcontainer img {display:block;}
HTML:
<img src="/img/spacer.gif">
Demo
Tags: css, css jquery, examples, image, image captions, image css, images, jquery examples
14 November 2009
0 Comments
jQuery AutoComplete Plugin
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.
<script type="text/javascript" src="/img/spacer.gif">
Usage
Let’s add autocomplete for the standard input:
<input type="text" name="q" id="query" />
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)
max, // Maximum height of the suggestion list, in pixels
, // 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:
<div class="autocomplete-w1">
<div style="px;" id="Autocomplete_1240430421731" class="autocomplete">
<div><strong>Li</strong>beria</div>
<div><strong>Li</strong>byan Arab Jamahiriya</div>
<div><strong>Li</strong>echtenstein</div>
<div class="selected"><strong>Li</strong>thuania</div>
</div>
</div>
Here’s an example of CSS styles:
.autocomplete-w1 { "float: right; margin-left: 10px;">
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 <HEAD> -here- </HEAD> 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.
<link rel="stylesheet" class="css/svwp_style.css" type="text/css" media="screen" />
<script src="/img/spacer.gif">
$(window).bind("load", function() {
$("div#my-folio-of-works").slideViewerPro({
thumbs: 6,
autoslide: true,
asTimer: 3500,
typo: true,
galBorder,
thumbsBorderOpacity: 0,
buttonsTextColor: "#707070",
buttons,
thumbsActiveBorderOpacity: 0.8,
thumbsActiveBorderColor: "aqua",
shuffle: true
});
});
Settings and Dependencies
// slideViewerPro options (defaults)
galBorder, // 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
thumbsBorder, // the border width of each thumbnail. Note that the border in reality is above, not around
buttons, // 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 "<img src="/img/spacer.gif">
Usage 1 – Default Mode:
<div id="basic" class="svwp">
<ul>
<li><img "710" "290" alt="Anemone - G.C. Mingati" src="/img/spacer.gif">
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,
galBorder,
galBorderColor: "aqua",
thumbsTopMargin: 10,
thumbsRightMargin: 10,
thumbsBorder,
thumbsActiveBorderColor: "gold",
thumbsActiveBorderOpacity: 0.8,
thumbsBorderOpacity: 0,
buttonsTextColor: "#707070",
leftButtonInner: "<img src="/img/spacer.gif">
Usage 3 : autoslide, shuffled list, without user interface
$("div#noui").slideViewerPro({
galBorder,
autoslide: true,
thumbsVis: false,
shuffle: true
});
CSS Code :
.svwp {px; px; 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;
%;
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;
%;
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;
.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("<img src="/img/spacer.gif">
Downloads
jquery.slideViewerPro.1.0.js
svwp_style.css
the preloader image
Website
Tags: image slider, jQuery Plugin, Plugin, slider, slideViewerPro