This new website is finally done :)

05
2011.04
Finish Line

This new website is finally done!!! It took me a lot more time than I planned :S I was hoping this could be done in more or less a month, but in the end it took me 3 months in total. I felt really guilty not making any progress to the real important project for these 3 months :(

You must think “Come on, it’s just a company website, why it took you so long? Just make some static pages with an open source blog and it’s done!”. The truth is in the real world it did took me this long… Making a website is the kind of thing that “You do a lot behind the scene but only very little can be seen“.

Continue reading →

Codeigniter View Library

31
2011.03

Advanced and flexible Codeigniter View library

Codeigniter View Library logo

Description

Codeigniter is my favorite PHP framework, it is very light weight and fast. However the `view’ part of this framework seems a little weak. One feature that I miss about Symfony is its flexible layout system, and assets management using yaml file.

Therefore I wrote this view library for codeigniter, you will find this really useful when you have a big project with complex views, multiple css and js files.

Features

  • Manage layouts, page title, metas, css and js with YAML file for cleaner and lighter controllers.
  • Default configs can be overwritten in controller configs. So that you can split your css and js into smaller files for more flexible design.
  • Combine and minify css and js files in production mode for faster page loading.

Continue reading →

Google image search style image alignment with jQuery Atteeeeention plugin

28
2011.03

A jQuery plugin that gives you a google image search style image alignment

jQuery Atteeeeention plugin logo

Description

If you have a image gallery with different width and height for each image, your page may look messy. Use this plugin to align your gallery with a ‘Google Image Search’ style result.

Demo

  • Click here to see the demo
  • The demo page is also included in the source file

Continue reading →

jQuery blockUI alternative with jQuery MSG plugin

25
2011.03

A alternative jQuery plugin for jQuery blockUI

jQuery MSG plugin logo

Description

Back in the old days we use ‘alert(‘blah blah’);’ to show users a message or a warning. It is functionable but not pretty. So I used to use BlockUI instead. Later on I found out I don’t need all the features it has and I want it to be easiler to customize. So I write my own simpler version called MSG. It can only block the whole window, it has theme suuport, afterBlock and beforeUnblock event, … etc, and it’s only 4 kb uncompressed with code comments.

Demo

  • Click here to see the demo
  • The demo page is also included in the source file

Continue reading →

Centralize HTML DOM element with jQuery Center plugin

20
2011.03

A jQuery plugin that centralizes DOM element

jQuery Center plugin logo

Description

This simple plugin helps you centralize your DOM element against their parent element or the window. You can also specify the top of the DOM element by passing customized settings.

Demo

  • Click here to see the demo
  • The demo page is also included in the source file

Continue reading →

Javascript loose coupling with jQuery Queue plugin

15
2011.03

A jQuery plugin that Make your Javascript application more flexible

jQuery Queue plugin logo

Description

Javascript is an event-driven programming language. Therefore with heavy frontend applications your code is easy to have nested callbacks. And this make your code less flexible.

With jQuery Queue plugin you can add functions in a queue outside the function scope; execute the queued functions later. It makes your code easily to be more modularize. It is a must have if you write heavy frontend websites.

Demo

  • Click here to see the demo
  • The demo page is also included in the source file

Continue reading →

Hide Javascript global objects with jQuery Secret plugin

10
2011.03

jQuery Secret is a plugin that prevent creating global objects

jQuery Secret plugin logo

Description

Global objects are evil in javascript. Global data can be accessed by every script on the same page. They are easily to be overwritten, especially when you mix your code with others. For more details please take a look at Douglas Crockford’s artical at Yahoo! User Interface Blog (YUIBlog).To fix this we can wrap our code with a namespace. For example:

Continue reading →

Get hidden elements width and height with jQuery

05
2011.03

A jQuery plugin that gets the actual width of hidden DOM elements

jQuery Actual plugin logo

Description

Older version of jQuery has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property ‘display’ set to ‘none’. $('.hidden').width(); will return 0 instead of the actual width. This plugin simply fix it.

Demo

  • Click here to see the demo
  • If you use css3pie you might also want to take a look at this demo( demo/css3pie.html )
  • Demo pages are also included in the source file

Continue reading →

Preload images with jQuery Preload plugin

01
2011.03

A jQuery plugin that preloads images

jQuery Preload plugin logo

Description

There are times that we need to preload images to bring better user experience. You will not want your users to wait for 2 seconds when they hover their mouse over the navigation menu before the background image actually appears; or keep them waiting too long when they switch a slideshow. This plugin can also be useful when you want to add more images on the page through a ajax call.

Demo

  • Click here to see the demo
  • The demo page is also included in the source file

Continue reading →