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 🙂

GD Star Rating
loading...

Possibly relevant:

About Hardono

Howdy! 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 11 years.

Incoming Search

javascript

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.