Wednesday, April 09, 2008

Dynamic web page development

Recently, I am working on creating a simple web2.0 framework which enables commenting, rating and tagging. Of course, there are two parts: client side and server side. Client side programming using Javascript almost kills me because of incompatibility among different browsers.

(1) When content of a div element exceeds size of the div box, different browsers responde in different ways.
In IE, you can use white-space and word-break to force word wrap.
in FireFox, unfortunately there is not an easy way to do it. You can use overflow property to force a scroll bar. However, this is not what I want. I want the text wrapped automatically.

(2) Following is a piece of javascript:

var inputele = document.createElement('input');
inputele.setAttribute('type', 'button');
inputele.setAttribute('name', 'testbutton');
inputele.setAttribute('value', 'click me');
inputele.setAttribute('onClick','javascript:alert(\'hello,world\');return false;');

In FF, it works well. But in IE, it does not work. It seems that setAttribute can not be used set event handlers.
Instead, you should use attachEvent.

inputele.attachEvent('onclick', function(){ ... });
Or:
invokeStr = "calculate(1,2)";
inputele.attachEvent(onclick', function(){ eval(invokeStr); }

Besides, you can not use setAttribute to modify style property in IE.
In IE:

element.style.display = "block";
element.style.position ="relative";
...
In FF:
style = 'display:block; position:relative;';
element.setAttribute('style', style); 

Moreover, name property of a newly built input element can not be modified after the element is created. Official description is here http://msdn2.microsoft.com/en-us/library/ms536389(VS.85).aspx. Stupid, right?
It means in IE you must use:

var inputele = document.createElement('<input type="button" name="buttonname" value="click me"></input>');

Many many others......

Currently, I make use of object navigator to judge type of browser. For IE, navigator.appName is "Microsoft Internet Explorer". Actually, navigator.userAgent provides detailed information about browser.

No comments: