If you need to redirect from one page to another, you can achieve this with either a META tag redirection or Javascript. See below for an example. You should provide a manual link as not all browsers support META tags – and javascript won’t work if its been disabled: <html> <head> <title>Move my domain!</title> <meta [...]
We have been using Fusion Charts for a number of projects. They provide very nice slick looking animated graphs and widgets (now available as Google Gadgets too incidentally). However as they are Flash based they can cause problems when you place other elements in front of them – for example a “modal dialog” box. Flash [...]
If you’ve ever used the Sustainability Victoria calculator, Administered Joomla or poked someone on Facebook, then you might wonder how they create those nice modal dialog boxes that have replaced the ugly javascript confirm() in most modern web applications: Well, thanks to prototype.js and ModalBox now you can. ModalBox is a javascript library that helps [...]
To help speed up the load time of your prototype.js and scriptaculous pages, you can now download fully compressed versions of all the required files from the ‘prototype-core’ group on google thanks to John David-Dalton (original post on Ajaxian): http://groups.google.com/group/prototype-core This reduces the size of prototype and scriptaculous to 64k total! Be sure to read [...]
If you write a fair bit of OO javascript and also utilise AJAX through one of the many frameworks (I personally use prototype.js most of the time) you may have come across the following issue: var myobj = new Object(); myobj.Methods = { result: 0, callAjax: function() { new Ajax.Request(‘ajax.php’, { onComplete: function(transport) { this.result [...]
Debugging javascript in IE is often like walking on a minefield with a blindfold on. You have no idea where you are when bombs go off. Thankfully, Microsoft provides a debugging tool called Microsoft Script Debugger which makes debugging javascript much easier. You can download the tool from here. Once installed you get a full [...]
The following javascript function returns a URL encoded string so that it is safe to use in URLs or as a GET request: function URLDecode (encodedString) { var output = encodedString; var binVal, thisString; var myregexp = /(%[^%]{2})/; while ((match = myregexp.exec(output)) != null && match.length > 1 && match[1] != ”) { binVal = [...]
Prototype provides an excellent abstraction mechanism for event handling in javascript. I needed to capture when a user hit the ‘return key’ inside a text box, and then perform a specified action. Using the observe function and the KEY_RETURN constant, you can easily detect when this is done. Simply place the following code in a [...]
If you are using the values on a page (e.g. the values of form elements) directly in mathematical formulas in javascript, you can have issues with ambiguity of types. For instance: var total = 0; total += document.myForm.element.value; // e.g. value = 5 alert(total); The above example can lead to a result of “05″ instead [...]
A couple of very simple yet handy routines for validation of form fields: Function to validate an email address (see original post): function ValidateEmail(email){ var emailReg = “^[\\w-_\.]*[\\w-_\.]\@[\\w]\.+[\\w]+[\\w]$”; var regex = new RegExp(emailReg); return regex.test(email); } Function to validate a number: function ValidateNumber(num) { return num.match(/^\d+$/); } Input mask for a field to only accept [...]
Recently I’ve started overhauling all our old javascript libraries to make them more object-based and easier to maintain. As a result, I’ve needed to get familiar with how to create objects and assign properties and methods. This is surprisingly easy in javascript: Creating an object (Constructor) with properties: function MyObject(param1, param2) { this.myProperty = param1; [...]
Often when coding complex javascript you’ll wish you had the ability to debug objects or arrays that you are working on – much like Data::Dumper in Perl or var_dump in php (see previous posts on these topics). Prototype.js provides an easy way to do this using the .inspect() method for hashes and arrays: var myComplexHash [...]
I am always forgetting the syntax for foreach() loops in javascript. They actually don’t exist (not in their Perl or Php form anyway) and they differ in that they iterate over all the properties of an object, not an array. You can get some unexpected results if you aren’t careful. In perl you do the [...]