1. affective vote

  2. JS - form validation

    Writing form validation and re-writing them according to different requirements is very energy consuming. So i made this prototype to handle different types of form validations. It has a config object for the non-programmer to fill in their messages and the methods they want to use to validate certain elements.

  3. dHTML - ajax tab module with mouseover event

    dHTML - ajax tab module with mouseover event

  4. dHTML - Carousel

    I made this prototype for a module used in 2007 homepage revamp. This carousel prototype does not use ajax/lazy loading for secondary contents. It needs total item counts to caculate page numberss and item width according to the parameters set in the JS.

  5. dHTML - Edit fly-in Panel and upate page content

    In this module the user can customize 'my faborites' items through the fly-in panel and see the updates on the page right away. The change will be updated onto server and when the user comes in next time the values will be updated.

  6. dHTML - flickr style edit function

    hover over the text and enable the edit function. Edit the content and update immediately just like what you do in flickr. It also does a max text-length validataion before submitting form content.

  7. dHTML - Group toggles

    This is a different toggle from the earlier one. It toggles between showling part and all of the content. Again, the same effect can easily be achieved just by fixing the styles right. Javascript detects if the content is higher than the base and then adds in toggle handler and hides the extra content if it is. When JS is not present, the default style is to show all content.

  8. dHTML - expandable marquee

    This is a solution to fit more content in a limited space on page. The marquee runs on a frenquency and when user hovers it, it will expand and pause for the user to seee the whole content.

  9. CSS - use one image background for flexible width of form buttons

    This is a different application of traditional sliding-doors technique. I prefer to make one complete background image for the buttons therefore I came up with this idea.

  10. image replacement

    Image replacement is more easy with block elements. When you need to use IR on a inline element, you need to make use of inline-block element

  11. CSS - rounded corner

    Here are several different ways to achieve round corner designs, depending on the background.

  12. CSS - round corner + pointer searchtabs

    This is a elaborated version of round corner + pointer style search tab.

  13. CSS - star rating

    this is a star rating layout using 100% css.

  14. dHTML - generate barchart from a table

    dHTML - generate barchart from a table

  15. dHTML - tab module with auto rotation function

    dHTML - tab module with auto rotation function

  16. CSS - three columns for all

    CSS - three columns for all

  17. dHTML - toggle

    This is a toggle widget based on YUI, under the namesapce of YAHOO.TW.f2e.widget