Designing for the Web: Resolution and Size

To design a proper website, first you will need to know the resolution and size you are heading toward. Here are some article to stronger your knowing.

Designing for the Web: Resolution and Size by Felix Mak

---

Best Screen Resolution to Design Websites by hobo-web.co.uk

---

Optimal Screen Resolution for Web Design (2010 Update) by Mark Thompson in Design/Development

---

Designing for the Web by Joshua David McClurg-Genevese

---

Screen Resolution And Page Design by Larisa Thomason

Freedcamp

This is absolutely awesome! Compare to other project management tools out there Freedcamp is one of the easiest one ever, and with https enable all the way I am 100% happy with the security they had offered.

Freedcamp offers an extremely easy, yet fully customizable user permission system. Choose what your co-workers and clients can see, or create a custom group to manage permissions. Each application can be separately managed allowing you to track each and every user role.

Receive instant notifications of everything happening within Freedcamp. Reply to email notifications directly from your inbox. Receive SMS alerts about newly created items or modifications to existing ones. With the ability to customize the level of notifications, you will receive just the right amount of information.
Freedcamp

Open Atrium

This is an project management tools that you can run on your own server. If they don’t have the module that you are looking for, you can build upon it.

Open Atrium is an intranet in a box that has group spaces to allow different teams to have their own conversations. It comes with six features – a blog, a wiki, a calendar, a to do list, a shoutbox, and a dashboard to manage it all.

But you’re not limited to just those features. Open Atrium is completely customizable. If you want a feature that’s not on that list, you can add it yourself. Read the documentation on community.openatrium.com, specifically the Build a Feature section, to find out how to do it.
Open Atrium

TeamLab

TeamLab is running on ASPX, its include project management, business collaboration, document management, calendar, CRM, email and more. The project management tool is perfect for medium sized projects.


All the TeamLab features are provided completely for free. There are no functionality, projects, user or time limits.

TeamLab is available in 3 deployment models: SaaS – you get ready-to-use software in the cloud, Open Source – you install TeamLab on your own server, AMI – you use a private Amazon machine with pre-installed TeamLab.
TeamLab

Customized Fluid/​Variable CSS Grid Generator by Spry Soft

http://www.spry-soft.com/grids/
Static not good enough for ya?! No problem. Fluid/​variable grids are easy to make with this site.

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

20+ CSS Layouts by MaxDesign

http://www.maxdesign.com.au/articles/css-layouts/
With excellent markup walk-​​thrus and the sample CSS on-​​page, this set of CSS layouts will be easy to see in action and almost as easy to implement.

40 CSS Layouts by Layout Gala

http://blog.html.it/layoutgala/
Previews are available for each format and you can even download the entire collection in one file.

250+ Layouts by Free CSS

http://www.free-css.com/
This is a massive list with just about every layout imaginable. Preview and click again to download. The CSS is stripped down so there’s lots of room for tweaking.

50+ Fixed Width Layouts by Code Sucks

http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Click to preview and click to download. These layouts are simple with nicely developed whitespace. Worth checking out and easy to modify.

10+ Unique CSS Layouts by Intensiv Station

http://www.intensivstation.ch/en/templates/
While on the sparse side in terms of the quantity, this collection includes some impressive tricks like floating menus and dynamic centered boxes worth having on hand.

40+ CSS Layouts by Dynamic Drive

http://www.dynamicdrive.com/style/layouts/
This site has organized their CSS layouts by two-​​column, three column, fixed, liquid, and frames. Each has a nice description and the ability to preview before downloading.

15+ Interesting CSS Layouts by The Noodle Incident

http://www.thenoodleincident.com/
This site has a unique way of guiding you thru the process of picking the layout you want. Follow the arrows, select your design, and download.

Customized Static CSS Grid Generator by Grid Designer

http://grid.mindplay.dk/
It doesn’t get much easier than this. Just set up the grid you want using the on-​​page tools and download your template.

1. Preloaders

Preloaders.net provide many presets of preloading elements, it provide you like 3D, polygons type of animation gif. With this application you can choose
http://preloaders.net/

2. Ajaxload

This widget help you to create your own loading gif for your ajax application.
http://www.ajaxload.info/

3. Stripe Generator

Unleash your personal style, experiment and download the tile. You can use it directly in your css file or as pattern in Photoshop®! Tired of pixel-by-pixel painting, trying to create seamless stripes textures?
http://www.stripegenerator.com/

4. favicon.cc

This widget help you to create your very own favicon that appears on your browser.
http://www.favicon.cc/

5. fx

The effect generator is a new way to create flash content with your daily web browser, and it’s all free to use. It provide you with a wysiwyg drop and drop editing environment. No programming need.
http://www.effectgenerator.com/

6. Web 2.0 Badges

Web 2.0 Badges can be used for displaying a big message on your website or emphasize a promotion. Generate your very own badges now.
http://www.web20badges.com/

7. Nomaine

Have no ideas what your new company should be name? Take a look at nomaine, this apps help you generate a bunch of randomness domain. It also help you check for Domain availability.
http://nomaine.com/

8. SlickPlan

Ever wanted to create a more presentable sitemap or flowchart that amaze your clients. SlickPlan is a great online sitemap and flowchart generator, it all free.
http://www.slickplan.com

9. repper

Repper is a free-to-use pattern creator that turns your images into eye-catching designs. It’s the easiest way to create beautiful patterns for your desktop or social profile background.
http://repper.studioludens.com

10. Wordle

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.
http://www.wordle.net

11. Deploy

Deploy* is a free, open source, online tool which allows users to quickly deploy a web project folder in only a couple seconds. It offers a couple unique features from other project folder downloads such as customization, valid XHTML, HTML, and CSS, but the most unique is bookmarking. Deploy*’s bookmarking feature allows the user to go through the form only one time and then bookmarking the next page (deploy.php). When the user returns to that bookmark it instantly generates another .zip folder with all the settings the user had previously entered.
http://projectdeploy.org/beta/

12. DoppelMe

Your DoppelMe is a great way to express your personality and communicate with others on the internet. This visual online identity puts a friendly face on your internet presence and best of all, you can quickly update it depending on your mood. You are not limited to the internet either and can download your avatar to use in documents, greetings cards, letters…the list is endless.
http://www.doppelme.com

13. Face Your Manga

Create your Avatar with Face Your Manga! Express yourself through your image and share it whoever you want. You will be able to use it with the most common Instant Messaging Programmes, such as Live Messenger®, Skype®, and many more.. Enjoy yourself by discovering unlimited combinations to realize your virtual alter‐ego!
http://www.faceyourmanga.com

14. Mutapic

Mutapic is a real creative tool. It generates ideas. The traditional way to create artwork is to start with an idea, sketch it, then render it. The idea comes from the brain, the sketch is drawn on paper and the rendering is done with any appropriate technique: painting, sculpting.
http://www.mutapic.com/

15. Read The Words

To create an easy to use platform, that allows users alternative methods to process written information. ReadTheWords.com began as a simple concept in January 2008: To assist students with learning disabilities with their studies, by means of auditory learning and auditory processing.
http://www.readthewords.com

16. izzy Menu

Create professional looking CSS menus for your Website as easy as never before! Build your cool menu online, without writing a single line of code! IzzyMenu is easy to use, Online Menu Builder, which allows you to build your CSS & DHTML menu in minutes. Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!
http://www.izzymenu.com/

17. 99 Polls

With your free account from 99polls you can now create customized surveys and polls for your website, blog and social network profiles. Using 99polls is a powerful and effective way to get instant feedback and increase your site’s popularity among Internet users.
http://www.99polls.com/

18. Collagr

Collagr.com was created late June 2007, but it wasn ‘t until mid July that the site really stated to get popular. Blogs from around the country and around the world were talking about Collagr.com. Pretty friggin sweet. Then we realized that we had something here that the public liked using so we started building more features into Collagr.com. The goal of collagr.com is to give users the ability to generate collages of your memories all via a web-based application.
http://www.collagr.com/

19. Online 3D Package

3d package is a 3d-box graphic generator. 3d package lets you instantly create 3d-box images online, free! Just upload pictures for cover and sides and then get 3d-box in you favorite image format (JPG, GIF, PNG supported). Post them in your blog or anywhere else.
http://3d-pack.com

20. My cool button

This web-based application will help you create cool buttons with just a few clicks and selection.
http://www.mycoolbutton.com

21. Logo Creator

Help you create Logo on the fly.
http://creatr.cc/creatr/

So you will ask what had we complete

Auto Right Left Column, this function giving the user easily to disable any right or left side module and the template will auto fill it with the proper grid. Auto Center Module, this allow us to control as many module as we want, calculate and divide evenly. Putting proper inner grid to every 960 grid, giving it more padding and spaces for you to customize in the future.

I have created a dedicated development folder/URL for the VC_BASE. http://joomla.designersandbox.com/base/

We are now in the stage of debugging, it will be great if anyone out there are wiling to help. Please drop me a comments or an email if you want to help me out on this.

1. Arial

Arial
Arial – BOLD
Arial – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Arial, Helvetica, sans-serif;

2. Arial Black

Arial Black
Arial Black – BOLD
Arial Black – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Arial Black', Gadget, sans-serif;

3. Arial Narrow – Newly Added

Arial Narrow
Arial Narrow – BOLD
Arial Narrow – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Arial Narrow', sans-serif;

4. Century Gothic – Newly Added

Century Gothic
Century Gothic – BOLD
Century Gothic – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Century Gothic, sans-serif;

5. Comic Sans MS

Comic Sans MS
Comic Sans MS – BOLD
Comic Sans MS – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Comic Sans MS',Textile,cursive;

6. Copperplate Gothic Light – Newly Added

Copperplate Gothic Light
Copperplate Gothic Light – BOLD
Copperplate Gothic Light – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Copperplate / Copperplate Gothic Light, sans-serif;

7. Courier New

Courier New
Courier New – BOLD
Courier New – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Courier New', Courier, monospace;

Georgia

8. Georgia
Georgia – BOLD
Georgia – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Georgia, Serif;

9. Gill Sans – Newly Added

Gill Sans
Gill Sans – BOLD
Gill Sans – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Gill Sans / Gill Sans MT, sans-serif;

10. IMPACT

IMPACT
IMPACT – BOLD
IMPACT – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Impact, Charcoal, sans-serif;

11. Lucida Console

Lucida Console
Lucida Console – BOLD
Lucida Console – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Lucida Console', Monaco, monospace;

12. Lucida Sans Unicode

Lucida Sans Unicode
Lucida Sans Unicode – BOLD
Lucida Sans Unicode – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

13. Palatino Linotype

Palatino Linotype
Palatino Linotype – BOLD
Palatino Linotype – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

14. Tahoma

Tahoma
Tahoma – BOLD
Tahoma – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Tahoma, Geneva, sans-serif;

15. Times New Roman

Times New Roman
Times New Roman – BOLD
Times New Roman – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Times New Roman', Times, serif;

16. Trebuchet MS

Trebuchet MS
Trebuchet MS – BOLD
Trebuchet MS – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'Trebuchet MS',Helvetica,sans-serif;

17. Verdana

Verdana
Verdana – BOLD
Verdana – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: Verdana, Geneva, sans-serif;

18. MS Sans Serif

MS Sans Serif
MS Sans Serif – BOLD
MS Sans Serif – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'MS Sans Serif',Geneva,sans-serif;

19. MS Serif, New York, serif

MS Serif
MS Serif – BOLD
MS Serif – Italic
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-family: 'MS Serif','New York',serif;

typeface.js is easy to use

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Here’s what it takes to get going: load the typeface.js library and some typeface.js fonts, then proceed like normal:

<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>

<div class="typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Creating your own set of custom fonts using typeface.js

The typeface.js include 3 fonts for download and use. Helvetiker, Optimer, Gentilis.
http://typeface.neocracy.org/fonts.html
To generate your own set of fonts, prepare the font that you want to covert, and upload it to the above link. After the upload it will take you to another page to select the type that require for your fonts sets, by default the whole range are select. If you want to decrease some of the file sizing, uncheck some of the unuse element.

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