Online Tips for Web Developer/Designer

1. File Style jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Project Site | Demo

2. Create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

Project Site | Demo

3. jQuery plugin : jqTransform

This plugin is a jQuery styling plugin which allows you to skin form elements. This is a very nice plugin to use, we also had created a theme pack specially for this package. The theme package can be view at here.

Project Site | Demo

4. jQuery jNice

Create custom looking form elements, that function like normal form elements

Project Site | Demo

5. Styling input file

Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The “Browse” button, especially, is completely inaccessible to CSS manipulation.

Project Site | Demo

6. Emblematiq Niceforms

You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Project Site | Demo

7. Lightform

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas. LightForm is not maintained anymore! You can still download it but there will not be any future releases and support for this script.

Project Site | Demo

8. Live validation

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.

Project Site | Demo

9. Bassistance jQuery Validation

Default submitHandler is set to display an alert into of submitting the form

Project Site | Demo

10. Form validator

Project Site | Demo

11. meioMask – a jQuery mask plugin

FixedChars, as the name says, are the fixed characters that you will have on your mask. For example if you mask is ‘99/99/99′ you will probably want to have the ‘/’ to be a fixedChar. So the fixedChars value can be ‘[/]‘….

Project Site | Demo

12. uploadify – a multiple file upload plugin for jQuery

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Project Site | Demo

13. jQuery Multiple File Upload Plugin

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

Project Site | Demo

14. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

Project Site | Demo

15. Textarea Resizer

This project allows the user to extend the textarea element/area within the web page whenever they feel.

Project Site | Demo

16. Auto Growing Textareas

This plugin makes it easy to have auto-growing textareas. Meaning, if you have a textarea, as the user types it will expand vertically to accommodate the size of the entry. This was inspired by Facebook’s auto-expanding text areas.

Project Site | Demo

17. Elastic (jQuery)

Make your textareas grow Facebook style jQuery plugin. This Jquery plugin 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 it’s weight.

Project Site | Demo

18. mcDropdown jQuery Plug-in

Wanted this control to be intuitive and it had to allow for both quick mouse and keyboard entry.

Project Site | Demo

19. JavaScript image combobox

A combination of jQuery and msDropdown. Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element. I hope you’ll like this.

Project Site | Demo

20. jQuery Dropdown Checkbox List Plugin

One of the users of the dropdown-check-list plugin added a patch containing an update to take into consideration the optgroup tags, part of the select HTML element. After playing around with it and adding a few modifications, I uploaded a new version to the codebase that has this feature:

Project Site | Demo

21. jQuery timepickr

jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

Project Site | Demo

22. jQuery Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

Project Site | Demo

23. jQuery date picker plugin

If you are using date picker for the first time then it is recommended that you use this version as it is much more extensible and will be actively developed further.

Project Site | Demo

24. jQuery plugin: Autocomplete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Project Site | Demo

25. jQuery Autocomplete

This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.

Project Site | Demo

This is modification of Dylan Verheul’s jQuery Autcomplete plug-in. pengoworks.com had customized his library adding the features he needed and fixing issues he considered as bugs.

Project Site | Demo

26. jQuery Color Picker

Very Simple Color Picker.

Project Site | Demo

27. Color Picker – jQuery plugin

A simple component to select color in the same way you select color in Adobe Photoshop

Project Site | Demo

28. Farbtastic: jQuery color picker plug-in

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.
Project Site | Demo

29. jQuery Spin Button

This plugin provides spin-button interface easily on your form. This interface is very handy to set especially short or middle range numbers.

Project Site | Demo

30. jQuery UI Slider from a Select Element

The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.

Project Site | Demo