header image

Archive for the 'JavaScript' Category

Cool JS Shadow Library

Friday, April 25th, 2008

light_and_shadow.png Light & Shadow is a ProtoType-based library for creating great looking drop shadows easily. Check out the HTML I used to generate the example image and see it yourself that it’s not rocket science!

All you have to do is to set up a light source with a few parameters (distance, intensity, size etc.) and add the class ’shadowThrowing’ to your elements which should… well, throw shadows :-) . I won’t go into details here, you can find the explanation and other details on the Light & Shadow project page.

(Found via Gedankenkonserve - thanks Bernhard ;-) )

tags:

Live Validation - Easy Client-side Javascript Validation

Tuesday, April 15th, 2008

live_validation.pngUpdate: Sergio, the author of the livevalidation rails plugin updated the plugin so you can disregard the finale of the article (validatesconfirmationof is working, as well as the newest version of livevalidation, 1.3 is used in the plugin - so no additional tweaking is needed, install and validate away ;-) )

Surely I am not the only one who was a ‘bit nervous’ (that was a mild euphemism) when his carefully entered data disappeared after submitting a form to the server. Nowadays web applications are doing better than that - valid data is saved and only the problematic fields are pointed out.

Of course even that feels so 1990’s now. A contemporary (ehm… web 2.0?) web application is expected to validate the form on the client side already (WARNING! That doesn’t mean at all you shouldn’t validate on the server side though - client side validation is for the good guys but you should still look out for the script kiddies et al), pointing out the errors on the fly so there is no need to come back and change/edit those fields after submitting a form.

My library of choice is livevalidation, which has a Rails companion too - if you are using Rails form helpers and standard validation on your models, you don’t have to touch anything just install livevalidation (=drop it to your javascripts folder, it’s a single .js file). w00t!

The only major shortcoming (from my POV) of the Rails plugin is that validatesconfirmationof is not implemented. However, it’s easy to add it via standard javascript:

<input id="user_password" name="user[password]" size="30" type="password" />
<input id="user_password_confirmation" name="user[password_confirmation]" size="30"> 
<script type="text/javascript">
var validate = new LiveValidation('user_password_confirmation');
validate.add( Validate.Confirmation, { match: 'user_password' } );
</script>

That’s it!

One more note: the Rails plugin contains version 1.2 but there is a newer version, 1.3 so be sure to replace it.

tags: