Javascript Packer

Worry about your javascript source code will be stolen or your javascript file is getting bigger? There are several javascript packer on the net that are able to compress and encode the code.

http://dean.edwards.name/packer/

FUEL

FUEL (Firefox User Extension Library) is a JavaScript Library designed to help developers build extensions using terminology and interfaces that are familiar to them.
FUEL is new in Firefox 3 and will be backported to Firefox 2 as well. ​​​​​​It will be usable in Firefox 1.5-3.0.

FUEL is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas. We want to start with areas that will provide the most benefit.

FUEL is Firefox-only for the time being.

http://wiki.mozilla.org/FUEL
http://developer.mozilla.org/en/docs/FUEL

Unicode Support in Ruby on Rails with MySQL

I have found two links that might be useful for ruby on rails developers that need to develops with unicode characters. Have a look on:

http://woss.name/2006/10/25/migrating-your-rails-application-to-unicode/
http://www.gaugeus.com/ramblings/2006/11/15/unicode-support-in-ruby-on-rails-with-mysql-and-microsoft-sql-server

Artificial Mouse Events in Javascript

I just learned one more how to create mouse events that are just like real user activities by using initMouseEvent.

For more detail, look at: http://developer.mozilla.org/en/docs/DOM:event.initMouseEvent
In this link, there is a syntax and example. You can create an event and trigger an event.


/**
* Creates a dummy event object
*/
function createEvent(type){
if(document.createEvent) {
e = document.createEvent('MouseEvents');
}else if (document.createEventObject){
var e = document.createEventObject();
}

if(mapObj.getDomObj() && mapObj.getDomObj().dispatchEvent && e && e.initMouseEvent) {
e.initMouseEvent(type,true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
}
return e;
}

/**
* Fires a mouse event on a dom object
* @param {Object} domObj
* @param {Object} type
* @param {Object} e
*/
function fireEvent(domObj, type, e){
if(domObj.dispatchEvent){
domObj.dispatchEvent(e);
} else {
domObj.fireEvent("on" + type, e);
}
}


childNodes property of DOM object

A day when I paired with my friend, Sophy to code a javascript function, I found something that is unexpected behavior to both of us. It is the childNodes property of a dom object. I am not sure this is a default behavior of dom manipulation of javascript or not.

For example, you have a parent div container called "parentDiv", and it has two child containers. This parentDiv can be either added to the browser document or not, it doesn't matter. When we try add the child element of parentDiv to the browser document​ or to another dom element, the childNodes property of parentDiv is always updated from 2 to 0. Notice the following code:


var parentDiv = document.createElement("div");
var div1 = document.createElement("div");
div1.innerHTML = "hello1";
var div2 = document.createElement("div");
div2.innerHTML = "hello2";

parentDiv.appendChild(div1);
parentDiv.appendChild(div2);

alert(parentDiv.childNodes.length); //2
document.body.appendChild(div1);

alert(parentDiv.childNodes.length); //1
document.body.appendChild(div2);

alert(parentDiv.childNodes.length); //0


Determine the real offsetWidth/offsetHeight of the dom object or html string

Suppose, you know to know the exact pixel of width/height of dom element or html string that are not yet added to the browser document yet. I developed a function that can do this stuff by the support from my boss, Chris.


/**
* Method to calculate the size of the content
* and return back the object which contains the width and the height of the content
* @param {Object} node - html string or dom element
* @return {object} width/height of content
*/
function calculateContentSize(node) {
var realWidth, realHeight, tmpDiv, previousDisplay;
tmpDiv = document.createElement("div");
tmpDiv.style.visibility = "hidden";

//dom object
if(typeof node == "object" && node != null) {
previousDisplay = node.style.display;
//must set node to inline
node.style.display = "inline";
tmpDiv.appendChild(node);
//must set node container to inline too
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
node.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}

//html string
else if(typeof node == "string" && node != "") {
previousDisplay = tmpDiv.style.display;
tmpDiv.innerHTML = node;
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
tmpDiv.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}
else {
realWidth = 0;
realHeight = 0;
}

return {width: realWidth, height: realHeight};
}


This function create a temporary div container, set its visibility to "hidden", set its display style to "inline", append the content to this container, append this container to the browser document, and use offsetWidth/offsetHeight property of this container before it was removed from the browser document.

Remember, if it is a dom object, you must set its display style and the temporary container to "inline" to make this function working.