In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
3. HTML 5 CSS Reset
4. Unit PNG Fix
6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
8. jQuery: Ajax call
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
<link rel="stylesheet" href="print.css" type="text/css" media="print">
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
@font-face {
font-family: MyFontFamily;
src: url('http://');
}
font-family: MyFontFamily;
src: url('http://');
}
Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.
4. Unit PNG Fix
This snippet fixes the png 24 bit transparency with Internet Explorer 6.
5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
<?php
if (isset($username[5])) {
// Do something...
}
?> // Do something...
}
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>
8. jQuery: Ajax call
This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:
<script type="text/javascript">
$(document).ready(function(){
</script>
$(document).ready(function(){
$("form#formId").submit(function() {
inputField = $('#inputFieldId').attr('value');
$.ajax({
return false;
});
});inputField = $('#inputFieldId').attr('value');
$.ajax({
type: "POST",
url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}
});url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}
return false;
});
</script>
9. CSS Layouts Collections
This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.
10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
The only thing you have to do is to create nested <ul> lists into a main list with id="nav", in this way:
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<ul>
</li>
</ul>
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
...and this is the JavaScript code for jQuery you have to copy in the tag <head> of the pages that use this menu:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showmenu(){
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();
}, function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(document).ready(function(){
showmenu();
});
</script>
In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:
Take a look at the live preview here.
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
Then, in the tag <body> add the following lines of code to display the countdown:
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
...if your target date is 25 December the previous line becomes:
If you want to change the style of the countdown you have to modify the following CSS classes:
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
Now, in the tag <body> add a simple form with an input field:
...and add this layer to display a custom message when an user submit the form:
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
<script type="text/javascript" src="js/countdown.js"></script>
Then, in the tag <body> add the following lines of code to display the countdown:
<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
...if your target date is 25 December the previous line becomes:
new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")
If you want to change the style of the countdown you have to modify the following CSS classes:
.count_down{...}
.count_down sup{...}
.count_down sup{...}
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
Now, in the tag <body> add a simple form with an input field:
<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
...and add this layer to display a custom message when an user submit the form:
<div id="update_success">E-mail added!>/div>
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
My Tiny TodoList is a totally free, simple open source todolist written in PHP and jQuery released from Max Pozdeev and based on my original MyToDoList application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website
MyTinyTodoList Demo
Some screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.
Max Pozdeev MyTinyTodoList Website MyTinyTodoList DemoSome screenshots:
Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite - uncomment the line begining with $config['mysql'] in file 'init.php' and specify your settings as described in file.
Otherwise sqlite database file 'todolist.db' will be created in directory 'db'. If no - create it manually and make it writeble for webserver/php.
3. Open in your browser file 'dba.php' from your site and create tables in databse.
4. Open 'index.php' in your browser to run the application.
In this post I want to suggest you some free resources which allow developers to quickly build and mantain powerful and advanced AJAX web applications. In this list you can find advanced grid features, calendars, tab-strip and a lot of other interesting components to develop and enrich your AJAX web applications.DHTML eXtensions
dhtml eXtension provides a set of cross-browser DHTML components for building advanced and powerful Ajax-based web interfaces. It includes advanced grids, trees, color picker, calendar, editor, combo box, advanced layout features and a lot of other interesting components to enrich your web applications. You can download the standard edition for free.Google Web Toolkit
Writing web apps today is a tedious and error-prone process. Developers can spend 90% of their time working around browser quirks. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile. Google Web Toolkit (GWT) eases this burden by allowing developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.Nitobi Complete UI
Nitobi Complete UI is an open source ajax components for building Ajax-powered Web user interfaces that improves user experiences for any Web 2.0 application. It include a powerful Ajax datagrid, with Excel copy and paste, in-place cell editing, and live scrolling; an Ajax-powered tab-strip component with native support for other Nitobi components, client-side statefulness, and skinnability; a full featured Calendar component with support for multi-month view, easy localization, databound events, and more.Clean-Ajax
Clean-Ajax is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues. It's simple to install, to configure and to use;
SmartClient
SmartClient is globally deployed in thousands of enterprises, and has been incorporated as a core technology in major shipping products since 2002. SmartClient provides a zero-install DHTML/Ajax client engine, rich user interface components and services, client-server databinding systems. All components can be easily embedded in existing applications: grids, forms, trees, dialogs, wizards and other components can be added without making architectural changes.Ample SDK
Ample SDK is a unique piece of software that runs transparently in the layer between web browser and your application. While running it provides the Logic of your application with standard cross-browser access to the User Interface. Ample Runtime, UI languages and programming model are all based on open standards. Thus a web-developer doesn't need to learn any new technologies or proprietary APIs. He can simply keep using already learnt JavaScript language, DOM, CSS, XML, XHTML and other technologies and standards.Sigma Visual Ajax GUI Builder
Sigma visual builder is a web based tool for AJAX RIA application UI rapid design and involved scripts programming.You can do everything by drag & drop with a significant development time reduction. It provides more than 40 common components, including Tabs, Dialog, TreeGrid, TimeLine and many other web GUI components.It's also compatible with jQuery, prototype, mootools and other javascript frameworks.SAJAX
Sajax is an open source tool to make programming websites using the Ajax framework as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.
ZK - Direct Ria
ZK is the most proven Ajax + Mobile framework designed to maximize enterprises operation efficiency and minimize the development cost. With groundbreaking Direct RIA architecture, ZK simplifies and speeds the creation, deployment and maintenance of rich Internet applications.Related Content
- 10 Beautiful Web UI libraries- Beautiful datepickers and calendars for web developers
- 20 Great PHP framework for developers
If you are looking for free resources to learn Ajax, PHP, CSS and JavaScript take a look at this collection with six interesting online presentations about these topics. The list includes a short introduction to Ajax, how to write modular CSS code, PHP Object Model fundamentals and an overview about the most popular JavaScript libraries.
1. Ajax 101 | Workshop
Author: Bill Scott | This presentation on SlideShare
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.
2. Modular CSS
Author: Russ Weakley | This presentation on Slide Share
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.
3. Understanding the PHP Object Model
Author: Sebastian Bergmann | This presentation on SlideShare
This talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.
5. jQuery in 15 minutes
Author: Simon | This presentation on SlideShare
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.
6. JavaScript Library Overview
Author: Jeresig | This presentation on SlideShare
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.
1. Ajax 101 | Workshop
Author: Bill Scott | This presentation on SlideShare
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.
2. Modular CSS
Author: Russ Weakley | This presentation on Slide Share
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.
3. Understanding the PHP Object Model
Author: Sebastian Bergmann | This presentation on SlideShare
This talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.
5. jQuery in 15 minutes
Author: Simon | This presentation on SlideShare
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.
6. JavaScript Library Overview
Author: Jeresig | This presentation on SlideShare
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.
This post is a collection of some interesting and useful Ajax Auto Suggest scripts ready to use (from beginner or professional web developers) in your web projects. This collection includes standard auto suggest scripts, del.icious tag suggestion, autosuggest control to search images on Flickr, and advanced table filter with auto suggest control.If you want to suggest other interesting links please add a comment, thanks!
1. Ajax Auto Suggest v.2
The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). This auto suggest class is very simple to customize and reuse in your web pages. Take a look here for the demo.2. Woork PHP component: Autosuggest
Woork Autosuggest is a simple "PHP component" ready to use which implement autosuggest feature using PHP and MySQL. The component is lightweight (only with 8Kb) and ready to use simply customizing some parameters.
3. Spry Auto Suggest Widget
Spry Auto Suggest Widget (provided from Adobe Labs) use Adobe Spry framework to implement auto suggest feature in a input field. This is an example of using a Spry region and non-destructive filter to create an auto suggest widget. The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li.4. Facebook-Like Auto Suggest
Guillermo Rauch's Facebook-like Auto Suggest is another auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.5. jSuggest 1.0
jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.
6. Yahoo! UI Autosuggest Control
Yahoo! UI Autosuggest Control uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.7. CAPXOUS.AutoComplete
CAPXOUS.AutoComplete is a standalone widget without dependencies, lightweight (only 4 kb) which provides auto suggest feature with an huge scrollable drop down list. It's simple to customize and implement on your web pages with a lot of languages.
8. jQuery Tag Suggestion
jQuery Tag Suggestion plugin simulates del.icio.us tag suggestion as-you-type feature (when you save a bookmark on del.icio.us). Tag suggestion helps you create a subset of tags that you commonly use for different types of links.9. Google Suggest Style Filter with the AutoComplete Control
Matt Berseth's AutoComplete control provides smarter filtering capabilities for data tables which allow the user to select a filter column from a drop down list. Take a look here for the live demo.Related Content
- File uploaders collection for web developers- Best Image Croppers ready to use for web developers
- Beautiful datepickers and calendars for web developers
- Useful resources to improve the look and features of HTML Forms