JavaXcript: 2006

Wednesday, June 28, 2006

3-level Customizations of Function Arguments

Friday, April 14, 2006

Blogger Favelet (1)

Set folding

People who wrote frequently on blogger would soon find that they have a long list of articles jamming on the same page. Some of the templates provided by blogger do have a list of article titles on the sidebar for readers to click. But in some templates those article list is either not shown or is hidden far below and not so eye-catching.

Recently I came up with a favelet to deal with this. The entire code reads:

javascript:function gcls(c) {void(arr=[]); void(es= document.body.getElementsByTagName("*")); for(var i=0; (e=es[i]); i++) {if (e.className==c) arr.push(e)} return arr}; function each (a,f) { void(o=[]); for (var i=0; (x=a[i]); i++) {o.push(f(i,x))} return o} function h(c) {void(each(gcls(c), function(i,x) {void(x.style.display='none')}))}; h("post-body"); function nd(t) { void(ss=t.parentNode.childNodes); for (var i=0; i<ss.length; i++) {void(u=ss[i]); if (u==t) {return ss[i+2] }}}; void( each(gcls("post-title"), function (i,x) {x.style.cursor= 'pointer'; x.onclick= function() {void(y= nd(x).style); y.display= y.display== "none"? "block":"none"} }))

It does look ugly, doesn't it ?

What it will do is:

Find all the post contents and hide them;
Find all the post title, and assign an onclick eventhandler to each of them, such that when clicked, their corresponding content is either shown or hidden.

How to use it ?

Go to the bookmark manager of your browser and create a new bookmark;
To the "url" entry, copy and paste the above code. Note that entire code should all be in one line.
Give whatever name you want. For example, "Set Folding";
Click [OK] to accept the settings;
When you are reading a blogger, click this bookmark.

It should turn Fig.A into Fig.B:


Fig.A	Fig.B

Clicking on the title will show/hide the content of each article.

Friday, March 31, 2006

Document loading order

The other day I was learning about how a document is loaded by a browser. I use the <script> tag to insert definitions of different variables at different stages of a document(#2). Then I wrote a function showVars() to check the availabilities of those variables (#1). This showVars() is called at different locations (thus different stages during loading steps) of a document(#4). The output will tell us how a document is loaded.

Other than those defined variables, showVars() also checks the availabilities of document.body and a <div> that is placed in the end of the <body> (#3).

The result shows some interesting features:

-- Retrieving a tag from inside <body> section by document.getElementById() works even before the document starts loading (#1);

-- document.body is available for javascript right after the loading enters <body> tag (#2)-- doesn't have to wait until the entire loading process is completed;

-- A javascript variable V defined with a <script> tag that is inserted into <body> section is availabe only to those javascript code AFTER V is defined;

-- A javascript in body.onload (<body onload="??">) is executed after all elements are loaded, so it can access all of the variables defined anywhere in the document (#7).