How to Display Tabular Data - A New Perspective | 3

[previous]

The latest part of the code is very simple, and as I said before it's used to show, hide arrow keys and to scroll the text:

var __scrollText='';
var __showArrows=false;
var C_SCROLL_SPEED=50;
var C_HIDE_TIME=1000;
function scrollForward(o) {
	if (o.scroll) {
		o.value= o.value.substring(1) + o.value.substring(0,1);
		setTimeout(
		function () {
			scrollForward(o);
		}
		, C_SCROLL_SPEED);
	}
}
function scrollBackwards(o) {
	if (o.scroll) {
		o.value=o.value.substring(o.value.length-1,o.value.length) + o.value.substring(0,o.value.length-1);
		setTimeout(
		function () {
			scrollBackwards(o);
		}
		,C_SCROLL_SPEED);
	}
}		
function hideIcons(o){
	if (!o.scroll && !__showArrows) {
		var oRight=document.getElementById('right');
		oRight.style.display="none";
		var oLeft=document.getElementById('left');
		oLeft.style.display="none";			
	}
}
function stopScroll(o) {
	__showArrows=false;	
	if (!o.scroll) {
		setTimeout(function () {
			hideIcons(o);
		}, C_HIDE_TIME);
	}
}
function showIcons(o) {
	var styleLen=o.offsetWidth;		
	var b=document.getElementsByTagName('body')[0];
	var span = document.createElement('span');
	span.innerHTML=o.value;
	b.appendChild(span);
	var len=span.offsetWidth;
	b.removeChild(span);
		
	if (len>styleLen) {		
		__showArrows=true;
		var oLeft=document.getElementById('left');
		oLeft.style.left=getX(o)-10;
		oLeft.style.top=getY(o)+5;
		oLeft.style.display='';
		
		oLeft.onmouseup=function () {
			o.scroll=false;
		}
		
		oLeft.onmousedown=function () {
			o.scroll=true;
			__showArrows=true;
			scrollBackwards(o);
		}
		
		oLeft.onmouseover=function () {
			__showArrows=true;
		}
		oLeft.onmouseout=function () {
			o.scroll=false;
			stopScroll(o)
		}
		var oRight=document.getElementById('right');
		oRight.style.left=getX(o)+parseInt(o.style.width.replace('px', ''), 10);
		oRight.style.top=getY(o)+5;
		oRight.style.display='';
		
		oRight.onmouseup=function () {
			o.scroll=false;
		}
		
		oRight.onmousedown=function () {
			o.scroll=true;
			__showArrows=true;
			scrollForward(o);
		}
		
		oRight.onmouseover=function () {
			__showArrows=true;
		}
		oRight.onmouseout=function () {
			o.scroll=false;
			stopScroll(o)
		}				
	}
}

Example

A complete working example can be downloaded here.

Compatibility Table
	Internet Explorer 5.5
	Firefox 1.5
	Netscape 8.1
	Opera 8.5

Conclusion

This article demonstrates a non-conventional manner to show tabular data, addressing all issues to make it work in any browser and using layout best practices. The example used in this article is simple and straightforward. This code can be easily modified, for example, two more arrows can be added to go to the beginning and end of the text, prevent scrolling if the beginning or end of the text has been reached, or any other modification according to your needs.

About the Author

Nicolas Erlijman is a System Engineer specialized in Web technologies working at Tata Consultancy Services, Asia's biggest IT Company. For more information please visit https://www.tcs.com.

 

[previous]

Created: March 27, 2003
Revised: August 3, 2006

URL: https://webreference.com/programming/javascript/ne/1