exscale.se

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!

• Comments are off
• Filed under Javascript, PHP

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.

• Comments are off
• Filed under Ajax, jQuery, Progressive Enhancement

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:

<?php
    phpinfo();
?>

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!

• Comments are off
• Filed under Ajax, jQuery, PHP, Progressive Enhancement

Head Tracking using the Wii Remote

Thursday, January 17, 2008

Wicked.

Want some more?

• Comments are off
• Filed under Funny Stuff, Other

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(topLink.is(':only-child')) {
                topLink.parent().hide();
            }
            else {
                topLink.hide();
            }
        });
    }
}

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!

• Comments are off
• Filed under jQuery, Progressive Enhancement, Usability

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:

• Continued...
• Comments are off
• Filed under CSS, PHP

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.

• Comments are off
• Filed under Development