Archives for January 2008

You are currently browsing 7 article(s) published in January 2008, please try the search if you can't fint what you're looking for.

Javascript compression PHP class

Monday, January 21, 2008

In addition to my CSS compressor and constants parser I've also written a very simple Javascript compressor class that uses Nicolas Martin's PHP port of Dean Edward's Javascript packer.

It works in exactly the same way as the CSS-compressor. Create a new instance, pass the directory(ies) you want to look for .js-files in and then call the pack-method.

$jsc = new JSCompressor('js/');
echo $jsc->pack();

Reducing the number of HTTP requests the browser needs to make is essential for performance. Together with full packing of all the code, file-size is often reduced by up to 70% and the number of HTTP requests always down to 1.

Download the demo and have fun!

Submit form using ajax jQuery plug-in

Sunday, January 20, 2008

This plug-in will prevent your form's default action on submission and instead submit all data using XHR. Use it like this:

// submit the '#contact form'-form using XHR, then update the #contact-element with the response
$('#contact form').ajaxSubmit('#contact');

It will submit to the form's action using the form's method unless specified differently when calling the plug-in.
The plug-in will submit any element in the form that has a name-attribute to the URL specified in action.

The ajaxSubmit plug-in takes two arguments, the first is either a string containing a CSS-selector pointing to the element that should be updated with the response, or a custom callback-function that will run after ajax-response is ready. The response will be passed to the callback function.

The second argument is a config-object where you can set action, method and loading. They default to form's action, form's method and 'Loading...'. The loading-var is used to replace the text in the submit-button. You may wanna change to 'Sending...' or something similar if that is more appropriate.

You can get the latest version of the jQuery ajaxSubmit plug-in here.

Ok, enjoy.

Live form-validation jQuery plug-in

Sunday, January 20, 2008

This plug-in adds valid/invalid icons next to form-controls and validates them as user types.

It requires PHP for the validation so your server needs to have PHP installed.
An easy way to check if PHP is installed is to create a file (foo.php), put:


in it, upload it to your server and then go to the file in your browser and see what it says.
There should be a load of information if you have PHP installed.

The form-validator requires you use some common names for your form-inputs.
There's only three fields specified at the moment; 'name', 'email' and 'message'. But if you're not completely unfamiliar with PHP you should have no problem adding more of your own.
Also, if you prefer 'content' or 'comment' or something instead of 'message', simply open the FormValidator PHP-class, find the line that defines the message-validation and rename to whatever you like.
Anything passed to the FormValidator that isn't defined in the class will always return true.

Now, to validate a form using jQuery you will obviously need your HTML form (the plug-in looks for input[type="text"] and textarea) set-up, and a .js-file that initiates the plug-in:

$(document).ready(function() {
    $('#contact form').liveValidation({
        validIco: 'gfx/validIco.gif',        // url to valid icon
        invalidIco: 'gfx/invalidIco.gif',    // url to invalid icon
        action: 'AjaxFormValidator.php'        // url to php-file

You can download a zip with the 2 required PHP-files, a couple of valid/invalid icons, an example PHP-file as well as jQuery and the live validation plug-in here. Or you can always get the latest version of the plug-in here together with the two needed PHP-files: FormValidator and AjaxFormValidator.

Have fun!

Head Tracking using the Wii Remote

Thursday, January 17, 2008


Want some more?

Only show top-links if they are needed using jQuery and Dimensions

Wednesday, January 16, 2008

A link in the footer pointing to the top of your site is quite common and, as most people don't know about/use PgUp (or something similar), can be helpful, ... although perhaps we should educate users instead and stop replicating browser/os-behavior, like so many suggest we do with print-links and such.

Nevertheless, here's a little snippet of jQuery that will hide top-links on your site unless they're needed (ie, there's a visible scrollbar).

The function needs to know what your top-links are pointing to, but if you don't supply a value it defaults to '#'. Which is what I always link my top-links to as every browser I've ever come across takes you to the top of the page when you click a link with an href-attribute-value of '#'.

function hideTopLinks(topLinksHref) {
    var href = topLinksHref || '#';
    var topLinks = $('a[href="' +href +'"]');

    if($(window).height() >= $(document).height()) {
        topLinks.each(function() {
            topLink = $(this);
            if(':only-child')) {
            else {

You may wanna put that function in your project object (whoa, what a rhyme!), I, for example, keep that function in aFramework.general.hideTopLinks();

Have fun!

CSS Constants and Compression PHP Class

Tuesday, January 15, 2008

I've mentioned my take on CSS-constants before but I haven't come around to actually creating the back-end needed, until now.

Download CSSCompressor and demo-files

The way I see CSS-constants differs a bit from what I've seen over the internet before, which is basically just about storing property-values in variables. That's all good and very basic to implement using any server-side language. What I wanted, tho, was a replacement for classes (CSS-classes that is), so this is how I see constants:

More to the Console than just Log

Friday, January 04, 2008

I just recently found out that the Firebug console has quite a lot more to offer than just its log-method.

If you want to dump an entire object you can use console.dir() (works very similar to PHP's var_dump() if you're familiar with it).

You can also time the execution of a certain part of your script by running console.time('Timing this and that'); and console.timeEnd();

There's even more goodness so check out Firebug and Logging unless you have already, and sorry if this is old news to you.

Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

January 2008

1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Random Quote

- Krille

Random Images

Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)

Blog Roll