web(cslai) » Javascript

Writing jQuery Plugin 101

Jeffrey04 — Wed, 03 Mar 2010 17:25:05 +0000

I often struggle to get my Javascript code organized, and have tried numerous ways to do so. I have tried putting relevant code into classes and instantiate as needed, then abuse jQuery’s data() method to store everything (from scalar values to functions and callbacks). Recently, after knowing (briefly) how a jQuery plugin should be written, it does greatly simplify my code.

While there are still a lot to learn about plugin authoring, I would only jot down what I know right now. As the code may not conform to the best practice, please let me know if there is a better way.

To begin, we start with an empty html page

Title

The first included Javascript script is obviously jQuery, the second file (script.js) is my code, which is not named properly. The basic structure of the file should look like follows:

Let us just ignore the functions above for now and proceed to the actual plugin code first. What we're trying to achieve here is to post whatever written to #a is posted to #b, and #b post it to #c. The function call should be as follows:

$(selector).foo(sub_module, options); // or $(selector).foo(sub_module, action, [parameter_if_any]);

foo is the name of the example plugin, and sub_module determines which sub-module is responsible to carry out the actual action specified by action. If options is passed in instead, then it would trigger init() for the respective sub-module.

In short, foo() is there just to notify the sub-module to call the right action, hence the code should be simple, as follows (add after the last comment in the basic structure code shown above):

(function foo() { $.fn.foo = function(module, param) { var arg = trim_argument(arguments); return this.each(function() { if(module_exists('foo', module)) { if(typeof param != 'string') { $.fn.foo[module] .apply($(this), shift_argument('init', arg)); } else { $.fn.foo[module] .apply($(this), arg); } } else { throw(module + ' module does not exists'); } }); } })();

I have a habit to group all the relevant bits together, hence the code is enclosed in an immediately executed function block. It does what it is designed to do -- to delegate the function call to the respective sub-module. trim_argument(); is there to remove the first argument (in this case module), and shift_argument(); is used to insert an argument into the existing argument list. These two function functions are written to enable us to manipulate the arguments to be used in Function.apply() method. Of course, if the specified sub-module does not exist, the code will throw an exception.

Now that we have the main plugin code written, next is to start developing the submodules. Firstly, is a plugin for the text box #a. The textbox is supposed to show textbox #b and passes the input text to #b whenever the value is not null. The code is to be added right after the main plugin, as mentioned above.

(function alpha() { $.fn.foo.alpha = module_init('foo', 'alpha'); var alpha = $.fn.foo.alpha; alpha.init = function(options) { $(this) .data('options', $.extend({}, options)) .keyup(alpha.alpha_update); }; alpha.alpha_update = function() { $(this) .data('options').b .foo('bravo', 'alpha_update', $(this).val()); }; })();

module_init is there to do the actual delegation of action. Again, it will check with the remaining arguments after removing the first, which is the action. The function will then attempt to call the action if available, otherwise a new exception is thrown.

alpha.init is a compulsory method that initializes the sub-module. On the other hand, alpha.alpha_update is the actual code that updates another textbox via another sub-module, which is named 'bravo', and coded as follows:

(function bravo() { $.fn.foo.bravo = module_init('foo', 'bravo'); var bravo = $.fn.foo.bravo; bravo.init = function(options) { $(this) .data('options', $.extend({}, options)) .hide(); }; bravo.hide = function() { $(this).fadeOut('fast'); }; bravo.show = function() { $(this).fadeIn('fast'); }; bravo.toggle = function(value) { if($(this).is(':hidden') && value.length > 0) { bravo.show.call(this); } else if($(this).is(':visible') && value.length == 0) { bravo.hide.call(this); } }; bravo.alpha_update = function(value) { $(this) .val('bravo: ' + value) .data('options').c .foo('charlie', 'alpha_update', value); bravo.toggle.call(this, value); }; })();

The bravo code basically does what it is intended to, which is to receive update from alpha, and then toggle the display of the text box depending on the length of passed in value. After that, bravo is going to post the received update to charlie, as follows:

(function charlie() { $.fn.foo.charlie = module_init('foo', 'charlie'); var charlie = $.fn.foo.charlie; charlie.init = function(options) { $(this) .data('options', $.extend({}, options)) .hide(); }; charlie.hide = function() { $(this).fadeOut('slow'); }; charlie.show = function() { $(this).fadeIn('slow'); }; charlie.toggle = function(value) { if($(this).is(':hidden') && value.length > 0) { charlie.show.call(this); } else if($(this).is(':visible') && value.length == 0) { charlie.hide.call(this); } }; charlie.alpha_update = function(value) { $(this).val('charlie: ' + value); charlie.toggle.call(this, value); };

After receiving data from bravo, likewise, it updates the textbox, then display or hide the textbook accordingly. For every action method call, this keyword is usually similar to the jQuery callback functions, which refers to the respective html element (not wrapped with jQuery functions), hence the function call within the sub-module is often via Function.call() /* or */ Function.apply().

To run the code, one only need the following code:

$(function() { var a = $('#a'), b = $('#b'), c = $('#c'); a.foo('alpha', { b: b, c: c }).focus(); b.foo('bravo', { a: a, c: c }); c.foo('charlie', { a: a, b: b }); });

That's all, we have done a very simple, and pointless plugin.

My Collection of Common Javascript Functions – Part 1

Jeffrey04 — Thu, 04 Jun 2009 13:19:14 +0000

After coded enough Javascript few months back, I found that there are a couple of functions that I kept re-using in different projects. Therefore I took some time to refactor them and re-arrange them into a single file. The common code that I keep reusing even today consists of functions that does prototypical inheritance, scope maintenance, some jquery stuff, google maps api stuff and some general ajax application related code.

PrototypicalPrototypal Inheritance

Basically after reading through some articles across the internet, especially this article, then I have this piece of code in my collection.

if(typeof Object.create !== 'function') {
    Object.create = function(_o) {
        var F = function () {}
        F.prototype = _o;
        return new F();
    };
}

It is basically the same piece of code because I find it cleaner and more efficient than my initial draft.

Namespacing

Everyone agrees that global variables are evil, therefore I group all my common functions and classes into one single object, as follows,

var cs = Object.create(new function() {
    // some other code
}

And I find the way YUI manages the modules good enough for me, then I emulated YAHOO.namespace function by having this in my object.

    this.namespace = function(_namespace) {
        if(!this[_namespace]) {
            this[_namespace] = Object.create(new function() {});
        }

        return this[_namespace];
    }

The code may not be clever/clean, but as long as it does the job I have no complaint.

Preserving State

I didn’t quite like the delegate function as I can’t pass in extra arguments, therefore I have this after some refactoring

    var __delegate = function(_method, _scope) {
        var _arguments = arguments;
        return function() {
            return _method.apply(
                _scope, compile_arguments.call(
                    this, _arguments, [], 2
            ));
        }
    };

    var compile_arguments = function(_arguments, _result, _start) {
        for(var i = _start; _arguments.length > _start && i < _arguments.length; i++) {
            _result.push(_arguments[i]);
        }

        return _result;
    };

    this.delegate = __delegate;

Emulate Functional Programming

I have recently decided to learn a little bit on functional programming recently but I haven’t decide which language I am picking. I have some experience in SWI-Prolog but prolog is just a declarative functional programming and does not seem to offer closure, higher order functions and currying. Anyway, back to the topic, after spending some time in this book, I modified some code in the book and result in…

    this.functional = Object.create(new function() {
        this.map = function(_function, _arguments) {
            var result = [];

            for(var i = 0; i < _arguments.length; i++) {
                result.push(_function(_arguments[i]));
            }

            return result;
        };

        this.reduce = function(_combine, _base, _arguments) {
            return _arguments.length > 0 ?
                this.reduce(
                    _combine, _combine(_base, _arguments.shift()),
                    _arguments
                ) : _base;
        };
    });

I am not sure if I can do the similar recursion in cs.functional.map compared to cs.functional.reduce because I am rather weak in recursion.

~~That’s all for now, and in the second part of this article I will post some helper functions for use with some third party libraries like jQuery and Google Maps API.~~

EDIT 15/8/2009 There are some changes to this set of functions, will post an update soon and there will probably no part 2 any time soon.

Maintaining State with jQuery Event

Jeffrey04 — Mon, 04 May 2009 13:17:24 +0000

Maintaining state in Javascript is not too difficult once you catch the idea. However, as I am not a super brilliant programmer, it takes me some time to find a way to maintain state as YUI Event does in jQuery.

I like grouping relevant functions into a class as it makes code easier to manage (for me, as there may be better ways. As I just recently found out how prototyping inheritance works, it is possible that the discovery may change the way I code in future), therefore the scope of event handler functions is very important. Making the scope (value/reference of this) to the DOM element listened to the event does not help in accessing the shared data so I needed a way to change that behavior.

To solve the problem, a small derivation of the previously discussed delegate function will come in useful.


/**
 * Simulating YUI Event with jQuery
 */
(function($) {
EventHandler = function(_method, _scope) {
    var _argument = {};

    if(arguments.length > 2) {
        _argument = arguments[2];
    }

    // jquery default event callback format
    return function(_event) {
        // this = DOM element
        return _method.call(_scope, _event, this, _argument);
    };
};
})(jQuery);

var Foo = function() {

    var bar_handler = function(_event, _element) {
        alert('bar');
    }

    var foo_handler = function(_event, _element, _extra_argument) {
        alert(_extra_argument);
    }

    (function() {
        $('#foo').click(EventHandler(foo_handler, this, 'foo'));
        $('#bar').click(EventHandler(bar_handler, this));
    }).call(this);
};
var foo = new Foo();

That basically wraps up what I found these couple of days, if I manage to dig some time, the next post should be focused on prototypical inheritance.

Proof of Concept: YQuery

Jeffrey04 — Mon, 04 May 2009 13:01:24 +0000

After the last post, I found that it may be fun to write a wrapper for YUI in order to make it behave like jQuery. Therefore, the code below is clearly mainly for self-amusement and is not intended to be used in production projects. However, through coding this, I found that although the difference in design, but YUI is obviously capable to do what jQuery offers (if not more). I will not continue working on this so whoever interested may just copy and paste the code to further developing it.

/**
 * Proof of concept : jQuery-like syntax in YUI
 */
(function() {

var yui_builder = (function(Selector, Element, DOM, Event) {
    return function(_selector) {
        var Result = function() {};

        var init = function(_selector) {
            var result = [];

            if(typeof _selector == 'object') {
                result = [ new Element(_selector) ];
            } else {
                result = query_elements.call(this, _selector);
            }

            return result;
        };

        var delegate = function(_scope, _function) {
            return function() {
                return _function.apply(_scope, arguments);
            };
        };

        var query_elements = function(_selector) {
            var result = new Result;
            var elements = wrap_elements(Selector.query(_selector));

            for(var i in elements) {
                result[i] = elements[i];
            }

            return result;
        };

        var unwrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = _elements[i].get('element');
            }

            return result;
        };

        var wrap_elements = function(_elements) {
            var result = [];

            for(var i in _elements) {
                result[i] = new Element(_elements[i]);
            }

            return result;
        };

        return (function(_elements) {
            _this = new Result;

            _this.addClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].addClass(_class);
                }

                return this;
            };

            _this.append = function(_content) {
                if(typeof _content == 'string') {
                    for(var i in _elements) {
                        _elements[i].set(
                            'innerHTML',
                            _elements[i].get('innerHTML') + _content
                        );
                    }
                } else if(typeof _content == 'object') {
                    _elements[0].appendChild(_content);
                }

                return this;
            };

            _this.appendTo = function(_selector) {
                var _parent = yui_builder(_selector);

                for(var i in _elements) {
                    _elements[i].appendTo(_parent.get(0));
                }

                return this;
            }

            _this.attr = function() {
                var result = this;

                if(arguments.length == 1 && typeof arguments[0] == 'string') {
                    result = _elements[0].get(arguments[0]);

                    if(!result) {
                        result = undefined;
                    }
                } else if(arguments.length == 1 && typeof arguments[0] == 'object') {
                    for(var i in _elements) {
                        for(var attribute in arguments[0]) {
                            _elements[i].set(attribute, arguments[0][attribute]);
                        }
                    }
                } else if(typeof arguments[1] == 'function') {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1].call(_elements[i].get('element'), i));
                    }
                } else {
                    for(var i in _elements) {
                        _elements[i].set(arguments[0], arguments[1]);
                    }
                }

                return result;
            };

            _this.each = function(_callback) {
                for(var i in _elements) {
                    _callback.call(_elements[i].get('element'), i, _elements[i].get('element'));
                }

                return this;
            };

            _this.eq = function(_index) {
                return yui_builder(_elements[_index]);
            };

            _this.get = function() {
                var result = [];

                if(arguments.length == 0) {
                    result = unwrap_elements.call(this, _elements);
                } else {
                    result = _elements[arguments[0]].get('element');
                }

                return result;
            };

            _this.hasClass = function(_class) {
                var result = false;

                for(var i in _elements) {
                    if(_elements[i].hasClass(_class)) {
                        result = true;
                        break;
                    }
                }

                return result;
            };

            _this.html = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = _elements[0].get('innerHTML');
                } else {
                    _elements[0].set('innerHTML', arguments[0]);
                }

                return result;
            }

            _this.index = function(_subject) {
                var result = -1;

                for(var i in _elements) {
                    if(_elements[i].get('element') === _subject) {
                        result = i;
                    }
                }

                return result;
            };

            _this.removeClass = function(_class) {
                for(var i in _elements) {
                    _elements[i].removeClass(_class);
                }

                return this;
            }

            _this.size = function() {
                return _elements.length;
            };

            _this.toggleClass = function() {
                if(arguments.length == 0) {
                    for(var i in _elements) {
                        if(_elements[i].hasClass) {
                            _elements[i].removeClass(arguments[0]);
                        } else {
                            _elements[i].addClass(arguments[0]);
                        }
                    }
                } else {
                    for(var i in _elements) {
                        if(arguments[1]) {
                            _elements[i].addClass(arguments[0]);
                        } else {
                            _elements[i].removeClass(arguments[0]);
                        }
                    }
                }

                return this;
            };

            _this.val = function() {
                var result = this;

                if(arguments.length == 0) {
                    result = this.attr('value');
                } else {
                    for(var i in _elements) {
                        this.attr('value', arguments[0]);
                    }
                }

                return result;
            };

            (function() {
                for(var i in _elements) {
                    _this[i] = _elements[i];
                }
            }).call(_this)

            return _this;
        }).call(this, init.apply(this, arguments));
    }
})(YAHOO.util.Selector, YAHOO.util.Element, YAHOO.util.Dom, YAHOO.util.Event);

})();

Most of the implemented functions are similar to what jQuery offers, therefore to use the yui_builder:


(function($) {
    // everyone loves $ function
    $(document.createElement('a'));
        .attr('href', 'test')
        .html('test')
        .appendTo(document.body);
})(yui_builder);

Maintaining State with YUI Event

Jeffrey04 — Sat, 11 Apr 2009 04:39:30 +0000

When one start writting Javascript in patterns like the module pattern, then sooner or later he would want to maintain the state when an event handler is called. The reason I am still using YUI to handle my event handling code is because I like how state can be maintained.

There are some other interesting things in the Event utility like YAHOO.util.Event.onDOMReady, YAHOO.util.Event.onContentReady as well as YAHOO.util.Event.onAvailable methods. Most of the time, the developer may want certain code to start running as soon as the DOM tree is loaded completely without having to wait for all the elements (image, flash etc.) to finish loading. Then YAHOO.util.Event.onDOMReady may come in handy. For example

YAHOO.util.Event.onDOMReady(function() { alert('Good day!'); });

After loading the DOM tree, then the browser will prompt ‘Good day!’ to the user.

Back to the topic, if the developer wishes to listen to some event and perform action as soon as the event is fired, then he may register the event as follows.

YAHOO.util.Event.on(some_element, 'change', some_callback_function, extra_parameter);

Everything looks fine, but when the developer has structure his code into patterns like the module patttern as follows:

(function(Event) { var Some_Module = function() { return { foo: 'bar', execute: function() { alert(this.foo); }, listen: function() { Event.on(element, 'change', this.execute, null, this); } }; }(); })(YAHOO.util.Event);

Notice in the forth and fifth arguments passed into the YAHOO.util.Event.on function, I am passing in no extra parameters and the fifth argument defines the scope of this keyword in the Some_Module.execute method.

If the developer uses YAHOO.util.Element to wrap certain elements, then he can also use another way to listen to the event

var element = YAHOO.util.Element('div'); element.on(some_event, some_callback_function, some_extra_parameter, some_scope);

Speaking of YUI Element, I just recently found a way to ‘emulate’ jQuery’s $() function with YUI components.

(function($) { $(document.body); // returns the body element wrapped in YAHOO.util.Element class })(function(_selector) { var result = YAHOO.util.Selector.query(_selector); if(result.length > 0) { if(result.length == 1) { result = new YAHOO.util.Element(result[0]); } else { for(i in result) { result[i] = new YAHOO.util.Element(result[i]); } } } else { result = false; } return result; });

Although not as powerful as jQuery’s $() function, but It can be useful in many situations where YUI is the only choice.

Random Javascript Notes

Jeffrey04 — Fri, 10 Apr 2009 17:24:24 +0000

I am starting to like programming in Javascript, especially after understanding more about how Javascript handles scopes. Surprisingly this take me like a year to figure out how scope is managed. The result of the findings is that I start doing a lot of experiments and discovered more interesting stuff through them.

It took me quite some time to accept the fact that each function is an object, therefore it is completely normal to write code that looks like

var some_function = function() { this.public_var = 'hello world'; this.public_method = function() { // do something } } var foo = new some_function(); alert(foo.public_var); // alerts 'hello world' this.public_method(); // the 'do something' method

Besides, in Javascript, you are allowed to use this magical syntax to automatically call a function after defining it.

// without arguments (function() { alert('hello world'); })(); // with arguments (function($) { $('some parameters'); // where $ = Some_Library_Function as passed below })(Some_Library_Function);

Because of the fact that a function is an object, you can do some wonderful stuff like this:

(function() { alert('hello world'); }).call(this); // hello world will be called

As I come from a more C-Like language background (hey, my first language was VC 6.0, what would you expect), I always wanted to find something equivalent in Javascript to define a class. Yes, Javascript is not a OO language in the sense that one can define a class like how it is done in PHP/Java or whatever C-like language. But I can do something like follows:

// it is always a good idea to surround code in a small block like this (function() { var Some_Class = function() { var private_property; this.public_property; var private_method = function() { // do something } this.public_method = function() { // do something } // a cheat to emulate a constructor (function() { private_property = 'hello world'; private_method.call(this); this.public_property = 'good day!'; this.public_method(); }).call(this); } })();

Yes, I am cheating all the way to make my ‘class’ to have a constructor. I can remove the block (function() { /* ... */ }).call(this); and everything should still work but I find it looking better if I put the initialization code inside the block.

You may notice I use a lot of obj.call() methods in the snippets above. I just found this as well as obj.apply() call can actually modify the scope of the this keyword. Back to the snippet above, I cannot refer to the property named public property in the private method as follows (without calling the private method using call/apply function):

var private_method = function() { alert(this.public_property); } // somewhere in the code private_method(); // this will throw exception as this.public_property is not recognized private_method.call(this); // by prividing a scope, then the value of public_property will be displayed

For further readings, I would recommend a blog post by K.Scott Allen that discusses the Function.apply and Function.call methods.

Now, after finding a way to change the scope, one may be interested in finding a way to create a closure and has the state maintained. Hence, by collecting the things that I learned in these few months, I am having something as follows:

(function(Delegate) { var some_callback = function() { alert(private_string); } var Some_Class = function() { var private_string = 'hello world'; (function() { some_callback = Delegate(some_callback, this); some_callback(); // should alert 'hello world' }).call(this); } })(function(_method, _scope) { return function() { _method.apply(_scope, arguments); } });

Isn’t this magic? Of course, there are more interesting stuff left for me to find out like inheritance (I am starting to like composition instead of inheritance so this is not a major problem), possibility to define interface in javascript etc. Hopefully this post helps people to quickly get started in Javascript programming.

For further readings, I would suggest the follow up articles of the above linked posts by K. Scott Allen on the Delegate, as well as closure. I hope I can find some time posting an article on closure once I figure out how to describe the concept without confusing myself and everybody.

Using YUI for DOM Manipulation

Jeffrey04 — Fri, 16 Jan 2009 05:07:57 +0000

After being frustrated of not getting consistent and accurate result via standard DOM methods especially html_element.getAttribute('key'); and html_element.setAttribute('key', 'value');, I came across some YUI library components that provides abstractions to various DOM methods. Some interesting DOM-related tools covered in this post are YAHOO.util.Element, YAHOO.util.DOM and YAHOO.util.Selector.

YAHOO.util.Dom

YAHOO.util.Element is basically a singleton instance that provides various DOM methods. Following are some of the methods that one may find useful. For more information, please refer to the API documentation.

Finding an Element by Id

To find an element by its Id, instead of document.getElementById, another way through YUI would be through YAHOO.util.Dom.get.

var element = YAHOO.util.Dom.get('some_element');

Finding Element(s) by Class Name

To find elements by class name,

var elements = YAHOO.util.Dom.getElementsByClassName('some_class');

YAHOO.util.Element

Before I discover how powerful is jQuery, I have relied on YAHOO.util.Element a lot in various tasks. Basically, YAHOO.util.Element wraps a HTMLElement and provide some methods to simplify the code used in certain DOM operations such as getting and setting attributes, manipulating element position etc. Detailed API documentation is here.

Creating a New Element

To create a new element, one typically pass in the result from document.createElement into the constructor as follows. For example, to create a new link element.

// create a new element var element = new YAHOO.util.Element(document.createElement('a')); // set the href element.set('href', 'http://www.google.com/'); // insert caption element.appendChild(document.createTextNode( 'Click me to the search engine.' )); element.appendTo(document.body);

Uses an existing Element

To wrap YUI Element component methods to an existing HTMLElement, pass in the element OR the element Id into the constructor.

var by_element = new YAHOO.util.Element( YAHOO.util.Dom.get('some_id') ); var by_id = new YAHOO.util.Element('some_id');

Getting the original HTMLElement

Sooner or later one would find out that it is impossible to call some DOM methods through the YAHOO.util.Element instance, for instance the setAttribute method. Besides that, as of 2.6.0, the appendChild method also doesn’t seem to accept instance from YAHOO.util.Element. Therefore to get the wrapped element,

var some_container = new YAHOO.util.Element(container_element); var the_yui_element = new YAHOO.util.Element(original_element); // this will result in an error some_container.appendChild(the_yui_element); // but this won't some_container.appendChild(the_yui_element.get('element'));

Hopefully instances of YAHOO.util.Element are also accepted by all methods requiring HTML element in future releases.

YAHOO.util.Selector

DOM Collection via CSS3 Selector

Those who are from jQuery may be interested in knowing that YUI also provides similar functionality via YAHOO.util.Selector. For those who are interested, the API documentation is here. As an example,

var elements = YAHOO.util.Selector.query('body p');

For those who are interested, the official site provides a great amount of information, guide, examples and tutorials. However, for those who are new to javascript, the tutorials may take them some time to get used to. However, after investing enough time in it, then the extensive API documentation will be extremely useful. I will document down some notes on YAHOO.util.Event, which is my favorite component next time.

Random Color Cloud

Jeffrey04 — Fri, 09 Jan 2009 07:08:04 +0000

Just happened to see this post a few months ago, and the author created another cloud that uses almost the same technique to ‘visualize’ a list of countries. The author uses PHP to generate the cloud originally and I thought I may be able to do in javascript. After some quick coding I managed to produce something similar to the first example, source code after the jump.

Too lazy to produce a preview page, but it should look somewhat like the original page, except that the caption isn't related to the color. The above script is not tested on other browsers besides Firefox 3, so they may break (I am extremely suck at Javascript hence I rely on YUI a lot, hopefully get to writeup on YUI soon)

Working Life

Jeffrey04 — Sun, 04 May 2008 08:08:31 +0000

I didn’t realize that I have been working for 3 weeks until the Labour Day which was a public holiday. Many things happened in these few weeks and I am still struggling to catch up with it. My superior and colleagues have been very helpful and offered me some helpful tutorials and books. I was instructed to build a event scheduler application using codeigniter in the first week and then work on a side project that extends a form using DOM methods and properties.

Developing the scheduler was not too difficult as I do not have to deal with browser experience inconsistencies very much and only concentrate on the business logic. However, when I started on my second project that extends a form to provide various widgets to guide users in filling the form correctly using YUI I nearly killed myself due to frustration. I am developing my scripts in a Ubuntu Gutsy Gibbon 7.10 desktop and use firefox 3 beta 4 to test them. I finally managed to produce a workable prototype in a week that runs almost perfectly under firefox.

Nightmare comes when the same script is deployed to a windows machine with the major 4 browsers installed (firefox, safari, opera and internet explorer). All browsers except IE7 runs my script and the error message offered by IE7 has no meaning. The first problem encountered was with the select box creation through DOM. As suggested by a tutorial in w3school, I used the following code to create the selection box.

var y=document.createElement('option'); y.text='Kiwi' var x=document.getElementById("mySelect"); try { x.add(y,null); // standards compliant } catch(ex) { x.add(y); // IE only }

Internet Explorer was not giving any helpful error message telling me which part is not right and I would have to use the following code to achieve the same thing.

x.options.add(new Option(...))

The reference of the constructor parameters to instantiate an Option object can be found here.

There are a couple of other problems too but fortunately I managed to fixed it in time. Internet Explorer is very strict with DOM but the problem with it is that the error message it spits is often far from being helpful. How the hell can one find out what can possibly be the cause of a “random runtime error”?

Recently I started to learn how to code using VIM through CREAM and vimtutor. I am now in the progress of remembering the key commands and probably uninstall cream by the end of the week to fully switch to VIM. I used to code in a mini-emacs editor provided by swi-prolog when I was doing my prolog subject but I didn’t quite like it because I don’t have a very flexible fingers to press the modifier keys all the time.

Slideshow using Scriptaculous

Jeffrey04 — Sun, 23 Mar 2008 16:04:09 +0000

I need a slide show script for my portfolio pages but couldn’t find a good one anywhere so I decided to write one myself. The slide show script will be able to display image and the respective description in a predefined order. However, in this version, visitors would not be able to directly jump to a particular slide yet. The script is written in prototype‘s object-orientation approach hence you need to have prototype called.

Prerequisite

Latest Prototype Javascript Framework and Scrit.aculo.us library
Call the slide show script file which you can download from here
Insert the images into a a list with id olImageSlide in following format: