Thursday, 28 February 2008

Enjoy: 2008 Beijing Olympic Games (8th~24th, Aug, 2008)

2008 Beijing Olympic Games start at 8th Aug 2008, there are total 35 sports in the Olympic Games. By the flash shows below, you can see all of these 35 sports icons. If you click any one of these icons, it will link you to the related sport page in 2008 Beijing Olympic Games official website. Enjoy it. :)

Wednesday, 27 February 2008

Javascript: 2 ways to insert new function dynamically

The coding below help you to create and insert new javascript function into a loaded html page. Which is very useful for dynamic external js libs binding. I personally recommend the first way:
function addFunc()
{
var sFunc = ""
+"function myOnUnLoad()"
+"{"
+"alert('unload...');"
+"};"
+"window.document.body.onunload = myOnUnLoad;";

window.eval(sFunc);
}
Second way, by this way you have to write down all your code in a external js file, in this case, let us say myjs.js file:
function addFunc()
{
var o = window.document.createElement("script");
o.type="text/javascript";
o.src="myjs.js";

//if you use o.innerHTML="..." or o.innerText="..." here, you will get a
//runtime error. That is why you have to use a external js file, and use
//o.scr="myjs.js" to insert function code


window.document.getElementsByTagName("head")[0].appendChild(o);
}

//-- code in myjs.js file
window.document.body.onunload = function ()
{
alert("unload...");
}

Javascript: tricky window.open() on IE6

If you write javascript regularly, you must be very familiar with function window.open(), which open an external browser window with particular features (size, position, scroll bars, status bar etc.) This function is supported by almost all the popular browsers (IE6/7, Firefox, Opera and Safari), but I found in one particular case it doesn't work properly on IE6, which is when you try to show a menu bar on the browser window. Followed is the code.
//page1.htm source code <html>
<head>
<title></title>
<script type="text/javascript">
function popup()
{
var style = "width=300,height=300,left=0,top=0,"
+"toolbar=yes,scrollbars=no,resizable=no,menubar=yes,status=yes,location=yes";
var o = window.open("page2.htm","page2",style);
}
</script>
</head>
<body>
click <a href="javascript:void(0);" onclick="popup();">here</a>.
</body>
</html>
////page2.htm source code
<html>
<head>
<title>page two</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;
width:300px;height:300px;background-color:yellow;"></div>
</body>
</html>
When I launch page1.htm by all the other browser except IE6, and click the link in the page, it will open page2.htm in a pop-up window with correct clientHeight and clientWidth value, in this case they are 300 and 300. But when I do the same thing by IE6, I got a pop-up window with 19px more height space in the window. And if I switch off the menubar from the javascript code, it works ok. Below is the screenshot of this bug?

Javascript: basic XML object searching

In this case, let's suggest we have already declared a xml node object oXml, the most popular search xPaths are:
//search by attribute
oXml.selectNodes("//tag1/tag2[@id='1' and type='1']");
//search by tag text value
oXml.selectNodes("//tag1/tag2[text='text']");

Javascript: the first dodgy, execute javascript function in browser address bar

In Browser addess bar, type in javascript: and then followed by the javascript function you wanna execute, press enter key. Below is a example.
javascript:alert(document.getElementById("id").outerHTML);