Sunday, 26 April 2009

How to skin HTML form elements in seconds

In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.


Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.

1. jqTransform
jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.

Use this code to add a javascript inclusion to jqTransform:

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

...now create a form with class property equal to jqTransform:

<form class="jqTransform">
<!-- Add form elements here... -->
<form>

...then add this JS code to apply the transformation:

<script type="text/javascript">
$(function() {
$("form.jqtransform").jqTransform();
});
</script>


2. NiceForms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:

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

...then create a form with class property equal to niceform:

<form class="niceform">
<!-- Add form elements here... -->
<form>

It's all. Really simple and fast!

Any suggestion? Please leave a comment.

Read More

Friday, 24 April 2009

Useful scripts and resources Facebook-inspired for web developers

In this post I want to suggest you a list of some popular scripts and resources Facebook-inspired to help web developers to implement quickly Facebook-like features in their web projects.

It include a Facebook-like search box, modal box, tooltips, action stream, sliders and other useful resources.

Any suggestion about this topic? Please leave a comment!

1. FaceBoox Search
FaceBoox is an autosuggest search engine inspired from Facebook for design which uses jQuery as ajax framework and BSN Autosuggest libs.

2. Autobox 2
Autobox 2 is an update of Autobox, a popular jQuery plugin to create input textbox with autosuggest features Facebook-like.

3. TextboxList
TextboxList is a MooTools script similar to Autobox for jQuery. This script turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a list of items that can be easily deleted. It comes with an Autocomplete plugin.

4. Modal Box
This script is a MooTools clone of Facebook modal box. It’s lightweight, subtle, and very stylish.

5. Facebook Pagination
This script is a Facebook style, unobrusive ajax pagination plug-in for jQuery.

6. Elastic
Elastic is a jQuery plugin which makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is its weight.

7. Facebox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

8. Tipsy
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

9. Action Streams
The Action Streams plugin is an amazing new plugin (which imitates Facebook streams on your Wall) for Movable Type 4.1 that lets you aggregate, control, and share your actions around the web as well as a list of your profiles on various services.

10. Facebook Application Icons
This is a collection of 28 free facebook application icons in a high resolution .PNG and .SVG format.

11. mooFacebook
mooFacebook is a port to Mootools of the original Facebox written by Chris Wanstrath with some added features like drag support and titles.

12. Facebook Sliders With Mootools and CSS
David Walsh has created a very simple 3-slider system Facebook-like that allows a user to modify the height, width, and opacity of an image using just sliders.


 
Useful scripts to plot charts in web pagesFree resources for quickly developing AJAX applications10 Beautiful Web UI librariesBeautiful datepickers and calendars for web developers20 Great PHP framework for developersInteresting html FORM Validators for web developersBest Image Croppers ready to use for web developersFile uploaders collection for web developers

Read More