browse by category or date

This was an improvement from my previous post. We will slowly scroll the snippets using “Window.setTimeout()” functionality.

The modified code (modification is shown in bold) is as follows:

header.php

var myObject;
var myrules = {
	'.codeclicker' : {
		onclick : function() {
			//alert(this.parentNode.tagName);
			var o = this.parentNode;
			if (o.style.overflow == 'hidden') {
				myObject = this.parentNode;
				o.style.overflow = 'scroll';
				var i = 0;
				var increment = 10;
				var loopNum = 48;
				for (i=1; i<=loopNum; i++){
					window.setTimeout('myObject.style.height=''+increment*i+'px';',increment*i);
				}
				window.setTimeout('myObject.style.height='100%';',i*increment);
			}
			else {
				myObject = this.parentNode;
				o.style.height = '21px';
				//window.setInterval('Collapse()',50);
				o.style.overflow = 'hidden';
			}
		}
	}
};
Behavior.register(myrules);

Smaller value of increment and bigger value of loopNum will increase the smoothness. If you have better/cooler idea please share with us 🙂

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 9 years.

1 comment so far

Add Your Comment
  1. The drawback of this solution happen when the snippet’s height is less than 480 pixels. It will slowly scrolled until 480 pixels then reduced back to its maximum size.

    If only we could know how many pixels the height is instead of 100% we might be able to enhance it.