jQuery Cheat-Sheet

Please include attribution to websitesetup.org with this graphic.



Source: WebsiteSetup - jQuery Cheat Sheet

Wicket TagIt!

I am not a web designer, but I really like fancy UI Components! Such a widget named Tag-It, which I tried to "wicket-ize"[1]!!

What is Tag-It?

• Tag-It is a nice jQuery widget that lets the user enter multiple values that are kept in a old time classic input text field as a comma separated string. 

Why do I need such a component?

• User Interface is not in 3NF!! For instance a single field might be used to enter multiple values.
• Your users do not like scrolling, so you should render as less UI components as possible.
• Your users are lazy and they want you to guess what they want to write, this feature is called autocomplete[2]! 

[to be continued when I will complete the implementation and testing of my TagIt-Wicket-ized. If you are interesting on this stuff contact me and I will send what I have done so far..]

Notes:
[1] I will soon publish my implementation as open source, but I am still working on that.
[2] Sometimes you guess wrong, or even worse you don't allow your user to write what really want to. I have such an experience using my iPhone 4s writing in Greek.. most of the times it guesses wrongly!!

Replace flash with HTML 5, CSS and Javascript

Flash is a powerful tool for implementation of multimedia applications. It has been used for several year for implementation of animated content for web sites, but it is still not embedded in any operating system or web browser. It is always installed separately. This fact makes it difficult for novice users to navigate in flash sites.

The old time classic solution for this issue is to create two versions of the web site. One that uses the power of flash in order to provide a more fancy user interface and another that uses plain html. But today we have a better version of HTML (ver 5), CSS and JavaScript! The new versions let us make fancy sites without using flash!

For instance if we would like to create a slide show, then we can use the jQuery Circle Plug-in. If you need auto-complete fields for forms then you can use a component that you can find at jQuery Autocomplete Plugin. Or you can add validation to your forms using the jQuery AjaxForm Plugin... and much much more that you can find in jQuery.

If you need any help then leave a comment or send me an email [g.anagnostaros@gmail.com] and I will answer as soon as possible!

References:

1. jQuery Circle Plug-in
2. jQuery Autocomplete Plugin
3. jQuery AjaxForm Plugin
4. jQuery

WICKET: Auto sliding panels

Do you have content but you don't have space? Would you like to make a fancy slideshow of Wicket components? I have the solution!

You can download the source code from here. Note that it is implemented using Wicket 1.4 and WiQuery 1.

PS: The solution is based on the implementation of "mb.scrollable" (site, demo).

Refrences:

1. mb.scrollable [http://pupunzi.open-lab.com/mb-jquery-components/mb-scrollable/]
2. Wicket 1.4 [http://wicket.apache.org/]
3. WiQuery [http://code.google.com/p/wiquery/]