0ink! » Guaranteed to contain absolutely zero ink!

“Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way round or through it. If nothing within you stays rigid, outward things will disclose themselves.

“Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow or it can crash. Be water my friend.”

– Bruce Lee

Source: Bruce Lee Quotes

If you are using my KCA plugin you would have noticed that it comes with a couple of addons ie. TextArea Resizer and DOM Tooltips.

The good thing about KCA is you can add any JavaScript code as addons to your pages. For example, if you don’t like DOM Tooltips as your tooltip addon, you could always deactivate it and add your own tooltip code, or use one already written by someone else.

Some nice JavaScript tooltip code that I’ve found on the net include:

• ArekorePopup (The site is in Japanese) - Download
• Nice Titles

Because these JavaScript snippets of code are written in an unobtrusive manner (like DOM Tooltips), they can easily be integrated into KCA.

So, if you were to choose ArekorePopup as your tooltip script of choice, all you need to do is put ArekorePopup in the KCA addons directory, then go to Scratch-Pad in KCA and paste the following code:

Description = ArekorePopup + ------------ + Eval = Needle = Userlevel = Active = true Content = Reference = Location = Head = <link rel="stylesheet" type="text/css" href="%%bloginfo('url')%%/wp-content/plugins/kca/addons/ArekorePopup/ArekorePopup.css" /> + <script type="text/javascript" src="%%bloginfo('url')%%/wp-content/plugins/kca/addons/ArekorePopup/ArekorePopup.js" /></script> Body =

Click import and ArekorePopup should now operate on your site. (Remember to deactivate DOM Tooltips, in case they clash)

Note: You are not limited to these script addons. There is a huge variety of DHTML scripts, JavaScript, VBScript, CSS etc., that you can add to your pages via KCA.

It’s almost that time of the year again and you might have noticed snow falling down the page.

In Melbourne we are more likely to see flies buzzing around the place, but the Christmas spirit demanded snow!

So, here’s the code for falling snow that you can import into KCA:

(Source: Snow Effect)

Description = Snowing - With Graphics + ----------------------- Eval = is_single() || is_home() Needle = Userlevel = Active = false Content = Reference = Location = Head = Body = <script type="text/javascript"> + /*<![CDATA[*/ + + //Configure below to change <acronym title="Uniform Resource Locator">URL</acronym> path to the snow image + var snowsrc="%%bloginfo('url')%%/wp-content/plugins/kca/addons/images/snow1.gif" + // Configure below to change number of snow to render + var no = 20; + // Configure whether snow should disappear after x seconds (0=never): + var hidesnowtime = 0; + // Configure how much snow should drop down before fading ("windowheight" or "pageheight") + var snowdistance = "pageheight"; + + ///////////Stop Config////////////////////////////////// + + var ie4up = (document.all) ? 1 : 0; + var ns6up = (document.getElementById&&!document.all) ? 1 : 0; + + function iecompattest(){ + return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body + } + + var dx, xp, yp; // coordinate and position variables + var am, stx, sty; // amplitude and step variables + var i, doc_width = 800, doc_height = 600; + + if (ns6up) { + doc_width = self.innerWidth; + doc_height = self.innerHeight; + } else if (ie4up) { + doc_width = iecompattest().clientWidth; + doc_height = iecompattest().clientHeight; + } + + dx = new Array(); + xp = new Array(); + yp = new Array(); + am = new Array(); + stx = new Array(); + sty = new Array(); + snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc + for (i = 0; i < no; ++ i) { + dx[i] = 0; // set coordinate variables + xp[i] = Math.random()*(doc_width-50); // set position variables + yp[i] = Math.random()*doc_height; + am[i] = Math.random()*20; // set amplitude variables + stx[i] = 0.02 + Math.random()/10; // set step variables + sty[i] = 0.7 + Math.random(); // set step variables + if (ie4up||ns6up) { + if (i == 0) { + document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>"); + } else { + document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>"); + } + } + } + + function snowIE_NS6() { // <acronym title="Internet Explorer">IE</acronym> and NS6 main animation function + doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; + doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; + for (i = 0; i < no; ++ i) { // iterate for every dot + yp[i] += sty[i]; + if (yp[i] > doc_height-50) { + xp[i] = Math.random()*(doc_width-am[i]-30); + yp[i] = 0; + stx[i] = 0.02 + Math.random()/10; + sty[i] = 0.7 + Math.random(); + } + dx[i] += stx[i]; + document.getElementById("dot"+i).style.top=yp[i]+"px"; + document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; + } + snowtimer=setTimeout("snowIE_NS6()", 10); + } + + function hidesnow(){ + if (window.snowtimer) clearTimeout(snowtimer) + for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" + } + + + if (ie4up||ns6up){ + snowIE_NS6(); + if (hidesnowtime>0) + setTimeout("hidesnow()", hidesnowtime*1000) + } + + //]]> + </script>

Here are some images to use:
(Place in “/wp-content/plugins/kca/addons/images”)

Here is another version of the snow effect:

(Source: Snow Effect without images)

Description = Snow - No Images + ---------------- Eval = is_home() || is_single() Needle = Userlevel = Active = true Content = Reference = Location = Head = Body = <script type="text/javascript" src="%%bloginfo('url')%%/wp-content/plugins/kca/addons/snow.js" /></script>

Download the snow.js file and place in addons directory.

Enjoy!