2007
03.26

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 🙂

GD Star Rating
loading...

Incoming Search Term

Advertise Here

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.